【表单】input元素总结
坑军之王
227
inuput元素用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据; 可以使用各种类型的输入数据和控件小部件。
input元素涉及到的属性因为其type属性包含的内容比较多，且大部分属性都有其针对性，故以下对属性的列举只列举HTML5的标准属性
首先是input元素的公有属性：
|
属性 |
描述 |
|
autocomplete |
自动填充 |
|
autofocus |
页面加载时自动聚焦（自动选中）该控件 |
|
disabled |
表单控件是否被禁用 |
|
name |
表单控件的名字 |
|
type |
Input控件的类型 |
|
value |
表单控件的值，提交的时候一起提交 |
除了这些属性外，还有HTML全局属性适用于input元素的属性，相关信息可在MDN文档上查看：
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes
接下来是针对不同type有的额外的属性：
|
type |
属性 |
属性值 |
说明 |
|
button |
value |
自定义 |
显示按钮文本为自定义内容 |
|
checkbox |
checked |
|
多选框的默认选中状态 |
|
value |
自定义 |
指定input的值，Gecko 和 IE会忽略该值 |
|
|
indeterminate |
|
指定 checkbox 处于不定状态 |
|
|
color |
autocomplete |
ture/false |
如果为true，自动填充颜色选择器上次储存的颜色值 |
|
name |
自定义 |
指定颜色选择器的name |
|
|
value |
十六进制颜色码 |
指定颜色选择器的默认选择颜色，如未指定，值默认为#000000 |
|
|
date |
value |
yyyy-mm-dd |
以属性值指示格式指定默认日期 |
|
max |
yyyy-mm-dd |
指定日期选择器最大选择日期 |
|
|
min |
yyyy-mm-dd |
指定日期选择器最小选择日期 |
|
|
required |
/ |
指定必须填写日期，否则在提交的时候会报错 |
|
|
datatime-local |
value |
yyyy-mm-ddThh：mm |
以属性值指示格式指定默认日期 |
|
max |
yyyy-mm-ddThh：mm |
指定日期选择器最大选择日期 |
|
|
min |
yyyy-mm-ddThh：mm |
指定日期选择器最小选择日期 |
|
|
requird |
yyyy-mm-ddThh：mm |
指定必须填写日期，否则在提交的时候会报错 |
|
|
text |
maxlength |
数字 |
文本框最大接收字符数 |
|
minlength |
数字 |
文本框最小接收字符数 |
|
|
pattren |
正则表达式 |
验证文本框内容的正则表达式 |
|
|
placeholder |
自定义字符串 |
未输入时显示的示例文本 |
|
|
readonluy |
true/false |
指定文本框内容是否只读 |
|
|
size |
数字 |
指示文本框有多少字符宽度 |
|
|
spellcheck |
true/false |
是否启动拼写检查 |
|
|
|
input支持属性 |
|
|
|
file |
accept |
文件格式 |
指定上传文件插件可选择的文件类型，有多个属性的话使用“，”隔开 |
|
capture |
字符串 |
如果文件是视频或者图片格式，则选择指定名称设备进行录制、录音等操作 |
|
|
multiple |
|
指定可以同时上传多个文件 |
|
|
image |
src |
url |
指定按钮上显示图片的地址，否则忽略该属性 |
|
height |
长度 |
指定按钮显示图片的高度 |
|
|
width |
长度 |
指定按钮显示图片的宽度 |
|
|
formethod |
GET/POST |
指定图片在提交后的发送方式，设定后将覆盖在form元素上的设置 |
|
|
month |
max |
yyyy-mm |
指定接收的最大日期 |
|
min |
yyyy-mm |
指定接收的最小日期 |
|
|
readonly |
true/false |
是否只读 |
|
|
number |
value |
数字 |
指定默认值（可编辑） |
|
min |
数字 |
可输入的最小数字 |
|
|
max |
数字 |
可输入的最大数字 |
|
|
placeholder |
自定义字符串 |
指定无输入时显示信息 |
|
|
step |
小数 |
允许保留指定保留小数 |
|
|
password |
autocomplete |
on |
允许自动补充 |
|
|
off |
关闭自动填充 |
|
|
|
current-password |
允许浏览器或者密码管理器输入网站的当前密码 |
|
|
|
new-password |
允许浏览器或者密码管理器输入网站的新密码 |
|
|
required |
/ |
强制检查，如果为空，提交则宝座 |
|
|
inputmode |
text, tel, url, email, numeric, decimal, and search |
指定输入模式 |
|
|
maxlength |
数字 |
最长可输入长度 |
|
|
minlength |
数字 |
最短可输入长度 |
|
|
pattren |
正则表达式 |
前端输入值限制 |
|
|
range |
max |
数字 |
最大允许选择的数字 |
|
min |
数字 |
最小允许选择的数字 |
|
|
step |
数字 |
设定选择数字的步进间隔，如果不设置的话range只能选择整数 |
|
|
list |
datalist的id |
使得range和datalist进行绑定 |
|
|
search |
maxlength |
数字 |
可接受最大字符数 |
|
minlength |
数字 |
可接受最小字符数 |
|
|
placeholder |
自定义文本 |
没有值输入时显示的文本 |
|
|
pattern |
正则表达式 |
输入框内输入内容限制 |
|
|
readonly |
true/false |
是否只读 |
|
|
spellcheck |
true/false |
是否启动拼写检查 |
|
|
list |
datalist的id |
与datalist进行绑定 |
|
|
tel |
placeholder |
自定义文本 |
没有值输入时显示文本 |
|
size |
数字 |
指定输入框的长度为设定数值 |
|
|
value |
自定义文本 |
默认值设置（可编辑） |
|
|
maxlength |
数字 |
可接受最大字符数 |
|
|
minlength |
数字 |
可接受最小字符数 |
|
|
required |
/ |
强制验证填写，否则会报错 |
|
|
time |
value |
hh:mm |
指定默认时间 |
|
max |
hh:mm |
可接收最晚的时间 |
|
|
min |
hh:mm |
可接收最早的时间 |
|
|
readonly |
true/false |
设置是否只读 |
|
|
week |
value |
yyyy-Ww |
设置默认值 |
|
max |
yyyy-Ww |
可接收最新时间 |
|
|
min |
yyyy-Ww |
可接收最早时间 |
|
|
readonly |
true/false |
设置是否只读 |
|
|
url |
除了type和text不同外，其余和text基本一致 |
||
|
reset |
accesskey |
键名 |
设置重置快捷键 |
|
disabled |
true/false |
是否禁用重置功能 |
|
|
submit |
value |
字符串 |
按钮显示的字符串 |
|
formation |
url |
指定提交的地址，优先级高于其他input和form设置的地址 |
|
|
formenctype |
查看form中entype属性值 |
指定将表单数据提交到服务器时的编码方式，优先级高于其他input和form设置的地址 |
|
|
text/plain |
|
纯文本、调试时可用，查看提交数据 |
|
|
formethod |
POST/GET |
指定表单提交时使用的HTTP方法 |
|
|
formnovaildate |
true/false |
表单是否验证，优先级最高 |
|