表单控件 ‹input›

属性

说明

type

要呈现的控件类型。有关各个类型的信息

accept

如果该元素的 type 属性的值是 file，则该属性表明了服务器端可接受的文件类型；否则它将被忽略。该属性的值必须为一个逗号分割的列表，包含了多个唯一的内容类型声明：

• 以 STOP 字符 (U+002E) 开始的文件扩展名。（例如：".jpg,.png,.doc"）
• 一个有效的 MIME 类型，但没有扩展名
• audio/* 表示音频文件
• video/* 表示视频文件
• image/* 表示图片文件

autocomplete

这个属性表示这个控件的值是否可被浏览器自动填充。如果 type 属性的值是 hidden、checkbox、radio、file，或为按钮类型（button、submit、reset、image），则本属性被忽略。可用的值是：

如果 <input> 元素上没有 autocomplete 属性，浏览器可使用包含该 input 元素的表单（<form>）或通过 input 的 form 属性指定的表单的 autocomplete 属性值

autofocus

这个布尔属性允许您指定的表单控件在页面加载时具有焦点（自动获得焦点），除非用户将其覆盖，例如通过键入不同的控件。文档中只有一个表单元素可以具有 autofocus 属性，它是一个布尔值。 如果 type 属性设置为隐藏则不能应用（即您不能自动获得焦点的属性设置为隐藏的控件）。

capture

在 HTML 媒体捕获规范中引入并且仅对文件输入类型有效，捕获属性定义了应该使用哪种媒体（麦克风、视频或相机）来捕获新文件以在支持场景中使用文件上传控制进行上传。查看文件输入类型。

checked

如果该元素的 type 属性的值为 radio 或者 checkbox，则该布尔属性的存在与否表明了该控件是否是默认选择状态

如果存在于复选框类型上，则表示默认情况下选中该复选框（当页面加载时）。它不表示当前是否选中此复选框：如果复选框的状态发生更改，则此内容属性不反映更

注

与其他输入控件不同，复选框和单选按钮值仅在当前选中时才包含在提交的数据中。如果是，则提交被选中控件的名称和值。例如，如果名称为fruit的复选框的值为cherry，并且该复选框被选中，则提交的表单数据将包括fruit=cherry .如果复选框未激活，则根本不会在表单数据中列出。复选框和单选按钮的默认值为 on

dirname

仅对文本和搜索输入类型有效，dirname 属性允许提交元素的方向性。包含时，表单控件将提交两个名称/值对：第一个是名称和值，第二个是 dirname 的值作为名称，其中 ltr 或 rtl 的值由浏览器设置。

disabled

这个布尔属性表示此表单控件不可用。 特别是在禁用的控件中， click 事件 将不会被分发 。 并且，禁用的控件的值在提交表单时也不会被提交。如果 type 属性为 hidden，此属性将被忽略。

form

一个字符串，指定与输入关联的 <form> 元素（即其表单所有者）。此字符串的值（如果存在）必须与同一文档中的 <form> 元素的 id 匹配。如果未指定此属性，则 <input> 元素与最近的包含表单（如果有）相关联。form 属性允许您将输入放置在文档中的任何位置，但将其包含在文档中其他位置的表单中。注意：一个输入只能与一个表单相关联。

formaction

仅对图像和提交输入类型有效。有关详细信息，请参阅提交输入类型。

formenctype

仅对图像和提交输入类型有效。有关详细信息，请参阅提交输入类型。

formmethod

仅对图像和提交输入类型有效。有关详细信息，请参阅提交输入类型。

formnovalidate

仅对图像和提交输入类型有效。有关详细信息，请参阅提交输入类型。

formtarget

仅对图像和提交输入类型有效。有关详细信息，请参阅提交输入类型。

height

如果 type 属性的值是 image，这个属性定义了按钮图片的高度

inputmode

全局值对所有元素都有效，它向浏览器提供关于在编辑此元素或其内容时要使用的虚拟键盘配置类型的提示。值包括无文本、电话、网址、电子邮件、数字、小数和搜索。

list

list 属性的值是位于同一文档中的 <datalist> 元素的 id。 <datalist> 提供了一个预定义值的列表，以向用户建议此输入。列表中与类型不兼容的任何值都不包含在建议的选项中。提供的值是建议，而不是要求：用户可以从此预定义列表中选择或提供不同的值。

max

此项目的最大（数字或日期时间）值，且不得小于其最小值（min 属性值）

maxlength

如果 type 的值是 text、email、search、password、tel 或 url，那么这个属性指明了用户最多可以输入的字符个数（按照 Unicode 编码方式计数）；对于其他类型的输入框，该属性被忽略。它可以大于 size 属性的值。如果不指定这个属性，那么用户可以输入任意多的字符。如果指定为一个负值，那么元素表现出默认行为，即用户可以输入任意多的字符。本属性的约束规则，仅在元素的 value 属性发生变化时才会执行

min

此项目的最小（数字或日期时间）值，且不得大于其最大值（max 属性值）

minlength

对文本、搜索、url、电话、电子邮件和密码有效，它定义了用户可以在输入字段中输入的最小字符数（作为 UTF-16 代码单元）。这必须是小于或等于 maxlength 指定的值的非负整数值。如果未指定 minlength 或指定无效值，则输入没有最小长度。如果输入到字段中的文本长度小于 minlength UTF-16 代码单元，则输入将失败约束验证 (en-US)长，阻止表单提交。有关详细信息，请参阅客户端验证。

multiple

这个 Boolean 属性指明了用户能否输入多个值，仅在 type 属性为 email 或 file 时生效，否则将被忽略。

name

控件的名称，与表单数据一起提交

pattern

检查控件值的正则表达式。pattern 必须匹配整个值，而不仅仅是某些子集。使用 title 属性来描述帮助用户的模式。仅在 type 属性的值为 text、search、tel、url 或 email 时生效，否则将被忽略

placeholder

提示用户输入框的作用。用于提示的占位符文本不能包含回车或换行。仅在 type 属性为 text、search、tel、url 或 email 时生效，否则将被忽略

注

请不要用 placeholder 属性替换 <label> 元素。他们的作用不同: <label> 属性描述表单元素的角色; 也就是说，它展示预期的信息，而 placeholder 属性是提示用户内容的输入格式。某些情况下 placeholder 属性对用户不可见，所以当没有它时也需要保证 form 能被理解

readonly

这个布尔属性用于指明用户无法修改控件的值。如果控件的 type 属性为 hidden、range、color、checkbox、radio、file，此属性将被忽略

required

这个属性指定用户在提交表单之前必须为该元素填充值。当 type 属性是 hidden、image 或者按钮类型（submit、reset、button）时不可使用。 :optional 和 :required CSS 伪元素的样式将可以被该字段应用作外观。

selectionDirection

选择发生的方向。如果在 LTR 语言环境中从左到右或在 RTL 语言环境中从右到左进行选择，则这是“向前”，如果在相反方向进行选择，则为“向后”。如果选择方向未知，则可以为“无”。

size

控件的初始大小。以像素为单位。但当 type 属性为 text 或 password 时，它表示输入的字符的长度。从 HTML5 开始，此属性仅在 type 属性为 text、search、tel、url、email 或 password 时生效，否则将被忽略。此外，它的值必须大于 0。如果未指定大小，则使用默认值 20。HTML5 概述 "用户代理应该确保至少大部分字符是可见的"，但是不同的字符的用不同的字体表示可能会导致宽度不同。在某些浏览器中，一串带有 x 的字符即使定义了到 x 的大小也将显示不完整。

spellcheck

将此属性的值设置为 true 表示元素需要检查其拼写和语法。值为 default 表示该元素将根据默认行为进行操作，可能基于父元素自己的 spellcheck 值。值为 false 表示不应该检查元素

src

如果 type 属性的值是 image，这个属性指定了按钮图片的路径; 否则将被忽视。

step

使用 min 和 max 属性来限制可以设置数字或日期时间值的增量。它可以是任意字符串或是正浮点数。如果此属性未设置为任何，则控件仅接受大于最小步长值的倍数的值

tabindex

元素在当前文档的 Tab 导航顺序中的位置

value

控件的初始值。此属性是可选的，除非 type 属性是 radio 或 checkbox

width

如果 type 属性的值是 image，这个属性定义了按钮图片的宽度

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <label for="name">Name:</label>

    <input type="text" id="name">

    <br>

    <label for="peas">Do you like peas?</label>

    <input type="checkbox" name="peas" id="peas">

</body>

</html>