©2020-2024 ioDraw All rights reserved
第1关：表单元素——文本框
你可以使用<input>标签来创建一个输入框，使用type属性来指定input元素的类型，使用name属性来规定input
元素的名称，它可以对提交到服务器后的表单数据进行标识。
这里type="text"，表示普通文本的输入。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <!--
********* Begin ********* --> 姓名：<input type="text" name="nickName"/> <!--
********* End ********* --> </body> </html>
第2关：表单元素——密码框
可以发现： 密码框的值是以圆点表示的，不会明文显示。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <!--
********* Begin ********* --> 密码：<input type="password" name="check"
value="123"/> <!-- ********* End ********* --> </body> </html>
第3关：表单元素——单选框
你可以使用<input type="radio"/>来创建一个单选框，需要注意的是：同一组单选框的name属性的值要一样。
这里type="radio"，表示单选框。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> 1.
HTML是什么语言？(单选题)<br> <!-- ********* Begin ********* --> <p>A：<input type="radio"
name="question"/>高级文本语言</p> <p>B：<input type="radio"
name="question"/>超文本标记语言</p> <p>C：<input type="radio"
name="question"/>扩展标记语言</p> <p>D：<input type="radio"
name="question"/>图形化标记语言</p> <!-- ********* End ********* --> </body> </html>
第4关：表单元素——多选框
你可以使用<input type="checkbox"/>来创建一个多选框。
需要注意的是：同一组多选框的name属性的值要一样。
这里type="checkbox"，表示多选框。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> 休闲方式:<br>
<!-- ********* Begin ********* --> <p><input type="checkbox" name="relax"
/>逛街</p> <p><input type="checkbox" name="relax"/>看电影</p> <p><input
type="checkbox" name="relax"/>宅</p> <!-- ********* End ********* --> </body>
</html>
第5关：表单元素——checked属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> 婚姻状况:<br>
<!-- ********* Begin ********* --> <p><input type="radio" name="marry"
checked="checked"/>未婚</p> <p><input type="radio" name="marry"/>已婚</p> <!--
********* End ********* --> </body> </html>
第6关：表单元素——disabled 属性
这里在多选框里添加disabled属性即可，它会禁用该input元素，其默认值为disabled。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> 难度系数:<br>
<!-- ********* Begin ********* --> <p><input type="radio" name="degree" >简单</p>
<p><input type="radio" name="degree">中等</p> <p><input type="radio"
name="degree"disabled="disabled">困难</p> <!-- ********* End ********* -->
</body> </html>
第7关：表单元素——label 标签
<label>标签的作用主要是提高用户体验性。当点击<label>元素内的文本时，焦点会自动定位到与<label>
标签绑定的表单元素上。通俗地说，就是点击文本也能选择表单元素。
需要注意的是：<label>标签的for属性的值要和相应表单元素的id的值相同。这样才能把<label>标签和表单元素绑定到一起。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <!--
********* Begin ********* --> <label for="user">用户：</label> <input type="text"
id="user" name="user" /> <br> <label for="pwd">密码：</label> <input
type="password" id="pwd" name="password" /> <!-- ********* End ********* -->
</body> </html>
第8关：表单元素——下拉列表
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> 选择版块： <!--
********* Begin ********* --> <select> <option >问答</option> <option
>分享</option> <option >招聘</option> <option selected="selected">客户端测试</option>
</select> <!-- ********* End ********* --> </body> </html>
第9关：表单元素——文本域
<textarea>标签可以定义多行的文本输入框。用宽（width）和高（height）来定义输入框的大小，用maxlength
来定义文本区域最大能输入的字符数。
如何添加宽、高呢？用<style></style>标签包裹，里面填写样式即可。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- ********* Begin
********* --> <style> textarea { width:200px; height:120px; } </style> </head>
<body> 用一句话描述自己的特点：<textarea maxlength="15"></textarea> <!-- ********* End
********* --> </body> </html>
第10关：表单元素——提交按钮
你可以使用<input type="submit"/>来创建一个提交按钮，用于向服务器端发送数据。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <label
for="user">用户：</label><input type="text" id="user" name="user"/><br> <label
for="pwd">密码：</label><input type="password" id="pwd" name="password"
style="margin-bottom: 10px;"/><br> <!-- ********* Begin ********* --> <input
type="submit" value="submit"/> <!-- ********* End ********* --> </body> </html>
第11关：表单元素的综合案例
笔记
* 类的名字是common，不是.common
*
<span>用户名：</span>
*
每一部分外面都是div标签
*
<input type="radio" id="male" name="sex"/>
<label for="male">男</label>
*
<label for="single" name="state">
<input type="radio" checked="checked" id="single"/>未婚
</label>这两种写法结果是相同的，确保文本在label标签内即可
*
<span>
</span>的作用是什么
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .container{
width: 40%; margin: 20px auto; } .common{ width:230px; height: 30px; } span{
display:inline-block; width: 150px; text-align: right; } div{ margin-bottom:
10px; } </style> </head> <body> <form class="container"> <!-- ********* Begin
********* --> <div> <span>用户名：</span> <input type="text" class="common"> </div>
<div> <span>昵称：</span> <input type="text" class="common"> </div> <div>
<span>性别：</span> <input type="radio" id="male" name="sex"/> <label
for="male">男</label> <input type="radio" id="female"/> <label for="female"
name="sex">女</label> <input type="radio" id="other" disabled="disabled"/>
<label for="other" name="sex">保密</label> </div> <div> <span>教育程度：</span>
<select class="common"> <option >高中</option> <option >中专</option> <option
>大专</option> <option selected="selected">本科</option> <option >硕士</option>
<option >博士</option> <option >其他</option> </select> </div> <div>
<span>婚姻状况：</span> <label for="single" name="state"> <input type="radio"
checked="checked" id="single"/>未婚 </label> <label for="married" name="state">
<input type="radio" id="married"/>已婚 </label> <label for="secret" name="state">
<input type="radio" id="secret"/>保密 </label> </div> <div> <span>兴趣爱好：</span>
<label for="football" name="hobby"> <input type="checkbox" id="football"/>踢足球
</label> <label for="basketball" name="hobby"> <input type="checkbox"
id="basketball"/>打篮球 </label> <label for="film" name="hobby"> <input
type="checkbox" id="film" checked="checked"/>看电影 </label> </div> <div>
<span>描述自己的特点：</span> <textarea maxlength="20" class="common"></textarea>
</div> <div> <span> </span> <input type="submit" value="提交" class="common"/>
</div> <!-- ********* End ********* --> </form> </body> </html>