表单与列表
表单
form
一般情况下表单项要放在form内提交
| 属性 | 说明 |
|---|---|
| action | 后台地址 |
| method | 提交方式 GET 或 POST |
label
使用 label 用于描述表单标题，当点击标题后文本框会获得焦点，需要保证使用的ID在页面中是唯一的。
<form action="/api/submit" method="POST">
<label for="title">标题</label>
<input type="text" name="title" id="title">
</form>
input
文本框用于输入单行文本使用，下面是常用属性与示例。
| 属性 | 说明 |
|---|---|
| type | 表单类型默认为 text |
| name | 后台接收字段名 |
| required | 必须输入 |
| placeholder | 提示文本内容 |
| value | 默认值 |
| maxlength | 允许最大输入字符数 |
| size | 表单显示长度，一般用不使用而用 css 控制 |
| disabled | 禁止使用，不可以提交到后台 |
| readonly | 只读，可提交到后台 |
| capture | 使用麦克风、视频或摄像头哪种方式获取手机上传文件，支持的值有 microphone, video, camera |
- 调取摄像头
当input类型为file时手机会让用户选择图片或者拍照，如果想直接调取摄像头使用以下代码。
<input type="file" capture="camera" accept="image/*" />
- 其他类型
| 类型 | 说明 |
|---|---|
| 输入内容为邮箱 | |
| url | 输入内容为URL地址 |
| password | 输入内容为密码项 |
| tel | 电话号，移动端会调出数字键盘 |
| search | 搜索框 |
| hidden | 隐藏表单 |
| submit | 提交表单 |
提交表单
<input type="submit" name="submit" value="提交表单">
<button type="submit">提交表单</button>
禁用表单
通过为表单设置 disabled 或 readonly 都可以禁止修改表单，但 readonly表单的数据可以提交到后台。
<input type="text" name="web" value="mkimq.com" readonly>
pattern
表单可以通过设置 pattern 属性指定正则验证，也可以使用各种前端验证库。
| 属性 | 说明 |
|---|---|
| pattern | 正则表达式验证规则 |
| oninvalid | 输入错误时触发的事件 |
<form action="">
<input type="text" name="username" pattern="[A-z]{5,20}"
oninvalid="validate('请输入5~20位字母的用户名')">
<button>提交</button>
</form>
<script>
function validate(message) {
alert(message)
}
</script>
textarea
文本域指可以输入多行文本的表单，当然更复杂的情况可以使用富文本编辑器。
| 选项 | 说明 |
|---|---|
| cols | 列字符数（一般使用css控制更好） |
| rows | 行数（一般使用css控制更好） |
select
下拉列表项可用于多个值中的选择。
| 选项 | 说明 |
|---|---|
| multiple | 支持多选 |
| size | 列表框高度 |
| optgroup | 选项组 |
| selected | 选中状态 |
| option | 选项值 |
radio
单选框指只能选择一个选项的表单。
| 选项 | 说明 |
|---|---|
| checked | 选中状态 |
<input type="radio" name="sex" value="boy" id="boy">
<label for="boy">男</label>
<input type="radio" name="sex" value="girl" id="girl" checked>
<label for="girl">女</label>
checkbox
复选框指允许选择多个值的表单。
<legend>复选框</legend>
<input type="checkbox" name="lang" value="node" id="node">
<label for="node">node</label>
<input type="checkbox" name="lang" value="js" id="js" checked>
<label for="js">js</label>
文件上传
| 选项 | 说明 |
|---|---|
| multiple | 支持多选 |
| accept | 允许上传类型 |
<form action="" method="POST" enctype="multipart/form-data">
<input type="file" name="icon" multiple="multiple" accept="image/png,image/gif">
<button>保存</button>
</form>
日期与时间
| 属性 | 说明 |
|---|---|
| step | 间隔：date 缺省是1天，week缺省是1周，month缺省是1月 |
| min | 最小时间 |
| max | 最大时间 |
- 日期选择
<input type="date" step="5" min="2020-09-22" max="2025-01-15" name="datetime">
- 周选择
<input type="week">
- 月份选择
<input type="month">
- 日期与时间
<input type="datetime-local" name="datetime">
datalist
input表单的输入值选项列表
<form action="" method="post">
<input type="text" list="lesson">
<datalist id="lesson">
<option value="node">node</option>
<option value="css">css</option>
<option value="mysql">mysql</option>
</datalist>
</form>
autocomplete
浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
列表
有/无序列表
有序列表是指有数字编号的列表项，可以使用CSS定义更多样式。
- list-style-type
| 值 | 说明 |
|---|---|
| circle | 空心圆 |
| disc | 实心圆 |
| square | 实心方块 |
| decimal | 数字 |
| upper-alpha | 大写字母 |
| lower-alpha | 小写字母 |
| upper-roman | 大写罗马数字 |
| lower-roman | 小写罗马数字 |
描述列表
描述列表指每个列表项有单独的标题。
<dl>
<dt>在线文档</dt>
<dd>持续集成</dd>
<dd>内容丰富</dd>
</dl>