web前端开发与应用——表单组件

label标签及其属性

<label>标签用于为输入类型的表单控件定义标注。用<label>元素定义的文本标签，从显示上看与其他文本毫无差异。但当用户点击由<label>元素定义的文本标签时，与该文本关联的输入控件将获得焦点。 <label>标签的属性主要是：

• for:规定label绑定到哪个表单元素上，属性取值为表单元素的id。 在HTML5中新增了form属性：
• form:规定label字段所属的一个或多个表单。当<label>标签不在表单标签<form>中时，就需要使用form属性来指定所属表单；属性值是其所属表单的id。如果input元素属于多个表单，用空格符分隔表单的id名，但目前浏览器测试都不支持。

label标签与表单控件的关联

label标签与表单控件之间有两种关联方法。

显式关联

通过使用 "for" 属性将 label 绑定到另一个元素，这种方式称为显式关联。 用法示例：

1. <form> 性别：<br/>
2. <input name="sex" id="man" type="radio"/>
3. <label for="man">男</label>
4. <input name="sex" id="woman" type="radio"/>
5. 女
6. </form>

隐式关联

把需要绑定的标签放到label内部，这种关联方法称为隐式关联。 用法示例：

1. <form>性别：<br/>
2. <label><input name="sex" type="radio"/>男</label>
3. <input name="sex" type="radio"/>女
4. </form>

5. <label>标签中的for属性取值为（ C）

   A、

   要绑定的文本内容

   B、

   要绑定的表单标签<form>的id属性值

   C、

   要绑定的表单控件的id属性值

   D、

   要绑定的表单控件的name属性值

6. 3、<label>标签中的form属性取值为（A ）

   A、

   所属表单的id值

   B、

   所属表单的name值

   C、

   所属表单控件的id值

   D、

   所属表单控件的name值

7. 给单选框绑定标注

   为某一个form表单的单选框绑定标注文字有两种显示和隐式两种方法。

8. 显式绑定示例

   1. <form>
   2. 性别：<input type="radio" name="sex" id="male">
   3. <label for="male">男</label>
   4. </form>

   显示效果为：

   性别： 男

9. 隐式绑定示例 <label><input name="sex" type="radio">女</label> 显示效果为： 女

为某一个form表单的文本框和文本域绑定标注文字，可以通过单击标注文字聚焦表单控件，也有两种显示和隐式两种方法。当然也可以使用autofocus属性自动聚焦表单控件。

• 显式绑定文本框示例
  1. <form>
  2. <label for="username">用户名：</label>
  3. <input type="text" id="username">
  4. </form>
• 隐式绑定文本框示例

<label>用户名：<input type="text"></label>

• 设置文本框自动聚焦示例 <input type="text" autofocus="autofocus">

• 设置文本框内容必须填写示例 <input type="text" required="required">