HTML5 表单的应用

1.表单

• 表单在网页中随处可见，比如登录页面中的用户名、密码、验证码、提交按钮
  由一些常用的小组件组成，文本框，密码框等

语法：

• 表单在HTML5中，使用<from>标签用于创建表单，以实现用户信息的收集和传递
• <from action>=“表单提交地址” method="表单提交方式”

• 而提交方法有两种：post方法和get方法

• post和get区别
  post：不改变浏览器地址，安全性高于get，用于保存，修改删除
  get：表单信息会显示在地址栏中，安全性低，用于查询数据信息

2.input标签

语法：
<input> type=“组件类型” name=“名称” size=“宽度” maxlength=“最大输入” checked>

<type>类型

• text：普通的文本输入框
• password：密码框，输入的内容被隐藏
• radio：单选按钮，name必须为一组，使用checked默认选中
• checkbox：复选框，可以选中多个目标
• button：普通按钮
• submit：提交按钮，将数据发送到服务器
• reset：表单重置按钮，清空from中的数据
• file：文件上传按钮
• email：邮箱输入框，会自动校验输入的内容是否为邮箱格式
• url:网络输入框，会校验内容是否为网址
• number：数字输入框
• range：滑块，滑动选择数值，用min和max设定数值范围，step设定数字间隔
• search：搜索框，可以清空输入

3.列表框

<select name=“名称”> 定义一个下拉多行列表
<option value=“可选项的值”selected=“selected”>选项显示的内容</option>
<option value=“可选项的值”>选项的显示内容</option>

selected属性在默认情况下被选中的

4.多行文本域

<textarea name=“textarea” aols=“显示的宽度” rows=“显示的行数”>
文本内容
<textarea>
与iuput不同，textarea没有valaer属性，直接写在标签里

5.高级应用

• 隐藏域：隐藏域在页面中用户是不可见的，用于隐藏用户信息

<input type=“hidden”>

• 只读禁用：数据不可修改，灰色的按钮不可以单击。

只读（readonly）属性 ，禁用（disabled）属性

列表框的默认选中，可以写为selected

6.表单的标注

对鼠标进行标注，则可以不用直接选中单选按钮，反而可以单击文本，其对应的按钮会自动选中

7.表单验证

• placeholder属性：属于input类型文本框提供的提示，文本框为空时，出现提示。文本框输入内容时，提示语消失。

placeholder=“提示语”

• required属性：用于规定输入框不能为空，否则不能提交表单
• pattern属性：用来校验输入内容是否匹配