表单
表单是前台和后台的沟通媒介，表单在前端是用来收集数据的
表单标签：<form></form>
定义html表单，可以添加不同类型的input元素、复选框、单选按钮、提交按钮等表单元素
其他相关的表单标签
表单域标签：<fieldset></fieldset> 用于划分表单的区域
标题域标签：<legend></legend>
表单标签<form>的具体属性
| 属性 | 描述 |
|---|---|
action | 定义在提交表单时执行的动作，一般是具体的脚本 |
method | 规定在提交表单时所用的 HTTP 方法，通常设置为method="GET"或method="POST" |
target | 规定提交表单后在何处显示响应 |
autocomplete | 设置历史提示的开启和关闭，on表示开始，是默认情况；off表示关闭 |
Novalidate | 是一个bool类型的数据，规定提交时不应验证表单数据 |
对于action属性，通常当用户单击“提交”按钮时，表单数据将发送到服务器上的文件中，如果省略action属性，则将action设置为当前页面
对于method属性的两种方法：
GET是默认方法，当使用GET时，表单数据在页面地址栏中是可见的，GET最适合少量数据的提交，不适合发送敏感数据；POST的安全性更好，在页面地址栏中被提交的数据是不可见的，如果表单正在更新数据，或者包含敏感信息（例如密码）时，可以设置POST方法
target属性可以设置以下的值：
| 值 | 描述 |
|---|---|
_blank | 响应显示在新窗口或选项卡中 |
_self | 响应显示在当前窗口中，默认情况 |
_parent | 响应显示在父框架中 |
_top | 响应显示在窗口的整个body中 |
framename | 响应显示在命名的iframe中 |
对于autocomplete属性启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值
输入标签
表单中有许多的元素，其中最主要的元素是输入框，及<input>标签
标签类型
对于表单元素<input>的属性type，<input type="">
有如下的类型：
| 类型 | 描述 |
|---|---|
text | 定义常规文本输入，默认情况 |
password | 对于密码字段 |
number | 定义数字文本框，具有上下步长调节器 |
date | 定义包含年月日的输入字段 |
month | 定义包含年月的输入字段 |
week | 定义用户可以选择周和年 |
time | 定义用户可以选择时间，无时区 |
email | 定义包含电子邮件地址的输入字段，如果输入的不是邮箱格式，系统会进行提示 |
tel | 定义包含电话号码的输入字段 |
url | 定义包含URL地址的输入字段 |
color | 定义包含颜色的输入字段 |
range | 定义包含一定范围内的值的输入字段，样式为水平的步长调节器 |
hidden | 定义隐藏表单，表单是看不见的，但是实际上是有效的 |
submit | 设置为提交表单按钮 |
radio | 设置为单选框 |
checkbox | 设置为多选框 |
file | 设置为文件上传 |
search | 设置为搜索表单项，后面有个清空按钮 |
对于number和range类型的输入元素，可以使用以下属性来限制规定：min、max、step、value
表单元素<input>还有一个name属性，用于提交时使用，如果想正确内容被提交，每个输入字段必须设置一个 name属性，否则后端是无法正常接收的
<!--文本输入：-->
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
<!--单行按钮输入：-->
<form>
<input type="radio" name="sex" value="male" checked>Male <!--checked表示默认选中-->
<br>
<input type="radio" name="sex" value="female">Female
</form>
<!--文件上传：-->
<input type="file" name="image[]" accept=".png,.psd" multiple><!--accept表示规定上传的类型-->
<!--提交按钮输入：-->
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
定义图片为提交按钮
<input type="image" src="/i/eg_submit.jpg" alt="Submit" width="128" height="128"/>其他属性
| 属性 | 描述 |
|---|---|
value | 规定输入字段的初始值，是实打实的值 |
readonly | 规定输入字段为只读，该属性不需要设置值，其内容是可以发送到后端的 |
disabled | 规定输入字段是禁用的，该属性不需要设置值，其内容是不能发送到后端的 |
size | 规定输入字段的尺寸(横向的长度)，如size="10" |
maxlength | 规定输入字段允许的最大长度，如maxlength="10" |
height | 规定 <input> 元素的高度 |
width | 规定 <input> 元素的宽度 |
placeholder | 规定用以描述输入字段预期值的提示（占位提示文本） |
autofocus | 规定当页面加载时<input>元素应该自动获得焦点，该属性不需要设置值 |
form | 规定<input>元素所属的一个或多个表单，可以在表单外设置该表单的输入元素 |
formaction | 规定当提交表单时处理该输入控件的文件的URL |
<!--对于form属性的具体使用，前提是表单属性必须设置id属性-->
<form action="action_page.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
Last name: <input type="text" name="lname" form="form1"> <!--添加的属性在submit按钮的下方-->对于formaction属性会覆盖 <form>元素的 action 属性，其中只适用于type="submit"以及 type="image"
<!--可以设置管理员和用户的不同url路径的提交-->
<!DOCTYPE HTML>
<html>
<body>
<form action="/example/html5/demo_form.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="提交" /><br />
<input type="submit" formaction="/example/html5/demo_admin.asp" value="以管理员身份提交" />
</form>
</body>
</html>文本域和下拉列表块标签
文本域是指多行文本，其标签为<textarea></textarea>，其属性与单行文本类似，但是默认值不能使用value，直接在标签包裹出输入即可
列表块，用户可以通过下拉列表去选择对应的值，其标签为：
<select name=""> <!--可以设置multiple属性表示多选，但是其name值后面需要加上[]，表示数组接收-->
<option value="">新闻</option>
<option value="" selected>游戏</option> <!--selected属性表示默认选中-->
</select>前端显示的是标签，后端接收的是其value值
表单的验证规则
必填规则
在其<input>标签中加入required属性：<input required />
前端设置了验证规则，在后端中也一样要对其设置约束
其他的验证规则
通过pattern属性实现：<input pattern="[A-Z]{5}"> 表示输入的内容只能是A-Z，并且字符长度是5位