给表单组件添加说明

最新推荐文章于 2023-11-15 10:41:33 发布

糯米小辣条

最新推荐文章于 2023-11-15 10:41:33 发布

阅读量1.6k

点赞数 2

分类专栏： Web practice of Educoder

本文链接：https://blog.csdn.net/m0_47174730/article/details/110671883

版权

Web practice of Educoder 专栏收录该内容

38 篇文章 63 订阅

订阅专栏

第1关：label标签相关概念
任务描述
本关任务：完成一组与label标签相关的概念题。
相关知识
为了完成本关任务，你需要掌握：label标签及其相关的属性。
label标签及其属性
<label>标签用于为输入类型的表单控件定义标注。用<label>元素定义的文本标签，从显示上看与其他文本毫无差异。但当用户点击由<label>元素定义的文本标签时，与该文本关联的输入控件将获得焦点。
<label>标签的属性主要是：
for:规定label绑定到哪个表单元素上，属性取值为表单元素的id。在HTML5中新增了form属性：
form:规定label字段所属的一个或多个表单。当标签不在表单标签中时，就需要使用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>

开始你的任务吧，祝你成功！
参考答案：
在这里插入图片描述

第2关：给表单组件添加说明__单选框
任务描述
本关任务：创建一个单选框，并为该单选组的相关控件绑定标注文字。
相关知识
为了完成本关任务，你需要掌握：1.单选框的设置，2.label标签及属性。
给单选框绑定标注
为某一个form表单的单选框绑定标注文字有两种显示和隐式两种方法。
显式绑定示例

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

隐式绑定示例

<label><input name="sex"  type="radio">女</label>

编程要求
根据提示，在右侧编辑器补充代码，在右侧编辑器中的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关：给表单组件添加说明——多选框
任务描述
本关任务：创建一个单选框，并为该单选组的相关控件绑定标注文字。
相关知识
为了完成本关任务，你需要掌握：1.复选框的设置，2.label标签及属性。
给复选框绑定标注
为某一个form表单的复选框绑定标注文字有显示和隐式两种方法。
显式绑定示例

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

隐式绑定示例

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

编程要求

在右侧编辑器中的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"  id="sport2" value="sport2">
    <label for="sport2" >打排球</label>  
    <label><input type="checkbox" name="Sports" value="sport3">踢足球</label>
    <input type="checkbox"  name="Sports" value="sport4" >其他
   <!-- ********* End ********* -->
  </form>
 </body>
</html>

第4关：给表单组件添加说明-文本框和文本域
任务描述
本关任务：创建包含一个单选框和一个文本域的表单，并为该文本框和文本域控件绑定标注文字。实现的效果如下：
在这里插入图片描述
相关知识
为了完成本关任务，你需要掌握：1.文本框和文本域的设置，2.autofocus属性和required，3.label标签及属性。
用法示例
为某一个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，每行50个字符。
5.文本域内容必须填写
6.文本域的id名设为reason
测试说明
平台会对你编写的代码进行测试：
补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务。
越努力越幸运，祝你成功！
参考代码：

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