HTML标签 之 表单
站长
· 阅读数 29
在网页中，在我们需要收集用户信息的时候，就会用到表单。比如注册账号时有时候需要用户的名字、性别、出生日期、电话、邮箱等，就可以用表单来处理。
一个完整的表单通常由表单域、表单控件（表单元素）和提示信息 3 个部分构成。
一、表单域
表单域是一个包含表单控件的区域，在 HTML 标签中，<form> 标签用来定义表单域，以实现用户信息的收集和传递。<form> 会把它范围内的表单元素信息提交给服务器。
<form action="url" method="post" name="test">
... // 表单控件
</form>- action：值为 url 地址，用于指定接收并处理表单数据的服务器程序的url地址
- method：值为 get 或 post， 用于设置表单数据的提交方式
- name：用于指定表单的名称，因为同一个页面中可能有多个表单域。
二、表单控件
1、<input> 表单控件
input 是输入的意思，在表单控件中，<input> 标签用于收集用户信息。
在 <input> 标签中，包含一个必须的 type 属性，根据 type 不同的值，<input> 可以有多种形式：文本、复选框、单选按钮、按钮等。
<input type="text" /> <!-- <input> 也是单标签 -->| type 属性值 | 说明 |
|---|---|
| text | 定义单行的输入字段，用户可以在里面输入文本，例如输入用户名 |
| password | 定义密码字段，用户输入后看不到明文，一般输入密码时用到 |
| radio | 定义单选按钮，比如在选择性别时，实现多选一（多个 radio 必须有相同的 name 才能实现真正的多选一） |
| checkbox | 定义复选框，比如在选择“我喜欢的栏目”时，可以同时选择多个（多个 checkbox 有相同的 name 才能把所有的选择都正确传到服务端） |
| button | 定义可点击按钮，value 值可以设置按钮文字 |
| file | 定义输入字段和“浏览”按钮，供文件上传 |
| reset | 定义重置按钮，重置按钮会清除表单中的所有数据 |
| submit | 定义提交按钮，提交按钮会把表单数据发送到服务器 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
<input> 标签其他常用属性：
| 属性 | 属性值 | 说明 |
|---|---|---|
| name | 自定义 | 定义 input 控件的名称 |
| value | 自定义 | 定义 input 控件的值 |
| checked | checked | 此 input 控件首次加载时应当被选中 |
| maxlength | 正整数 | 输入文字时字符的最大长度 |
- name 和 value 是每个表单控件都有的属性值，主要给后台人员使用
- name 是表单控件的名字，要求
单选按钮和复选框都要有相同的 name 值
2、<label> 标签
<label> 标签用于绑定一个表单控件，当点击 <lable> 标签内的文本时，浏览器就会自动将光标转到对应的表单控件上，提升用户体验。（可以理解为增大点击区域了）
<!-- 这样在点击“男”这个字时，也会选中该单选框 -->
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />注意：<label> 标签的 for 属性应当与相关控件的 id 属性相同
3、<select> 下拉表单控件
当页面中有多个选项让用户选择时，想要节约页面空间，我们可以使用 <select> 标签控件定义下拉列表。例如我们在选择省份和地区时。
<select>
<option>北京</option>
<option>天津</option>
<option>河北</option>
<option selected="selected">山西</option>
<!--在 <option> 中定义 selected="selected"，当前项为默认选中项-->
...
</select>4、<label> 文本域控件
当用户需要输入较多内容时，可以使用 <textarea> 标签，它用于定义多行文本输入的控件。比如留言板、评论等。
<textarea rows="3" cols="20">
默认的文本内容
</textarea>其中属性 cols 为每行中的字符数，rows 为显示的行数，实际开发中用 CSS 来控制。