表单标签
表单组成: 一个完整的表单通常有表单域,表单空间(表单元素)和提升信息3个部分构成。
表单域
表单域是一个包含表单元素的区域。
其中,<form>标签用于定义单域,已实现用户信息的收集和传递。
<form>会把他范围内的表单元素信息交给服务器
<form action="url地址"method="提交方式"name="表单域名称">
各种表单元素控件
</form>
表单元素(表单空间)
<input>表单元素:用于收集用户信息。
在<input>标签中,包含type属性,根据不同的type属性值,输入的字段用于很多种形式(如文本字段,复选框,掩码后的文字控件,按钮等).
如:<input type="属性值">
<input>标签为单标签
type属性设置不同的属性值用来指定不同的控件类型。
除type外,<input>标签还有很多属性,如:
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 由用户自定义 | 定义input元素的名称(用于区别不同表单) |
| value | 由用户自定义 | 规定input元素的值 |
| checked | checked | 规定此input元素首次加载是应被选中(页面打开时被默认选中) |
| maxlength | 正整数 | 规定输入字段中字符最大长度(一般用于限制用户名长度) |
<label>标签
<label>标签用于绑定一个表单元素,当点击<label>标签内文本时,浏览器就会自动将焦距(光标)转到或者选择对应的表单上,用来增加用户体验。
<laber for="sex">男</label>
<input type="radio" name="sex" id="sex">
<!-- 核心:<label>标签的for属性应当与相关元素的id属性相同。-->
<select>表单元素
在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们使用<select>标签空间定义下拉列表。
籍贯: <select>
<option>广西</option>
<option>山西</option>
<option>陕西</option>
<option>江西</option>
</select>
<select>至少包含一组<option>- 在
<option>种定义selected="selected"时,当前项即为默认选项。
<option selected="selected">江西</option>
<textarea>表单元素
当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用标签。 在表单元素中,<textarea>标签时用于定义多行文本输入的控件。
<textarea rows="3" cols="20">
文本内容
</textarea>
- 通过
<textarea>标签可以轻松创建多行文本输入框。 - cols="每行中的字符数",rows="显示的行数"(一般不使用,会用css来改变大小)。