HTML 5 <input> 标签
定义和用法
<input> 标签规定用户可输入数据的输入字段。
根据不同的 type 属性，输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等。
实例
带有两个输入字段和一个提交按钮的简单的 HTML 表单：
<form action="form_action.asp" method="get">
First name: <input type="text" name="fname" />
Last name: <input type="text" name="lname" />
<input type="submit" value="提交" /> </form>HTML 4.01 与 HTML 5 之间的差异
在 HTML 4.01 中，"align" 属性已被废弃，HTML5 不支持该属性。请使用 CSS 对 input 元素进行对齐操作。
HTML5 中的 <input> 标题拥有许多新的属性。
HTML5 中的 type 属性拥有许多新的值。
提示和注释
注释：input 元素是空的，它只包含属性。
提示：请使用 label 元素为表单控件定义标签（label）。
属性
new : HTML5 中的新属性。
| 属性 | 值 | 描述 |
|---|---|---|
| accept | list_of_mime_types | 规定可通过文件上传控件提交的文件类型。 （仅适用于 type="file"） |
| alt | text | 规定图像输入控件的替代文本。 （仅适用于 type="image"） |
| autocomplete |
|
规定是否使用输入字段的自动完成功能。 |
| autofocus | autofocus | 规定输入字段在页面加载时是否获得焦点。 （不适用于 type="hidden"） |
| checked | checked | 规定当页面加载时是否预先选择该 input 元素。 （适用于 type="checkbox" 或 type="radio"） |
| disabled | disabled | 规定当页面加载时是否禁用该 input 元素。 （不适用于 type="hidden"） |
| form | formname | 规定输入字段所属的一个或多个表单。 |
| formaction | URL | 覆盖表单的 action 属性。 （适用于 type="submit" 和 type="image"） |
| formenctype | 见注释 | 覆盖表单的 enctype 属性。 （适用于 type="submit" 和 type="image"） |
| formmethod |
|
覆盖表单的 method 属性。 （适用于 type="submit" 和 type="image"） |
| formnovalidate | formnovalidate | 覆盖表单的 novalidate 属性。 如果使用该属性，则提交表单时不进行验证。 |
| formtarget |
|
覆盖表单的 target 属性。 （适用于 type="submit" 和 type="image"） |
| height |
|
定义 input 字段的高度。（适用于 type="image"） |
| list | datalist-id | 引用包含输入字段的预定义选项的 datalist 。 |
| max |
|
规定输入字段的最大值。 请与 "min" 属性配合使用，来创建合法值的范围。 |
| maxlength | number | 规定文本字段中允许的最大字符数。 |
| min |
|
规定输入字段的最小值。 请与 "max" 属性配合使用，来创建合法值的范围。 |
| multiple | multiple | 如果使用该属性，则允许一个以上的值。 |
| name | field_name | 规定 input 元素的名称。 name 属性用于在提交表单时搜集字段的值。 |
| pattern | regexp_pattern | 规定输入字段的值的模式或格式。 例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。 |
| placeholder | text | 规定帮助用户填写输入字段的提示。 |
| readonly | readonly | 指示字段的值无法修改。 |
| required | required | 指示输入字段的值是必需的。 |
| size | number_of_char | 规定输入字段中的可见字符数。 |
| src | URL | 规定图像的 URL。（适用于 type="image"） |
| step | number | 规定输入字的的合法数字间隔。 |
| type |
|
规定 input 元素的类型。 |
| value | value | 对于按钮：规定按钮上的文本 对于图像按钮：传递到脚本的字段的符号结果 对于复选框和单选按钮：定义 input 元素被点击时的结果。 对于隐藏、密码和文本字段：规定元素的默认值。 注释：不能与 type="file" 一同使用。 注释：对于 type="checkbox" 以及 type="radio"，是必需的。 |
| width |
|
定义 input 字段的宽度。（适用于 type="image"） |
全局属性
<input> 标签支持 HTML 5 中的全局属性。
事件属性
<input> 标签支持 HTML 5 中的事件属性。
HTML <input> 标签的 type 属性
实例
下面的表单拥有两个输入字段以及一个提交按钮：
<form action="form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" /> </form>定义和用法
type 属性规定 input 元素的类型。
语法
<input type="value">
属性值
| 值 | 描述 |
|---|---|
| button | 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。 |
| checkbox | 定义复选框。 |
| file | 定义输入字段和 "浏览"按钮，供文件上传。 |
| hidden | 定义隐藏的输入字段。 |
| image | 定义图像形式的提交按钮。 |
| password | 定义密码字段。该字段中的字符被掩码。 |
| radio | 定义单选按钮。 |
| reset | 定义重置按钮。重置按钮会清除表单中的所有数据。 |
| submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。 |
| text | 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。 |
Text
<input type="text" /> 定义用户可输入文本的单行输入字段。
Email: <input type="text" name="email" /> Pin: <input type="text" name="pin" />
Button
<input type="button" /> 定义可点击的按钮，但没有任何行为。button 类型常用于在用户点击按钮时启动 JavaScript 程序。
<input type="button" value="Click me" onclick="msg()" />
Checkbox
<input type="checkbox" /> 定义复选框。复选框允许用户在一定数目的选择中选取一个或多个选项。
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike <input type="checkbox" name="vehicle" value="Car" /> I have a car
File
<input type="file" /> 用于文件上传。
<input type="file" />
Hidden
<input type="hidden" /> 定义隐藏字段。隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值，它们的值也可以由 JavaScript 进行修改。
<input type="hidden" name="country" value="Norway" />
Image
<input type="image" /> 定义图像形式的提交按钮。
必须把 src 属性 和 alt 属性 与 <input type="image"> 结合使用。
<input type="image" src="submit.gif" alt="Submit" />
Password
<input type="password" /> 定义密码字段。密码字段中的字符会被掩码（显示为星号或原点）。
<input type="password" name="pwd" />
Radio
<input type="radio" /> 定义单选按钮。单选按钮允许用户选取给定数目的选择中的一个选项。
<input type="radio" name="sex" value="male" /> Male <input type="radio" name="sex" value="female" /> Female
Reset Button
<input type="reset" /> 定义重置按钮。重置按钮会清除表单中的所有数据。
<input type="reset" />
Submit
<input type="submit" /> 定义提交按钮。提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。
<form action="form_action.asp" method="get"> Email: <input type="text" name="email" /> <input type="submit" /> </form>
Comments | NOTHING