- 表单域
表单域是一个包含表单元素的区域.
在html标签中,<form>标签用于定义表单域.
<form>会把它范围内的表单元素信息提交给服务器.
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素
</form>
| 属性 |
属性值 |
作用 |
| action |
url地址 |
用于指定接受并处理表单数据的服务器程序的url地址. |
| method |
get/post |
用于设置表单数据的提交方式,其取值为get或post |
| name |
名称 |
用于指定表单的名称,以区分同一个页面中的多个表单域 |
- method 属性
- 如果采用 POST 方法，浏览器将会按照下面两步来发送数据。首先，浏览器将与 action 属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。
在服务器端，一旦 POST 样式的应用程序开始执行时，就应该从一个标志位置读取参数，而一旦读到参数，在应用程序能够使用这些表单值以前，必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数。
- 另一种情况是采用 GET 方法，这时浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据：浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔。
- 一般浏览器通过上述任何一种方法都可以传输表单信息，而有些服务器只接受其中一种方法提供的数据。可以在 <form> 标签的 method （方法）属性中指明表单处理服务器要用方法来处理数据，使 POST 还是 GET。
- 表单控件(表单元素)
- <input>表单元素
<input type="属性值">
- <input>是单标签
- type属性设置不同的属性值用来指定不同的控件类型
- type属性的属性值及其描述:
| 属性值 |
描述 |
| button |
定义可点击按钮(多数情况下,用于通过JavaScript启动脚本) |
| checkbox |
定义复选框 |
| file |
定义输入字段和"浏览"按钮,供上传文件 |
| hidden |
定义隐藏的输入字段 |
| image |
定义图像形式的提交按钮 |
| password |
定义密码字段,该字段中的字符被掩码 |
| radio |
定义单选按钮 |
| reset |
定义重置按钮 |
| submit |
定义提交按钮 |
| text |
定义单行的输入字段,默认宽度为20个字符 |
| 属性 |
属性值 |
描述 |
| name |
由用户自定义 |
定义input元素的名称 |
| value |
由用户自定义 |
规定input元素的值 |
| checked |
checked |
规定此input元素首次加载时应当被选中 |
| maxlength |
正整数 |
规定输入字段中的字符的最大长度 |
- name和value是每个表单元素都有的属性值,主要给后台人员使用
- 一项选择的单选按钮要有相同的name值,复选按钮也要相同的name值
-
<label>标签
- <label>标签为input元素定义标注(标签)
<label>标签用于绑定一个表单元素,当点击<label>标签内的文本时,浏览器就会自动将焦点(光标)转到或选择对应的表单元素上,用来增加用户体验.
语法:
<label for="sex">男</label>
<input type="radio" id="sex">
- 核心: <label>标签的for属性应当与相关元素的id属性相同
- <select>表单元素
用来定义下拉列表
语法:
<select>
<option>选项1</option>
<option>选项2</option>
...
</select>
- 在<option>中定义selected="selected"时,当前选项即为默认选中项
- <textarea>表单元素
是用于定义多行文本输入的控件
语法:
<textarea row="3" cols="20">
默认文本内容
</textarea>
