表单是一种常见的前后端数据交互方式，下面是表单的基本结构和一些表单控件。
<!-- form 表单主体 | method 表单的 HTTP 请求方法 GET/POST | action 接收请求路径 -->
<form method="post" action="index.php" >
<!-- 表单控件 -->
<input type="text" /> <!-- 文本框 -->
<input type="password" /> <!-- 密码框 -->
<input type="hidden" /> <!-- 隐藏框 -->
<input type="number" /> <!-- 数字框 -->
<input type="date" /> <!-- 日期控件 -->
<!-- 多选框 | 相同 name 为一组 -->
牛奶 <input type="checkbox" name="food" /> 面包<input type="checkbox" name="food" />
<!-- 单选框 | 相同 name 为一组 -->
男 <input type="radio" name="sex" /> 女 <input type="radio" name="sex" />
<!-- 多行文本框 | cols 宽 rows 高 -->
<textarea rows="2" cols="20"></textarea>
<!-- 选择框 -->
<select name="num">
<option>one</option>
<option>two</option>
<option>three</option>
</select>
<!-- 上传文件 | accept 文件类型限制 -->
<input type="file" accept="image/gif, image/jpeg, image/png" >
<!-- 范围控件 | min max 范围值 -->
<input type="range" min="1" max="100" />
<!-- 颜色控件 -->
<input type="color" />
<!-- 表单提交 -->
<input type="submit" value="提交" />
<!-- 表单重置 -->
<input type="reset" value="重置" />
<!-- 普通按钮 -->
<button type="button">按钮</button>
</form>文本框
密码框
隐藏框
数字框
日期
多选框
单选框
多行文本框
选择框
上传文件
范围
颜色
提交
重置
按钮
name
<!-- name 属性是一个表示，后台通过这个表示获取对应的表单数据 -->
<input type="text" name="user" />value
<!-- value 是控件的值 -->
<input type="text" name="user" value="Ada" />placeholder
<!-- placeholder 提示 -->
<input type="text" placeholder="请输入用户名" />datalist > list
<!-- datalist > list 下拉提示框 -->
<input type="text" name="someone" list="zhou">
<datalist id="zhou">
<option value="周杰伦">周杰伦</option>
<option value="周大福">周大福</option>
<option value="周武王">周武王</option>
</datalist>maxlength
<!-- maxlength 长度限制 -->
<input type="text" maxlength="12" />size
<!-- size 控件尺寸 -->
<input type="text" size="30" />required
<!-- required 必选 -->
<input type="text" required /> readonly
<!-- readonly 只读 -->
<input type="text" readonly />disabled
<!-- disabled 禁用 -->
<input type="text" disabled />pattern
<!-- pattern 正则校验 -->
<input type="text" pattern="[0-7]{3}" />