表单标签
为什么需要表单
使用表单目的是为了收集用户信息。
表单的组成
在 HTML 中,一个完整的表单通常由表单域、表单控件(也称为表单元素)和 提示信息3个部分构成。
表单域
表单域是一个包含表单元素的区域。
在 HTML 标签中, 标签用于定义表单域,以实现用户信息的收集和传递。
会把它范围内的表单元素信息提交给服务器。
<form action=“url地址” method=“提交方式get/post” name=“表单域名称(用于指定表单的名称,以区分同一个页面中的多个表单域)">
各种表单元素控件
</form>
表单控件(表单元素)
表单元素
< input > 标签用于收集用户信息
在 < input > 标签中,包含一个 type 属性,根据不同的 type 属性值,输入字段拥有很多种形式(可以是文本
字段、复选框、掩码后的文本控件、单选按钮、按钮等)。
type 属性的属性值及其描述如下:
属性值 | 描述 |
---|---|
button | 可点击按钮(多数情况下,用于通过JavaScript启动脚本) |
checkbox | 复选框 |
file | 文件上传 |
hidden | 隐藏的输入字段 |
image | 图像形式的提交按钮 |
password | 密码 |
radio | 单选框 |
reset | 重置按钮 |
submit | 提交按钮 |
text | 文本 |
其他属性:
属性 | 属性值 | 描述 |
---|---|---|
name | 由用户自定义 | input元素的名称 |
value | 由用户自定义 | input元素的值 |
checked | checked | 当前元素被选中 |
maxlength | 正整数 | 最大长度 |
- name 和value 是每个表单元素都有的属性值,主要给后台人员使用.
- name 表单元素的名字, 要求 单选按钮和复选框要有相同的name值.
- checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.
- maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用.
< label > 标签
< label > 标签为 input 元素定义标注(标签)。
< label > 标签用于绑定一个表单元素, 当点击
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
核心:
< select > 表单元素
标签控件定义下拉列表。
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
- < select > 中至少包含一对< option > 。
- 在< option > 中定义 selected =“ selected " 时,当前项即为默认选中项。
表单元素
标签是用于定义多行文本输入的控件。
使用多行文本输入控件,可以输入更多的文字,该控件常见于留言板,评论。
<textarea rows="3" cols="20">
文本内容
</textarea>
cols=“每行中的字符数” ,rows=“显示的行数”,我们在实际开发中不会使用,都是用 CSS 来改变大小。