（三）单选框(radio)
单选框不允许选项同时选上
- 组的概念
- 单选框的 name起到了分组的作用，使在同一组的选项只能选中其中一个
<p>性别： <input type="radio" name="sex">男 <input type="radio" name="sex">女 </p>
（四）多选框(checkbox)
<p>爱好： <input type="checkbox" value="sleep" name="hobby">睡觉 <input type="checkbox" value="code" name="hobby">编程 <input type="checkbox" value="read" name="hobby">阅读 </p>
（五）按钮(button)
- 按钮可以使经典按钮形式
- 也可以以图片做按钮链接
<p>按钮: <input type="button" name="btn1"value="点击变长"> <input type="image" src="../resources/images/1.jpg"> </p>
（六）列表框文本域和文件域
- 列表框文本域 textarea 标签
- 文件域 file 标签
1.列表框文本域 (textarea)
<p>反馈： <textarea name="sign" id=" 填入反馈的地址" cols="30" rows="10"></textarea> </p>
2.文件域 (input-file)
<p>附件上传： <input type="file" name="sources"> <input type="button" name="btn2" value="点击上传"> </p>
（七）搜索框滑块和简单验证
- 归类为 input
| 表单元素 | 应用 |
| 传入邮件 | |
| url | 传入网址，链接地址 |
| number | 数字输入框，只允许输入数字 |
| range | 音量等滑动滑块 有0-100 的比例值 |
| search | 搜索框 |
- 代码呈现
<!--邮件验证--> <p>邮件： <input type="email" name="email"> </p> <!--URL--> <p>URL： <input type="url" name="url"> </p> <!--数字--> <p>数字： <input type="number" name="num" max="100" min="0" size="10"> </p> <!--滑块--> <p>音量： <input type="range" name="voice" min="0" max="100" step="2"> </p> <!--搜索框--> <p>搜索： <input type="search" name="search"> </p>
（八）表单的应用
表单的应用
- 隐藏域：hidden
- 只读：readonly
- 禁用：disabled
增强鼠标可用性，点击label，光标自动到text上
<!--增强鼠标可用性，点击label，光标自动到text上--> <p> <label for="mark">你点我试试</label> <input type="text" id="mark"> </p>
- label标签 for 后关键词对应 要跳转索引的 id
（九）表单初级验证
- 常用方式
- placeholder：提示信息
- required：非空判断
- pattern：正则表达式
<p>名称：<input type="text" name="username" placeholder="请输入用户名"></p> <p>名称：<input type="text" name="username" required></p> <!--常用的正则：https://www.jb51.net/tools/regexsc.htm--> <p>自定义邮箱： <input type="text" name="diy" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/"> </p>
1.正则表达式
- 搜索网址
https://www.jb51.net/tools/regexsc.htm
<p>名称：<input type="text" name="username" placeholder="请输入用户名"></p> <p>名称：<input type="text" name="username" required></p> <!--常用的正则：https://www.jb51.net/tools/regexsc.htm--> <p>自定义邮箱： <input type="text" name="diy" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/"> </p>
（十）完整登陆表单演示代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单学习</title> </head> <body> <h3>用户注册</h3> <form action="1.我的第一个网页.html" method="get"> <p>用户： <input type="text" name="username" value="" placeholder="请输入用户名"> </p> <p>密码： <input type="password" name="passwd" value="" required> </p> <p>性别： <input type="radio" name="sex" value="boy">男 <input type="radio" name="sex" value="girl">女 </p> <p>爱好： <input type="checkbox" value="sleep" name="hobby">睡觉 <input type="checkbox" value="code" name="hobby">编程 <input type="checkbox" value="read" name="hobby">阅读 </p> <p> <input type="image" src="../resources/images/1.jpg " width="300" > <br> <hr> <input type="button" value="点击变更长" name="but" > </p> <p>反馈： <textarea name="sign" id=" 填入反馈的地址" cols="30" rows="10"></textarea> </p> <p>附件上传： <input type="file" name="sources"> <input type="button" name="btn2" value="点击上传"> </p> <!--邮件验证--> <p>邮件： <input type="email" name="email"> </p> <!--URL--> <p>URL： <input type="url" name="url"> </p> <!--数字--> <p>数字： <input type="number" name="num" max="100" min="0" size="10"> </p> <!--滑块--> <p>音量： <input type="range" name="voice" min="0" max="100" step="2"> </p> <!--搜索框--> <p>搜索： <input type="search" name="search" id="wb"> </p> <!--增强鼠标可用性，点击label，光标自动到text上--> <p> <label for="wb">你点我试试</label> <input type="text" id=""> </p> <p> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"> </p> </form> </body> </html>
十四、HTML5总结
