2 HTML元素大全-表单( 二 ) _生活百科

type：文本框、复选框、单选框、按钮等。
input.typeinput.type/属性描述备注text文本输入框（默认），单行文本，不支持换行<input type="text">password密码输入框radio单选框，相同name为一组互斥记得赋值valuecheckbox多选框，相同name为一组。如选中多个值会提交多个key-value记得赋值valuenumber数字输入， step设置步长hidden隐藏框/域，页面不可见，用于一些逻辑处理button普通按钮，按钮显示value值，结合JavaScript事件使用<input type="button" value="https://www.huyubaike.com/biancheng/提交" onclick="">建议用<button>元素代替submit表单提交按钮，在form中有效，直接提交表单数据同<button>元素的submit模式reset表单重置按钮，重置表单的数据， form中有效。image图片提交按钮，同submit ， **src**设置图片，无图则显示altheight、width设置图片大小file文件选择框，如多值则value为第一个值， js获取files取多个值capture媒体拍摄方式-移动端?accept可接受文件类型，多个逗号隔开， image/png, video/*.jpg,.png,.docemail电子邮箱，支持邮箱格式验证验证邮箱格式range滑块数字，用 min 和 max 来设置值的范围， step设置步长list可设置刻度search搜索框，和text差不多tel电话号码，和text差不多，有些终端支持虚拟键盘不验证（不同地区格式不同）urlURL地址，和text差不多验证url格式color ， IE颜色输入控件， date ， IE日期输入，年月日datetime-local ， IE日期时间输入，年月日、时分秒， Chrome/Opera /Edge支持yyyy-MM-ddThh:mmmonth ， IE年月输入，输入年份或月份value="https://www.huyubaike.com/biancheng/2018-05"time ， IE时间控件，小时、分week ， IE年和周数，用于输入以年和周数组成的日期，支持的不多

文章插图

注意：

一般浏览器对不支持的type ，都默认降级为text 。
文件选择框如通过表单提交，表单需设置属性enctype="multipart/form-data"设置表单数据编码为多种数据组合，同时设置提交方式为post ，才可以上传文件（二进制）。

<input>的常规属性基础属性描述相关type值/备注name控件名称（通用属性），表单中须赋值，会作为参数名type表单控件类型详见上表value<input>的值，可设置默认值。tabindex当前文档的 Tab 导航顺序中的位置size宽度，文本框可显示的字符宽度，类似css的width字符数量min/maxlength可输入字符数量，文本框可输入最少/大字符数量文本输入类readonly只读，不可编辑， IE有光标显示true值可省略disabled不可用，无光标值可省略placeholder占位符/水印，用于输入提示，比较常用文本输入类checked选中状态单选、多选值可省略min/max最大/小值，数字、日期值的边界数字、日期大小边界验证pattern ， IE10模式（正则表达式），用于值的合法性检测文本输入类正则验证required必填， hidden、image 或者按钮类型无效值可省略，必填验证multiple是否允许多个值，逗号隔开email、file布尔值，值可省略step步长，数字、日期数字、日期list候选值：输入框的候选值列表， <datalist>值，显示value大多数autocomplete自动填充，设置浏览器的自动填充模式大多数autofocus页面加载时自动聚焦布尔值，值可省略inputmode值输入模式，虚拟键盘， text, tel, url, email, numeric文本输入类form所属form ，值为其idformaction表单提交属性，还有formenctype、formmethod、formnovalidate、formtargetimage、submit