Warning:
This wiki has been archived and is now read-only.
HTML5/the-input-element
input元素
- 分类：
- 流式内容
段落式内容
如果type属性不为隐藏状态：交互式内容
如果type属性不为隐藏状态：被列、可标、可提交及可重设的表单相关元素
如果type属性为隐藏状态：被列、可提交及可重设的表单相关元素
- 使用场景：
- 需要段落式内容处
- 内容模型：
- 空。
- 允许的属性：
- 全局属性
acceptaltautocompleteautofocuscheckeddirnamedisabledformformactionformenctypeformmethodformnovalidateformtargetheightlistmaxmaxlengthminmultiplenamepatternplaceholderreadonlyrequiredsizesrcsteptypevaluewidth - DOM接口：
- interface HTMLInputElement : HTMLElement { attribute DOMString accept; attribute DOMString alt; attribute DOMString autocomplete; attribute boolean autofocus; attribute boolean defaultChecked; attribute boolean checked; attribute DOMString dirName; attribute boolean disabled; readonly attribute HTMLFormElement form; readonly attribute FileList files; attribute DOMString formAction; attribute DOMString formEnctype; attribute DOMString formMethod; attribute boolean formNoValidate; attribute DOMString formTarget; attribute DOMString height; attribute boolean indeterminate; readonly attribute HTMLElement list; attribute DOMString max; attribute long maxLength; attribute DOMString min; attribute boolean multiple; attribute DOMString name; attribute DOMString pattern; attribute DOMString placeholder; attribute boolean readOnly; attribute boolean required; attribute unsigned long size; attribute DOMString src; attribute DOMString step; attribute DOMString type; attribute DOMString defaultValue; attribute DOMString value; attribute Date valueAsDate; attribute double valueAsNumber; readonly attribute HTMLOptionElement selectedOption; attribute DOMString width; void stepUp(in optional long n); void stepDown(in optional long n); readonly attribute boolean willValidate; readonly attribute ValidityState validity; readonly attribute DOMString validationMessage; boolean checkValidity(); void setCustomValidity(in DOMString error); readonly attribute NodeList labels; void select(); attribute unsigned long selectionStart; attribute unsigned long selectionEnd; attribute DOMString selectionDirection; void setSelectionRange(in unsigned long start, in unsigned long end, in optional DOMString direction); };
input元素表示一类数据字段，通常包括一个表单控件以便用户编辑数据。
type属性控制元素的数据类型（以及相关的控件）。该属性是一个枚举属性。下表中列出了该属性的关键字及状态——在表格的左侧第一列的关键字映射同一行内的第二列的单元格中的状态。
| 关键字 | 状态 | 数据类型 | 控件类型 |
|---|---|---|---|
| hidden | 隐藏 | 一个任意字符串 | n/a |
| text | 文本 | 不包含换行符的文本 | 文本字段 |
| search | 搜索 | 不包含换行符的文本 | 搜索字段 |
| tel | 电话号码 | 不包含换行符的文本 | 一个文本字段 |
| url | URL | 一个绝对IRI | 一个文本字段 |
| 电子邮件 | 一个电子邮件地址或一个电子邮件地址的列表 | 一个文本字段 | |
| password | 密码 | 不包含换行符的文本（敏感信息） | 隐藏输入的数据的文本字段 |
| datetime | 日期和时间 | 一个日期和时间（年、月、日、小时、分钟、秒、秒的小数），且时区被设为UTC | 一个日期和时间控件 |
| date | 隐藏 | 一个日期（年、月、日），且没有时区 | 一个日期控件 |
| month | 月份 | 一个由年份和月份组成的日期，且没有时区 | 一个月份控件 |
| week | 周 | 一个由周-年数（week-year number）和周数组成的日期，且没有时区 | 一个周控件 |
| time | 时间 | 一个时间（小时、分钟、秒、秒的小数），且没有时区 | 一个时间控件 |
| datetime-local | 本地日期和时间 | 一个日期和时间（年、月、日、小时、分钟、秒、秒的小数），且没有时区 | 一个日期和时间控件 |
| number | 数字 | 一个数值 | 一个文本字段或微调控件 |
| range | 范围 | 一个数组，其额外的语义是确切的值并不重要 | 一个滑块控件或类似的控件 |
| color | 颜色 | 一个由8比特红、绿、蓝组建组成的sRGB颜色 | 一个取色器 |
| checkbox | 复选框 | 一组预设列表中的零或多个值 | 一个复选框 |
| radio | 单选按钮 | 一个枚举值 | 一个单选按钮 |
| file | 文件上传 | 零或多个文件，这些文件拥有一个MIME类型及可选的一个文件名 | 一个标签和一个按钮 |
| submit | 提交按钮 | 一个枚举值，其额外的语义是它必须是最后一个选择的值并且启动表单提交 | 一个按钮 |
| image | 图片按钮 | 一个与特定图片的大小相关的坐标，其额外的语义是它必须是最后一个选择的值并且启动表单提交 | 一个可点击的图片或一个按钮 |
| reset | 重置按钮 | n/a | 一个按钮 |
| button | 按钮 | n/a | 一个按钮 |
其缺省默认值为文本状态。
在input元素上应用accept、alt、autocomplete、checked、dirname、formaction、formenctype、formmethod、formnovalidate、formtarget、height、list、max、maxlength、min、multiple、pattern、placeholder、readonly、required、size、src、step及width内容属性，checked、files、valudAsDate、valueAsNumber、list及selectedOption IDL属性，select()方法，selectionStart、selectionEnd及selectionDirection IDL属性，setSelectionRange()方法，stepUp()及stepDown()方法以及input及change事件，由该元素的type属性的状态决定。下表中不规范且概要地描述了在每种状态下可以应用的内容属性、IDL属性、方法和事件：
| 隐藏 | 文本、搜索 | URL、电话号码 | 电子邮件 | 密码 | 日期和事件、日期、月份、周、时间 | 本地日期和时间、数值 | 范围 | 颜色 | 复选框、单选按钮 | 文件上传 | 提交按钮 | 图片按钮 | 重置按钮、按钮 | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 内容属性 | ||||||||||||||
| accept | · | · | · | · | · | · | · | · | · | · | Yes | · | · | · |
| alt | · | · | · | · | · | · | · | · | · | · | · | · | Yes | · |
| autocomplete | · | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | · | · | · | · | · |
| checked | · | · | · | · | · | · | · | · | · | Yes | · | · | · | · |
| dirname | · | Yes | · | · | · | · | · | · | · | · | · | · | · | · |
| formaction | · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
| formenctype | · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
| formmethod | · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
| formnovalidate | · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
| formtarget | · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
| height | · | · | · | · | · | · | · | · | · | · | · | · | Yes | · |
| list | · | Yes | Yes | Yes | · | Yes | Yes | Yes | Yes | · | · | · | · | · |
| max | · | · | · | · | · | Yes | Yes | Yes | · | · | · | · | · | · |
| maxlength | · | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · | · | · |
| min | · | · | · | · | · | Yes | Yes | Yes | · | · | · | · | · | · |
| multiple | · | · | · | Yes | · | · | · | · | · | · | Yes | · | · | · |
| pattern | · | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · | · | · |
| placeholder | · | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · | · | · |
| readonly | · | Yes | Yes | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · |
| required | · | Yes | Yes | Yes | Yes | Yes | Yes | · | · | Yes | Yes | · | · | · |
| size | · | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · | · | · |
| src | · | · | · | · | · | · | · | · | · | · | · | · | Yes | · |
| step | · | · | · | · | · | Yes | Yes | Yes | · | · | · | · | · | · |
| width | · | · | · | · | · | · | · | · | · | · | · | · | Yes | · |
| IDL属性和方法 | ||||||||||||||
| checked | · | · | · | · | · | · | · | · | · | Yes | · | · | · | · |
| files | · | · | · | · | · | · | · | · | · | · | Yes | · | · | · |
| value | default | value | value | value | value | value | value | value | value | default/on | filename | default | default | default |
| valueAsDate | · | · | · | · | · | Yes | · | · | · | · | · | · | · | · |
| valueAsNumber | · | · | · | · | · | Yes | Yes | Yes | · | · | · | · | · | · |
| list | · | Yes | Yes | Yes | · | Yes | Yes | Yes | Yes | · | · | · | · | · |
| selectedOption | · | Yes | Yes | Yes† | · | Yes | Yes | Yes | Yes | · | · | · | · | · |
| select() | · | Yes | Yes | · | Yes | · | · | · | · | · | · | · | · | · |
| selectionStart | · | Yes | Yes | · | Yes | · | · | · | · | · | · | · | · | · |
| selectionEnd | · | Yes | Yes | · | Yes | · | · | · | · | · | · | · | · | · |
| selectionDirection | · | Yes | Yes | · | Yes | · | · | · | · | · | · | · | · | · |
| setSelectionRange() | · | Yes | Yes | · | Yes | · | · | · | · | · | · | · | · | · |
| stepDown() | · | · | · | · | · | Yes | Yes | Yes | · | · | · | · | · | · |
| stepUp() | · | · | · | · | · | Yes | Yes | Yes | · | · | · | · | · | · |
| 事件 | ||||||||||||||
| input事件 | · | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | · | · | · | · | · |
| change事件 | · | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | · | · | · |
某些type属性的状态定义一个值处理算法。
每个input元素拥有一个值，其通过value IDL属性暴露。某些状态定义一个将字符串转换为数字的算法、一个将数字转换为字符串的算法、一个将字符串转换为日期对象的算法和一个将日期对象转换为字符串的算法，这些算法用于max、min、step、valueAsDate、valueAsNumber、stepDown()及stepUp()。
每个input元素拥有一个布尔型的脏值标记。该脏值标记必须在元素被创建时初始化为假，并且在用户通过修改值与控件交互时设为真。
value内容属性给出input元素的默认值。当添加、设置或删除value内容属性时，如果控件的脏值标记为假，如果元素拥有value内容属性，则用户代理必须设置元素的值为value内容属性的值，否则设为空字符串，并且如果当前定义了值处理算法则在之后执行该算法。
每个input元素拥有一个checkedness，其通过checked IDL属性暴露。
每个input元素拥有一个布尔型的脏选中状态标记。当该标记为真时，该元素被称为拥有一个脏选中状态。该脏选中状态标记必须在元素被创建时初始化为假，并且在用户通过修改选中状态与控件交互时设为真。
checked内容属性是一个布尔型属性，该属性给出了input元素的默认选中状态。当添加checked内容属性时，如果控件没有脏选中状态，则用户代理必须将元素的选择状态设为真；当删除checked内容属性时，如果控件没有脏选中状态，则用户代理必须将元素的选择状态设为假。
input元素的重置算法将脏值标记与脏选中状态标记设回假状态，并且如果该元素拥有value内容属性则设该元素的值为value内容属性的值否则设为空字符串，并且如果该元素拥有checked内容属性则设该元素的选中状态为真否则设为假，清空选中文件列表，并且如果type属性的当前状态定义了一个值处理算法则调用该算法。
每个input元素为可变或不可变之一。除非特殊标记，一个input元素总是可变的。同样的，除非特殊标记，用户代理不应当允许用户修改元素的值或选中状态。（译：不理解）
如果一个input元素的祖先中没有一个Document节点（例如，其不在文档中），则其不可变。
如果一个input元素被复制，该元素的值、脏值标记、选中状态及脏选中状态标记必须在复制目标被创建是传递至该对象。
如果一个input元素被首次创建，该元素的渲染和行为必须被设为type属性的状态定义的渲染和行为，并且如果type属性的状态定义了一个值处理算法，则必须调用该算法。
如果一个input元素的type属性的状态发送变化，用户代理必须执行下列步骤：
- 如果在元素type属性的原状态中，value IDL属性为value模式，且元素的值不是空字符串，且在元素type属性的新状态中，value IDL属性为default模式或default/on模式，则设元素的value内容属性为该元素的值。
- 否则，如果在元素type属性的原状态中，value IDL属性为value模式之外的任意模式，且在元素type属性的新状态中，value IDL属性为value模式，则如果元素拥有value内容属性设元素的值为该内容属性的值，否则设为空字符串，之后设控件的脏值标记为假。
- 将元素的渲染和行为更新值新状态的渲染和行为。
- 如果元素type属性的新状态定义了一个值处理算法则调用该算法。
form属性用于暴露与input元素相关联的所属表单。name属性表示元素的名称。disabled属性用于标记控件不可交互且不可通过提交表单提供它的值。autofocus属性控制焦点。
indeterminate IDL属性必须在初始化时设为假。在获取该属性时，必须返回它被设置的最后一个值。在设置该属性时，必须设为新值。它除了改变复选框控件的外观之外没有其他效果。
alt、max、min、multiple、pattern、placeholder、required、size、src及step IDL属性必须反映各自同名的内容属性。dirName IDL属性必须反映dirname内容属性。readOnly IDL属性必须反映readonly内容属性。defaultChecked IDL属性必须反映checked内容属性。defaultValue IDL属性必须反映value内容属性。
autocomplete以及type IDL属性必须反映各自的同名内容属性，且限制为仅支持已知的值。maxLength IDL属性必须反映maxlength内容属性，且限制为仅支持非负数值。
willValidate、validity和validationMessage属性以及checkValidity()和setCustomValidity()方法是约束验证API的一部分。labels属性提供元素label的列表。select()、selectionStart()、selectionEnd、selectionDirection和setSelectionRange()方法和属性暴露了元素的文本选择。autofocus、disabled、form和name IDL属性时元素的表单API的一部分。