第1关:label标签相关概念
1、为了给单行文本框绑定文本标注,以便于用户单击该关联文本时可以使文本框获得焦点,可采用( )标签定义文本。B.label
2、<label>
标签中的for属性取值为( )C.要绑定的表单控件的id属性值
3、<label>
标签中的form属性取值为( ) A.要绑定的表单控件的id属性值
第2关:给表单组件添加说明__单选框
编程要求
根据提示,在右侧编辑器补充代码,在右侧编辑器中的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 name="Film" type="radio" value="Film1"/>夺冠
<input name="Film" type="radio" value="Film2" id="Film2"/><label for="Film2">我和我的祖国</label>
<label><input name="Film" type="radio" value="Film3"/>姜子牙 </label>
<!-- ********* End ********* -->
</form>
</body>
</html>
第3关:给表单组件添加说明——多选框
编程要求
在右侧编辑器中的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 name="Sports"type="checkbox"value="sport1"checked="checked">打篮球
<input name="Sports"type="checkbox"value="sport2"id="sport2">
<label for="sport2">打排球</label>
<label><input name="Sports"type="checkbox"value="sport3">踢足球</label>
<input name="Sports"type="checkbox"value="sport4">其他
<!-- ********* End ********* -->
</form>
</body>
</html>
第4关:给表单组件添加说明-文本框和文本域
编程要求
在右侧编辑器中的Begin - End
区域内补充代码,具体要求是: 1.创建一个包含一个文本框和一个文本域的表单 2.文本“推荐人:”的右方添加文本框,为文本框添加自动聚焦属性 3.换行,设置提示文字“推荐理由:”,并用显示方式将该文本与下一行的文本域关联。 4.文本域中可见行数为6,每行60个字符。 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> <br/>
<textarea rows="6"cols="60"required="required"wrap="hard"id="reason"></textarea>
<!-- ********* End ********* -->
</form>
</body>
</html>