HTML5-表单

0 前言

       HTML表单是一种用于收集用户输入的数据结构，它可以让用户在网页中填写文本、选择选项、上传文件等。HTML表单由标签定义，包含了各种类型的表单元素，如、、等。表单元素有不同的属性和事件，可以控制它们的外观和行为。表单数据可以通过GET或POST方法提交到服务器，由服务器端的脚本进行处理和响应。在本文中，我们将介绍HTML表单的基本语法，如何创建不同类型的表单元素，以及如何验证和发送表单数据。

1 表单应用、语法和属性

1.1 表单定义

以开发的角度定义：多个输入框及按钮以表格的形式展示出来。常用于网站页面当中的登录或注册功能中。
表单的代码结构：

<form>
    用户名：<input type="text"/><br/>
    密码<input type="password"/>
</form>
//type的值为当前元素的类型

1.2 文本框

type的值为text，用户输入的值明文显示。

用户名：<input type="text"/>

1.3 密码框

type的值为password，用户输入的值暗文显示。

密码<input type="password"/>

1.4 单选按钮

type的值为radio，同一组单选框有相同的name，checked可设置初始化时默认选中。

男：<input type="radio" name="sex" value="男" checked/>
女：<input type="radio" name="sex" value="女"/>

1.5 复选框

type的值为checkbox，同一组复选框有相同的name，checked可设置初始化时默认选中。

苹果：<input type="checkbox" name="fruit" value="苹果" checked/>
香蕉：<input type="checkbox" name="fruit" value="香蕉"/>
橘子：<input type="checkbox" name="fruit" value="橘子"/>

1.6 列表框

列表的标签名为select，列的标签名为option

<select>
    <option>中国</option>
    <option>韩国</option>
    <option>日本</option>
</select>

1.7 按钮

重置按钮 reset，初始化表单。
提交按钮 submit，将表单中数据提交给后端。
普通按钮button，需自定义效果，默认无效果。

<input type="reset" value="重置">
<input type="submit" value="提交">
<input type="button" value="确认">

1.8 多行文本域

可输入多行的文本框

普通文本框：<input type="text"/>
多行文本域：<textarea></textarea>

1.9 文件域

type的值为file，须在form中设置enctype属性为multipart/form-data

<form enctype="multipart/form-data">
    <input type="file"/>
    <input type="submit" value="提交"/>
</form>

1.10 邮箱

type的值为email，浏览器会自动识别邮箱，如不符合规范，submit将无法提交。

<input type="email"/>

1.11 网址

type的值为url，浏览器会自动识别网址，如不符合规范，submit将无法提交。

<input type="url"/>

1.12 数字

type的值为number，min可设置最小值，max可设置最大值，step可设置数字步长，浏览器会自动识别区间在最小值在最大值之间，且步长正确的数字，如不符合规范，submit将无法提交。

<input type="number" min="1" max="100" step="3"/>
<input type="submit" value="提交"/>

1.13 滑块

type的值为range，min可设置最小值，max可设置最大值，step可设置数字步长，滑块只能选择最小值在最大值之间，且步长正确的数字。

<input type="range" min="1" max="100" step="3"/>
<input type="submit" value="提交"/>

1.14 搜索框

type的值为search，效果为带清空按钮的文本框。

文本框：<input type="text"/>
搜索框：<input type="search"/>

2 表单的高级应用

2.1 隐藏域

type的值为hidden，常用于不需要向用户展示，但需要向后台传参的情况。

<input type="hidden" id="xx" name="xx" value="xx"/>

2.2 只读与禁用

只读：标签内加入readonly，可选中但不可编辑。
禁用：标签内加入disabled，无法选中且不可编辑。

正常文本框：<input type="text"/>
只读文本框：<input type="text" readonly/>
禁用文本框：<input type="text" disabled/>

2.3 表单元素的标注

在<label>标签内添加属性for，值为对应input标签的id，便于用户的使用。

<label for="male">男：</label><input type="radio" name="sex" id="male" value="男" checked/>
<label for="female">女：</label><input type="radio" name="sex" id="female" value="女"/>

3 表单的初级验证

3.1 表单的初级验证缘由

1）减轻服务器压力
2）保证数据的可行性和安全性

3.2 表单的初级验证方式

1）placeholder
       一般用于提示用户需要输入的字符，例“请输入密码…”。输入内容后，提示语消失。适用于text、password、url、email、search等等。

账号：<input type="text" placeholder="请输入账号..."/>
密码：<input type="password" placeholder="请输入密码..."/>

2）required
       用户提交的参数不能为空，如为空，则禁止提交并提示。适用于text、radio、file等等。

账号：<input type="text" placeholder="请输入账号..." required/>
密码：<input type="password" placeholder="请输入密码..." required/>
<input type="submit" value="提交"/>