当前位置：网站首页>给表单组件添加说明

给表单组件添加说明

2022-06-21 12:22:00 【是小鹿啊】

给表单组件添加说明

文章目录

第1关：label标签相关概念

相关知识

label标签及其属性

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

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

label标签与表单控件的关联

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

显式关联

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

<form> 性别：<br/>  
    <input name="sex" id="man" type="radio"/>  
    <label for="man">男</label>   
    <input name="sex" id="woman" type="radio"/>  
    女 
</form>
隐式关联

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

<form>性别：<br/> 
    <label><input name="sex" type="radio"/>男</label>  
    <input name="sex" type="radio"/>女
</form>

通关知识

1、为了给单行文本框绑定文本标注，以便于用户单击该关联文本时可以使文本框获得焦点，可采用（B）标签定义文本。
A、lable
B、label
C、blur
D、focus

2、<label>标签中的for属性取值为（C）
A、要绑定的文本内容
B、要绑定的表单标签<form>的id属性值
C、要绑定的表单控件的id属性值
D、要绑定的表单控件的name属性值

3、<label>标签中的form属性取值为（A）
A、所属表单的id值
B、所属表单的name值
C、所属表单控件的id值
D、所属表单控件的name值

第2关：给表单组件添加说明__单选框

相关知识

给单选框绑定标注

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

  • 显式绑定示例

    <form>  
    性别：<input type="radio" name="sex" id="male">  
    <label for="male">男</label>
</form>

    显示效果为：

    image-20211214105205371

  • 隐式绑定示例 <label><input name="sex" type="radio">女</label>

    显示效果为：

    image-20211214105237720

编程要求

根据提示，在右侧编辑器补充代码，在右侧编辑器中的Begin - End区域内补充代码，具体要求是：

  1. 创建一个三选一的选择区
  2. 单选的名称为“Film"
  3. 第一个选项的value值为“Film1”，提示文字为"夺冠"
  4. 第二个选项的value值为“Film2”，id值也设置为“Film2”，提示文字为"我和我的祖国"，并将该提示文字用显式的方法与这个单选控件绑定。
  5. 第三个选项的value值为“Film3”，提示文字为"姜子牙"并将该提示文字用隐式的方法与这个单选控件绑定。

通关代码

<!DOCTYPE html>
 <head>
  <meta charset="UTF-8">
  <title>为表单的单选控件添加说明</title>
 </head>
 <body>  
  <form>
   国庆期间你最喜欢看的电影？<br/>
   <!-- ********* Begin ******* -->
     <input type="radio" name="Film" value="Film1" />夺冠
    <input type="radio" name="Film" id="Film2" value="Film2" />
    <label for="Film2" >我和我的祖国</label>  
    <label><input type="radio" name="Film" value="Film3" />姜子牙</label>
   <!-- ********* End ********* -->
  </form>
 </body>
</html>

第3关：给表单组件添加说明——多选框

相关知识

给复选框绑定标注

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

  • 显式绑定示例

    <form>  
    请选择你喜欢的水果：<br/>  
    <input type="checkbox" name="Fruit" value="apple" id="apple"> 
    <label for="apple">苹果</label>
</form>

    显示效果为：

    image-20211214110001777

  • 隐式绑定示例

    <label><input type="checkbox" id="orange">橘子</label>

    显示效果为：

    image-20211214110055810

编程要求

在右侧编辑器中的Begin - End区域内补充代码，具体要求是：

  1. 创建一个有4个选项的多项选择区
  2. 多选的名称为“Sports"
  3. 第一个选项的value值为“sport1”，设置为默认选中，提示文字为"打篮球"
  4. 第二个选项的value值为“sport2”，id值也设置为“sport2”，提示文字为"打排球"，并将该提示文字用显式的方法与这个复选控件绑定。
  5. 第三个选项的value值为“sport3”，提示文字为"踢足球"并将该提示文字用隐式的方法与这个单选控件绑定。
  6. 第四个选项的value值为“sport4”，提示文字为"其他。

通关代码

<!DOCTYPE html>
 <head>
  <meta charset="UTF-8">
  <title>为表单的复选控件添加说明</title>
 </head>
 <body>  
  <form>
   你喜欢的运动是？<br/>
   <!-- ********* Begin ******* -->
    <input type="checkbox" name="Sports" value="sport1" checked="checked" />打篮球
    <input type="checkbox" name="Sports" value="sport2" id="sport2" /><label for="sport2">打排球</label>
    <label><input type="checkbox" name="Sports" value="sport3" id="sport3" />踢足球</label>
    <input type="checkbox" name="Sports" value="sport4" />其他
   <!-- ********* End ********* -->
  </form>
 </body>
</html>

第4关：给表单组件添加说明-文本框和文本域

相关知识

用法示例

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

  • 显式绑定文本框示例

    <form>  
    <label for="username">用户名：</label> 
    <input type="text" id="username">
</form>

  • 隐式绑定文本框示例

<label>用户名：<input type="text"></label>
  • 设置文本框自动聚焦示例 <input type="text" autofocus="autofocus">
  • 设置文本框内容必须填写示例 <input type="text" required="required">

编程要求

在右侧编辑器中的Begin - End区域内补充代码，具体要求是：

  1. 创建一个包含一个文本框和一个文本域的表单
  2. 文本“推荐人：”的右方添加文本框，为文本框添加自动聚焦属性
  3. 换行，设置提示文字“推荐理由：”，并用显示方式将该文本与下一行的文本域关联。
  4. 文本域中可见行数为6，每行60个字符。
  5. 文本域内容必须填写
  6. 文本域的id名设为reason

实现效果：

image-20211214111056547

通关代码

<!DOCTYPE html>
 <head>
  <meta charset="UTF-8">
  <title>为文本域控件添加说明</title>
 </head>
 <body>  
  <form>
   推荐人：
   <!-- ********* Begin ******* -->
    <input type="text" autofocus="autofocus" /><br>
    <label for="reason">推荐理由：</label><br>
    <textarea wrap="hard" required="required" id="reason" rows="6" cols="60">
    <textarea>
   <!-- ********* End ********* -->
  </form>
 </body>
</html>
原网站

版权声明
本文为[是小鹿啊]所创，转载请带上原文链接，感谢
https://blog.csdn.net/m0_51511286/article/details/121922902

边栏推荐

猜你喜欢

随机推荐