HTML autocomplete 属性可用于以文本或数字值作为输入的 {{HTMLElement("input")}} 元素 ， {{HTMLElement("textarea")}} 元素，{{HTMLElement("select")}} 元素，和{{HTMLElement("form")}} 元素。 autocomplete 允许 web 开发人员指定，如果有任何权限 {{Glossary("user agent")}} 必须提供填写表单字段值的自动帮助，并为浏览器提供关于字段中所期望的信息类型的指导。
建议值的来源通常取决于浏览器。 通常，值来自用户输入的过去值，但它们也可能来自预先配置的值。 例如，浏览器可能允许用户保存其姓名，地址，电话号码和电子邮件地址，以实现自动完成目的。 也许浏览器提供了保存加密的信用卡信息的功能，以便在身份验证过程后自动完成。
- -如果 {{HTMLElement("input")}}, {{HTMLElement("select")}} 或{{HTMLElement("textarea")}} 元素 没有 autocomplete 属性，t 则该浏览器将使用该元素的表单的 autocomplete 属性所有者，它们可是元素的后代 {{HTMLElement("form")}} 元素 也可以是其 id 由元素{{htmlattrxref("form", "input")}} 属性指定的 <form>。
有关更多信息，请参见 {{HTMLElement("form")}} 中的{{htmlattrxref("autocomplete", "form")}} 属性。
- -为了提供自动完成功能，用户代理可能需要<input>/<select>/<textarea> 元素才能：
name 和/或 id 属性<form> 的后代off"autocomplete 设置为 "off" 不会阻止密码管理器询问用户是否要保存用户名和密码信息，或者自动在网站的登录表单中填写这些值。 请参阅 the autocomplete attribute and login fields.on"name"honorific-prefix"given-name"additional-name"family-name"honorific-suffix"nickname"email"username"new-password"current-password"one-time-code"organization-title"organization"street-address"address-line1", "address-line2", "address-line3"street-address" 的情况下，才应提供这些内容。.address-level4"address-level3"address-level2"address-level1"country"country-name"postal-code"cc-name"cc-given-name"cc-additional-name"cc-family-name"cc-number"cc-exp"cc-exp-month"cc-exp-year"cc-csc"cc-type"transaction-currency"transaction-amount"transaction-currency" 指定的货币表示的金额，用于支付形式。language"bday"bday-day"bday-month"bday-year"sex"tel"完整的电话号码，包括国家/地区代码。 如果您需要将电话号码分为几个部分，则可以将以下值用于这些字段：
- -tel-country-code"tel-national"tel-area-code"tel-local"tel-local-prefix" ，对于"6502"使用 "tel-local-suffix" 。tel-extension"impp"url"photo"有关更多详细信息，请参见 WHATWG 标准。
- -注意： 与其他浏览器不同， autocomplete 属性还控制 Firefox 是否会跨页面加载保持— 是否在整个页面加载期间保持 <input> 元素，<textarea> 元素，或整个 <form> 的动态禁用状态和（如果适用）动态检查状态。 持久性功能默认情况下处于启用状态。 将 autocomplete 属性的值设置为off 将禁用此功能。即使autocomplete 属性通常由于其type而不适用，也可以这样做。 参考 {{bug(654072)}}.
{{EmbedLiveSample("Pattern_validation", 700, 275)}}
+{{EmbedLiveSample("Pattern_validation", 700, 275)}} -Our {{HTMLElement("form")}} contains one {{HTMLElement("input")}} of type "email" for the user's email address, a {{HTMLElement("textarea")}} to enter their message for IT into, and an <input> of type "submit", which creates a button to submit the form. Each text entry box has a {{HTMLElement("label")}} associated with it to let the user know what's expected of them.
Let's take a closer look at the email address entry box. Its {{htmlattrxref("size", "input")}} and {{htmlattrxref("maxlength", "input")}} attributes are both set to 64 in order to show room for 64 characters worth of email address, and to limit the number of characters actually entered to a maximum of 64. The {{htmlattrxref("required", "input")}} attribute is specified, making it mandatory that a valid email address be provided.
+Let's take a closer look at the email address entry box. Its {{htmlattrxref("size", "input")}} and {{htmlattrxref("maxlength", "input")}} attributes are both set to 64 in order to show room for 64 characters worth of email address, and to limit the number of characters actually entered to a maximum of 64. The {{htmlattrxref("required", "input")}} attribute is specified, making it mandatory that a valid email address be provided. -An appropriate {{htmlattrxref("placeholder", "input")}} is provided—"username@beststartupever.com"—to demonstrate what constitutes a valid entry. This string demonstrates both that an email address should be entered, and suggests that it should be a corporate beststartupever.com account. This is in addition to the fact that using type "email" will validate the text to ensure that it's formatted like an email address. If the text in the input box isn't an email address, you'll get an error message that looks something like this:
If we left things at that, we would at least be validating on legitimate email addresses. But we want to go one step farther: we want to make sure that the email address is in fact in the form "username@beststartupever.com". This is where we'll use {{htmlattrxref("pattern", "input")}}. We set pattern to ".+@beststartupever.com". This simple regular expression requests a string that consists of at least one character of any kind, then an "@" followed by the domain name "beststartupever.com".
Note that this is not even close to an adequate filter for valid email addresses; it would allow things such as " @beststartupever.com" (note the leading space) or "@@beststartupever.com", neither of which is valid. However, the browser runs both the standard email address filter and our custom pattern against the specified text. As a result, we wind up with a validation which says "make sure this is a valid email address, and if it is, make sure it's also a beststartupever.com address."
+Note that this is not even close to an adequate filter for valid email addresses; it would allow things such as " @beststartupever.com" (note the leading space) or "@@beststartupever.com", neither of which is valid. However, the browser runs both the standard email address filter _and_ our custom pattern against the specified text. As a result, we wind up with a validation which says "make sure this is a valid email address, and if it is, make sure it's also a beststartupever.com address." -It's advisable to use the {{htmlattrxref("title")}} attribute along with pattern. If you do, the title must describe the pattern. That is, it should explain what format the data should take on, rather than any other information. That's because the title may be displayed or spoken as part of a validation error message. For example, the browser might present the message "The entered text doesn't match the required pattern." followed by your specified title. If your title is something like "Email address", the result would be the message "The entered text doesn't match the required pattern. Email address", which isn't very good.
That's why, instead, we specify the string "Please provide only a Best Startup Ever corporate email address" By doing that, the resulting full error message might be something like "The entered text doesn't match the required pattern. Please provide only a Best Startup Ever corporate email address."
+That's why, instead, we specify the string "Please provide only a Best Startup Ever corporate email address" By doing that, the resulting full error message might be something like "The entered text doesn't match the required pattern. Please provide only a Best Startup Ever corporate email address." -
Note: If you run into trouble while writing your validation regular expressions and they're not working properly, check your browser's console; there may be helpful error messages there to aid you in solving the problem.
-Here we have an email input with the ID "emailAddress" which is allowed to be up to a maximum of 256 characters long. The input box itself is physically 64 characters wide, and displays the text "user@example.gov" as a placeholder anytime the field is empty. In addition, by using the {{htmlattrxref("multiple", "input")}} attribute, the box is configured to allow the user to enter zero or more email addresses, separated by commas, as described in Allowing multiple email addresses. As a final touch, the {{htmlattrxref("list", "input")}} attribute contains the ID of a {{HTMLElement("datalist")}} whose {{HTMLElement("option")}}s specify a set of suggested values the user can choose from.
As an added touch, the {{HTMLElement("label")}} element is used to establish a label for the email entry box, with its {{htmlattrxref("for", "label")}} attribute referencing the "emailAddress" ID of the {{HTMLElement("input")}} element. By associating the two elements in this way, clicking on the label will focus the input element.
<label for="emailAddress">Email</label><br/> -<input id="emailAddress" type="email" placeholder="user@example.gov" - list="defaultEmails" size="64" maxlength="256" multiple> +```html ++ +``` -
+ -<datalist id="defaultEmails"> - <option value="jbond007@mi6.defence.gov.uk"> - <option value="jbourne@unknown.net"> - <option value="nfury@shield.org"> - <option value="tony@starkindustries.com"> - <option value="hulk@grrrrrrrr.arg"> -</datalist>
{{EmbedLiveSample('Examples', 600, 50)}}
+{{EmbedLiveSample('Examples', 600, 50)}} -{{Compat("html.elements.input.input-email")}}
+{{Compat("html.elements.input.input-email")}} -<input type="tel">使用 type="file" 的 {{HTMLElement("input")}} 元素使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上，或者通过 Javascript 的 File API 对文件进行操作。
文件 input 的 {{htmlattrxref("value", "input")}} 属性包括了一个 {{domxref("DOMString")}}，表示已选择文件的路径。如果用户选择了多个文件，则 value 表示他们选择的文件列表中的第一个文件。 可以使用 input 的 HTMLInputElement.files 属性标识其他文件。
""。除了被所有 {{HTMLElement("input")}} 元素共享的公共属性，file 类型的 input 还支持下列属性：
| 属性 | -说明 | -
|---|---|
accept |
- 一个或多个 唯一文件类型说明符 描述允许的文件类型 | -
capture |
- 捕获图像或视频数据的源 | -
files |
- {{domxref("FileList")}} 列出了已选择的文件 | -
multiple |
- 布尔值，如果出现，则表示用户可以选择多个文件 | -
accept 属性是一个字符串，它定义了文件 input 应该接受的文件类型。这个字符串是一个以逗号为分隔的唯一文件类型说明符列表。由于给定的文件类型可以用多种方式指定，因此当你需要给定格式的文件时，提供一组完整的类型指定符是非常有用的。
例如，有许多方法可以识别 Microsoft Word 文件，所以接受 Word 文件的站点可以使用一个<input>：
<input type="file" id="docpicker" - accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">+```html + +``` -
capture 属性是一个字符串，如果 accept 属性指出了 input 是图片或者视频类型，则它指定了使用哪个摄像头去获取这些数据。值 user 表示应该使用前置摄像头和/或麦克风。值 environment 表示应该使用后置摄像头和/或麦克风。如果缺少此属性，则 {{Glossary("user agent")}} 可以自由决定做什么。如果请求的前置模式不可用，则用户代理可能退回到其首选的默认模式。
capture 以前是一个布尔类型的属性，如果存在，则请求使用设备的媒体捕获设备（如：摄像机），而不是请求一个文件输入。{{domxref("FileList")}} 对象每个已选择的文件。如果 {{htmlattrxref("multiple", "input/file")}} 属性没有指定，则这个列表只有一个成员。
+{{domxref("FileList")}} 对象每个已选择的文件。如果 {{htmlattrxref("multiple", "input/file")}} 属性没有指定，则这个列表只有一个成员。 -当指定布尔类型属性 multiple, 文件 input 允许用户选择多个文件。
除了上面列出来的属性，下面的非标准属性在某些浏览器中可用。你应该尽量避免使用它们，因为这样做将限制代码在没有实现它们的浏览器中的运行能力。
+除了上面列出来的属性，下面的非标准属性在某些浏览器中可用。你应该尽量避免使用它们，因为这样做将限制代码在没有实现它们的浏览器中的运行能力。 -| 属性 | -描述 | -
|---|---|
webkitdirectory |
- 一个布尔值，表示是否仅允许用户选择一个目录（或多个目录，如果 multiple 也出现的话） |
-
如果出现布尔属性 webkitdirectory，表示在文件选择器界面中用户只能选择目录。更多细节和示例见 {{domxref("HTMLInputElement.webkitdirectory")}}。
Note: 尽管 webkitdirectory 最初仅为基于 webkit 的浏览器实现，它还在 Microsoft Edge 和 Firefox 50 及其后版本中可用。然而，尽管它有相对广泛的支持，它仍然是非标准的。除非你别无选择，否则不要使用它。
唯一文件类型说明符是一个字符串，表示在 file 类型的 {{HTMLElement("input")}} 元素中用户可以选择的文件类型。每个唯一文件类型说明符可以采用下列形式之一：
.jpg，.pdf 或 .doc。audio/*， 表示 “任何音频文件”。video/*，表示 “任何视频文件”。image/*，表示 “任何图片文件”。accept 属性的值是一个包含一个或多个（用逗号分隔）这种唯一文件类型说明符的字符串。 例如，一个文件选择器需要能被表示成一张图片的内容，包括标准的图片格式和 PDF 文件，大概是这样的：
<input type="file" accept="image/*,.pdf">+```html + +``` -
<form method="post" enctype="multipart/form-data"> - <div> - <label for="file">Choose file to upload</label> - <input type="file" id="file" name="file" multiple> - </div> - <div> - <button>Submit</button> - </div> -</form>+```html + +``` -
div {
+```css hidden
+div {
margin-bottom: 10px;
-}
-产生如下结果：
+产生如下结果： -{{EmbedLiveSample('基本示例', 650, 60)}}
+{{EmbedLiveSample('基本示例', 650, 60)}} - +> **备注：** 你也可以在 GitHub 中找到这个示例 — [源代码](https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html)和[在线运行](https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html)。 -无论用户的设备或操作系统是什么，文件输入都提供一个按钮，打开一个允许用户选择文件的文件选择对话框。
+无论用户的设备或操作系统是什么，文件输入都提供一个按钮，打开一个允许用户选择文件的文件选择对话框。 -包含上述的 {{htmlattrxref("multiple", "input/file")}} 属性，指定可以一次选择多个文件。 用户可以用他们选择的平台允许的任何方式从文件选择器中选择多个文件（如，按住 Shift or Control，然后单击）。如果您只想让用户为每个 <input> 选择一个文件，那么省略 multiple 属性。
被选择的文件以 HTMLInputElement.files 属性返回，它是一个包含一列 {{domxref("File")}} 对象的 {{domxref("FileList")}} 对象。FileList 的行为像一个数组，所以你可以检查 length 属性来获得已选择文件的数量。
每个 File 包含下列信息：
namelastModifiedlastModifiedDate {{deprecated_inline}}lastModified 作为替代。sizetypewebkitRelativePath {{non-standard_inline}}file 选择器）。 这是非标准的，应该谨慎使用。Note: 你可以在所有现代浏览器中读写 HTMLInputElement.files 的值；最近这被添加到 Firefox 57 中（见 {{bug(1384030)}}）。
通常，你不希望用户能够选择任意类型的文件；相反，你通常希望它们选择特定类型的文件。例如，如果你的文件输入让用户上传个人资料图片，您可能希望他们选择 Web 兼容的图像格式，如 {{Glossary("JPEG")}} 或 {{Glossary("PNG")}}。
+通常，你不希望用户能够选择任意类型的文件；相反，你通常希望它们选择特定类型的文件。例如，如果你的文件输入让用户上传个人资料图片，您可能希望他们选择 Web 兼容的图像格式，如 {{Glossary("JPEG")}} 或 {{Glossary("PNG")}}。 -可以用 {{htmlattrxref("accept","input/file")}} 属性指定可接受的文件类型，它是一个以逗号间隔的文件扩展名和 MIME 类型列表。一些例子：
+可以用 {{htmlattrxref("accept","input/file")}} 属性指定可接受的文件类型，它是一个以逗号间隔的文件扩展名和 MIME 类型列表。一些例子： -accept="image/png" 或 accept=".png" — 接受 PNG 文件。accept="image/png, image/jpeg" 或 accept=".png, .jpg, .jpeg" — 接受 PNG 或 JPEG 文件。accept="image/*" — 接受带有一个 image/* MIME 类型的任何文件。（许多移动设备也允许用户在使用它时用摄像头拍照。）accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — 接受 MS Word 文档之类的任何文件。让我们来看一个更完整的例子：
+让我们来看一个更完整的例子： -<form method="post" enctype="multipart/form-data"> - <div> - <label for="profile_pic">Choose file to upload</label> - <input type="file" id="profile_pic" name="profile_pic" - accept=".jpg, .jpeg, .png"> - </div> - <div> - <button>Submit</button> - </div> -</form>+```html + +``` -
div {
+```css hidden
+div {
margin-bottom: 10px;
-}
-上述代码产生和之前示例相似的结果：
+上述代码产生和之前示例相似的结果： -{{EmbedLiveSample('限制可接受的文件类型', 650, 60)}}
+{{EmbedLiveSample('限制可接受的文件类型', 650, 60)}} - +> **备注：** 你也可以在 GitHub 中找到这个示例 — [源代码](https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-with-accept.html)和[在线运行](https://mdn.github.io/learning-area/html/forms/file-examples/file-with-accept.html)。 -这可能看起来很相似，但是如果你尝试用该输入选择一个文件，你将看到文件选择器只允许你选择 accept 值指定的文件类型（实际特性会按不同的浏览器和操作系统有所不同）。
accept 属性不验证所选文件的类型；它只是为浏览器提供提示来引导用户选择正确的文件类型。用户仍然可以（在大多数情况下）在文件选择器中切换一个选项，使其能够覆盖此选项并选择他们希望的任何文件，然后选择不正确的文件类型。
因此，您应该确保 accept 属性得到适当的服务器端验证的支持。
你不能从脚本中设置文件选取器的值 — You cannot set the value of a file picker from a script — 做下面这样的事情是没有效果的：
+1. 你不能从脚本中设置文件选取器的值 — You cannot set the value of a file picker from a script — 做下面这样的事情是没有效果的： -const input = document.querySelector("input[type=file]");
-input.value = "foo";
-
- 当使用一个 <input type="file"> 选择一个文件，When a file is chosen using an <input type="file">，出于明显的安全原因，源文件的实际路径没有显示在 input 的 value 属性中。相反，显示了文件名，并用 C:\fakepath\ 附加在路径的开头。这种怪癖有一些历史原因，但它在所有现代浏览器中都受到支持，而且实际上在规范中也有定义。
在本例中，我们将展示一个稍微高级一点的文件选择器，它利用了在 HTMLInputElement.files 属性中可用的文件信息，并且展示了一些聪明的技巧。
Note: 你可以在 GitHub 中查看本示例的完整源代码 — file-example.html （在线运行）。我们不会解释 CSS；JavaScript 是主要的关注点。
-首先，让我们看看 HTML：
+> **备注：** 你可以在 GitHub 中查看本示例的完整源代码 — [file-example.html](https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html) （[在线运行](https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html)）。我们不会解释 CSS；JavaScript 是主要的关注点。 -<form method="post" enctype="multipart/form-data"> - <div> - <label for="image_uploads">Choose images to upload (PNG, JPG)</label> - <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple> - </div> - <div class="preview"> - <p>No files currently selected for upload</p> - </div> - <div> - <button>Submit</button> - </div> -</form>+首先，让我们看看 HTML： -
html {
+```html
+
+```
+
+```css hidden
+html {
font-family: sans-serif;
}
@@ -333,7 +287,7 @@ form ol {
padding-left: 0;
}
-form li, div > p {
+form li, div > p {
background: #eee;
display: flex;
justify-content: space-between;
@@ -369,46 +323,46 @@ form label:hover, form button:hover {
form label:active, form button:active {
background-color: #0D3F8F;
color: white;
-}
-这和我们之前看到的类似 — 没有什么要说明的。
+这和我们之前看到的类似 — 没有什么要说明的。 -接下来，让我们看一下 JavaScript。
+接下来，让我们看一下 JavaScript。 -在脚本的第一行，我们获得了对表单 input 本身和拥有 .preview 类的 {{htmlelement("div")}} 元素的引用。然后，我们隐藏了 {{htmlelement("input")}} 元素 — 我们这样做是因为文件输入往往很难看，难于设计样式，而且在跨浏览器中对它们的设计不一致。你可以通过单击 input 元素来激活它，因此，最好在视觉上隐藏 input 并将 label 设计成按钮的样式，这样用户如果想上传文件就会知道如何与之交互。
const input = document.querySelector('input');
+```js
+const input = document.querySelector('input');
const preview = document.querySelector('.preview');
-input.style.opacity = 0;
+input.style.opacity = 0;
+```
+
+> **备注：** 使用{{cssxref("opacity")}} 来隐藏文件输入，而不是使用 {{cssxref("visibility", "visibility: hidden")}} 或者 {{cssxref("display", "display: none")}}，因为辅助技术将后两种样式解释为文件 input 是不可交互的。
+
+接下来，我们将[事件监听器](/zh-CN/docs/Web/API/EventTarget/addEventListener)添加到 input 中，以监听选择的值的更改（在本例中，当选择文件时）。事件监听器调用我们定制的 `updateImageDisplay()` 函数。
-Note: 使用{{cssxref("opacity")}} 来隐藏文件输入，而不是使用 {{cssxref("visibility", "visibility: hidden")}} 或者 {{cssxref("display", "display: none")}}，因为辅助技术将后两种样式解释为文件 input 是不可交互的。
-接下来，我们将事件监听器添加到 input 中，以监听选择的值的更改（在本例中，当选择文件时）。事件监听器调用我们定制的 updateImageDisplay() 函数。
input.addEventListener('change', updateImageDisplay);
+- 使用一个 {{jsxref("Statements/while", "while")}} 循环来清空 preview `每当 updateImageDisplay() 函数被调用时，我们：
<div> 留下的内容。curFiles 保存。curFiles.length 是否等于 0 来检查是否没有文件被选择。如果是，则用 preview <div> 输出一条消息，来表示没有选择文件。<div>。注意事项：validFileType() 函数来检查文件的类型是否正确。（例如，用 accept 属性指定的图片类型）。<div> 的一个列表项中（从 file.name 和 file.size获取）。定制的 returnFileSize() 函数返回一个用 bytes/KB/MB 表示的格式良好的大小（默认情况下，浏览器以绝对字节数报告大小）。function updateImageDisplay() {
+```js
+function updateImageDisplay() {
while(preview.firstChild) {
preview.removeChild(preview.firstChild);
}
@@ -440,11 +394,13 @@ input.style.opacity = 0;
list.appendChild(listItem);
}
}
-}
+}
+```
-定制的 validFileType() 函数接受一个 {{domxref("File")}} 对象作为参数，然后使用 {{jsxref("Array.prototype.includes()")}} 检查 fileTypes 中是否有值和文件的 type 属性匹配。如果找到匹配项，函数返回 true。如果没找到，返回 false。
const fileTypes = [ +```js +const fileTypes = [ 'image/jpeg', 'image/pjpeg', 'image/png' @@ -452,35 +408,36 @@ input.style.opacity = 0;function validFileType(file) { return fileTypes.includes(file.type); -} +} +``` -
returnFileSize() 函数接受一个数字（字节数，取自当前文件的 size 属性）作为参数，并且将其转化为用 bytes/KB/MB 表示的格式良好的大小。
function returnFileSize(number) {
- if(number < 1024) {
+```js
+function returnFileSize(number) {
+ if(number < 1024) {
return number + 'bytes';
- } else if(number >= 1024 && number < 1048576) {
+ } else if(number >= 1024 && number < 1048576) {
return (number/1024).toFixed(1) + 'KB';
- } else if(number >= 1048576) {
+ } else if(number >= 1048576) {
return (number/1048576).toFixed(1) + 'MB';
}
-}
+}
+```
-这个例子是这样的；演示一下：
+这个例子是这样的；演示一下： -{{EmbedLiveSample('示例', '100%', 200)}}
+{{EmbedLiveSample('示例', '100%', 200)}} -{{Compat}}
+{{Compat}} -<input type="file"> 和 File API 的有用示例。"hidden" 类型的 {{HTMLElement("input")}} 元素允许 Web 开发者存放一些用户不可见、不可改的数据，在用户提交表单时，这些数据会一并发送出。比如，正被请求或编辑的内容的 ID，或是一个唯一的安全令牌。这些隐藏的 <input>元素在渲染完成的页面中完全不可见，而且没有方法可以使它重新变为可见。
注意：本警告框下面的代码下，就有一个 <input type="hidden"> 的 live example 可交互示例——如果它正常运作的话，你应当什么也看不到！
<input id="prodId" name="prodId" type="hidden" value="xm234jq">+```html + +``` -
{{ EmbedLiveSample('Basic_example', 600, 40) }}
-注意：{{HTMLElement("input")}}和change事件不适用于此输入类型。隐藏的输入无法获得焦点， 即使使用 JavaScript 例如 (e.g. hiddenInput.focus())
{{HTMLElement("input")}}元素的{{htmlattrxref("value", "input")}}属性有{{domxref("DOMString")}}，其中包含您想提交到服务器的隐藏数据尽管您可以通过浏览器开发人员工具编辑该值，但明确的是，用户不能通过用户界面对其编辑或看到。
重要提示：尽管该值未在页面内容中显示给用户，但可以使用任何浏览器的开发人员工具或 “查看源代码” 功能来查看并进行编辑。 请不要依赖 hidden 输入作为安全表单。
除所有 {{HTMLElement("input")}}元素所共有的属性之外，带有 hidden 属性的 {{HTMLElement("input")}}提供以下额外属性：
| 属性 | -描述 | -
|---|---|
name |
- 与所有输入类型一样，这可以是提交表单时反馈给服务器的 {{HTMLElement("input")}} 的名称；使用特殊属性值 _charset_ 则会使当前隐藏 {{HTMLElement("input")}} 的值被反馈为表单内容的字符编码 |
-
这实际上是常见属性之一，但它对于隐藏的 {{HTMLElement("input")}} 具有一个特殊含义。一般来说，{{htmlattrxref("name", "input")}} 的属性在隐藏 {{HTMLElement("input")}} 上的作用和任何其他 {{HTMLElement("input")}} 上的一样；但是，在提交表单时， name 属性被设置为 _charset_ 的隐藏 {{HTMLElement("input")}}，其值会被自动设置为被提交表单的字符编码。
<input>如上所述，隐藏的 {{HTMLElement("input")}} 可以用于任何有需要提交给服务器的、用户无法查看或编辑的数据的地方。让我们看一些说明其用法的例子吧。
隐藏输入的最常见用途之一是当被编辑的表单提交时，保持跟踪数据库数据的更新。
- 典型的工作流程如下所示：
在这里的步骤 2 思路中，要被更新的 ID 记录保留在隐藏的输入中。 在步骤 3 中提交表单后，该 ID 随记录内容自动发送回服务器。 该 ID 使站点的服务器端组件确切知道哪些记录需要被提交的数据更新的。
+在这里的步骤 2 思路中，要被更新的 ID 记录保留在隐藏的输入中。 在步骤 3 中提交表单后，该 ID 随记录内容自动发送回服务器。 该 ID 使站点的服务器端组件确切知道哪些记录需要被提交的数据更新的。 - +您可以在下面的 [](/zh-CN/docs/Web/HTML/Element/input/hidden#例子)[例子](#例子) 部分中看到完整的[示例](/zh-CN/docs/Web/HTML/Element/input/hidden#例子)。 -隐藏输入表单还用于存储和提交安全令牌或机密信息，以提高网站的安全性。基本思路是，如果用户填写敏感表格，例如在其银行网站上将某笔款项转入另一个帐户的表格，他们将被提供的密钥和证明他们就是他们所说的真实身份，并且他们使用正确的表单来提交转移请求。
+隐藏输入表单还用于存储和提交安全令牌或机密信息，以提高网站的安全性。基本思路是，如果用户填写敏感表格，例如在其银行网站上将某笔款项转入另一个帐户的表格，他们将被提供的密钥和证明他们就是他们所说的真实身份，并且他们使用正确的表单来提交转移请求。 -这将阻止恶意用户创建伪造的表单，伪装成银行，然后通过电子邮件将表单发送给毫无戒备心的用户，以诱骗他们将钱转入错误的位置。 这种攻击称为跨站点请求伪造（CSRF）；几乎任何信誉良好的服务器端框架都使用隐藏机密来防止此类攻击。
+这将阻止恶意用户创建伪造的表单，伪装成银行，然后通过电子邮件将表单发送给毫无戒备心的用户，以诱骗他们将钱转入错误的位置。 这种攻击称为[跨站点请求伪造（CSRF）]()；几乎任何信誉良好的服务器端框架都使用隐藏机密来防止此类攻击。 -如前所述，将密钥放置在隐藏的输入中并不能使其固有安全性。 密钥的组成和编码已经可以做到这一点。隐藏输入的值是保持它与数据关联性，并在将表单发送到服务器时自动将其包含在内。 您需要使用精心设计的密钥来真正保护您的网站。
-隐藏的 {{HTMLElement("input")}} 不参与约束验证；他们没有可受到约束的属性值。
让我们看一下如何使用隐藏输入保存正在被编辑的记录的 ID，实现我们先前描述的编辑表单的简单版本（请参阅 跟踪被编辑的内容）。
编辑表单的 HTML 可能看起来像这样：
+编辑表单的 HTML 可能看起来像这样： -<form> - <div> - <label for="title">Post title:</label> - <input type="text" id="title" name="title" value="My excellent blog post"> - </div> - <div> - <label for="content">Post content:</label> - <textarea id="content" name="content" cols="60" rows="5"> +```html ++``` + +我们还添加一些简单的 CSS： + +```css +html { font-family: sans-serif; } @@ -171,35 +153,32 @@ input, textarea { textarea { height: 60px; -} +} +``` -
在将表单发送给用户的浏览器之前，服务器会将 ID "postID"的隐藏输入的值设置为其数据库中发送的 ID，并在返回表单时使用该信息来知道要向哪个数据库记录更新改变后的信息。 内容中无需脚本即可处理。
输出看起来像这样：
+输出看起来像这样： -{{ EmbedLiveSample('Examples', '100%', 200) }}
+{{ EmbedLiveSample('Examples', '100%', 200) }} - +> **备注：** 您还可以在 GitHub 上找到示例（请参见[源代码](https://github.com/mdn/learning-area/blob/master/html/forms/hidden-input-example/index.html)，并可以[实时运行](https://mdn.github.io/learning-area/html/forms/hidden-input-example/index.html)）。 -提交后，发送到服务器的表单数据将如下所示：
+提交后，发送到服务器的表单数据将如下所示： -title=My+excellent+blog+post&content=This+is+the+content+of+my+excellent+blog+post.+I+hope+you+enjoy+it!&postId=34657
即使根本看不到隐藏的 {{HTMLElement("input")}}，它所包含的数据仍然会被提交给服务器。
{{Compat}}
+{{Compat}} -<input type="image"> 标签是一个图片提交按钮。 你必须使用 src 属性来定义图片的源，并且使用alt来定义当图片无法显示的时候的替代文字。 height 和width属性是用来定义图片的高和宽的。
| Permitted parent elements | -Any element that accepts phrasing content. | +Any element that accepts phrasing content. |
|---|---|---|
| DOM interface | @@ -27,74 +28,62 @@ translation_of: Web/HTML/Element/input/image
This element includes the global attributes.
- -{{htmlattrdef("type")}}
- -application/x-www-form-urlencoded: The default value if the attribute is not specified.multipart/form-data: Use this value if you are using an {{HTMLElement("input")}} element with the {{htmlattrxref("type","input")}} attribute set to file.text/plainIf this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.
-post: The data from the form is included in the body of the form and is sent to the server.get: The data from the form is appended to the form attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.
-self: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified._blank: Load the response into a new unnamed browsing context._parent: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self._top: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.image type (submit, reset, or button). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate.<input type="image" name="image" src="/files/2917/fxlogo.png" width="50">- -
{{ EmbedLiveSample('simple_input_image_example') }}
- -{{Compat}}
+{{Compat}} diff --git a/files/zh-cn/web/html/element/input/index.md b/files/zh-cn/web/html/element/input/index.md index 7f6e045efdbe07..4c724d59f2edd6 100644 --- a/files/zh-cn/web/html/element/input/index.md +++ b/files/zh-cn/web/html/element/input/index.md @@ -12,1112 +12,861 @@ tags: - Web translation_of: Web/HTML/Element/input --- -{{HTMLRef}}
+{{HTMLRef}} -HTML <input> 元素用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据; 可以使用各种类型的输入数据和控件小部件，具体取决于设备和{{Glossary("user agent", "用户代理")}}。
{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}
+{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}| 内容分类 | -流式元素；短语元素；交互元素（若 type 属性不处于隐藏 hidden状态）；表单相关内容、可列举的元素、可标签的元素、可提交的元素、可重置的元素。 |
-
|---|---|
| 允许的内容 | -无，这是一个{{Glossary("empty element","空元素")}}。 | -
| 标签省略 | -
- 必须有开始标签但不必有结束标签。 - |
-
| 允许的祖先元素 | -任何元素都可以包含语句型元素。 | -
| 允许的无障碍网络应用 | -
-
|
-
| DOM 接口 | -{{domxref("HTMLInputElement")}} | -
| + 内容分类 + | +
+ 流式元素；短语元素；交互元素（若 type 属性不处于隐藏
+ hidden状态）；表单相关内容、可列举的元素、可标签的元素、可提交的元素、可重置的元素。
+ |
+
| 允许的内容 | ++ 无，这是一个{{Glossary("empty element","空元素")}}。 + | +
| 标签省略 | +必须有开始标签但不必有结束标签。 |
+
| 允许的祖先元素 | +任何元素都可以包含语句型元素。 | +
| 允许的无障碍网络应用 | +
+
|
+
| DOM 接口 | +{{domxref("HTMLInputElement")}} | +
<input> types<input> 的工作方式相当程度上取决于 {{htmlattrxref("type", "input")}} 属性的值，不同的 type 值会在各自的参考页中进行介绍。如果未指定此属性，则采用的默认类型为 text。
可用的值包括：
+可用的值包括：| Type | -描述 | -基础例子 | -
|---|---|---|
| {{HTMLElement("input/button", "button")}} | -没有默认行为的按钮，上面显示 value 属性的值，默认为空。 | -- - {{EmbedLiveSample("examplebutton",200,55,"","", "nobutton")}} - | -
| {{HTMLElement("input/checkbox", "checkbox")}} | -复选框，可设为选中或未选中。 | -- - {{EmbedLiveSample("examplecheckbox",200,55,"","", "nobutton")}} - | -
| {{HTMLElement("input/color", "color")}} | -用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器。 | -- - {{EmbedLiveSample("examplecolor",200,55,"","", "nobutton")}} - | -
| {{HTMLElement("input/date", "date")}} | -输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。 | -- - {{EmbedLiveSample("exampledate",200,55,"","", "nobutton")}} - | -
| {{HTMLElement("input/datetime-local", "datetime-local")}} | -输入日期和时间的控件，不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。 | -- - {{EmbedLiveSample("exampledtl",200,55,"","", "nobutton")}} - | -
| {{HTMLElement("input/email", "email")}} | -编辑邮箱地址的区域。类似 text 输入，但在支持的浏览器和带有动态键盘的设备上会有确认参数和相应的键盘。 |
- - - {{EmbedLiveSample("exampleemail",200,55,"","", "nobutton")}} - | -
| {{HTMLElement("input/file", "file")}} | -让用户选择文件的控件。使用 accept 属性规定控件能选择的文件类型。 | -- - {{EmbedLiveSample("examplefile",'100%',55,"","", "nobutton")}} - | -
| {{HTMLElement("input/hidden", "hidden")}} | -不显示的控件，其值仍会提交到服务器。举个例子，右边就是一个隐形的控件。 | -- |
| {{HTMLElement("input/image", "image")}} | -带图像的 submit 按钮。显示的图像由 src 属性规定。如果 src 缺失，alt 属性就会显示。 |
- - - {{EmbedLiveSample("exampleimage",200,55,"","", "nobutton")}} - | -
| {{HTMLElement("input/month", "month")}} | -输入年和月的控件，没有时区。 | -- - {{EmbedLiveSample("examplemonth",200,55,"","", "nobutton")}} - | -
| {{HTMLElement("input/number", "number")}} | -用于输入数字的控件。如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。拥有动态键盘的设备上会显示数字键盘。 | -- - {{EmbedLiveSample("examplenumber",200,55,"","", "nobutton")}} | -
| {{HTMLElement("input/password", "password")}} | -单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户。 | -- - {{EmbedLiveSample("examplepassword",200,55,"","", "nobutton")}} - | -
| {{HTMLElement("input/radio", "radio")}} | -单选按钮，允许在多个拥有相同 name 值的选项中选中其中一个。 | -- - {{EmbedLiveSample("exampleradio",200,55,"","", "nobutton")}} - | -
| {{HTMLElement("input/range", "range")}} | -此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。同时使用 min 和 max 来规定值的范围。 | -- - {{EmbedLiveSample("examplerange",200,55,"","", "nobutton")}} - | -
| {{HTMLElement("input/reset", "reset")}} | -此按钮将表单的所有内容重置为默认值。不推荐。 | -- - {{EmbedLiveSample("examplereset",200,55,"","", "nobutton")}} - | -
| {{HTMLElement("input/search", "search")}} | -用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。 | -- - {{EmbedLiveSample("examplesearch",200,55,"","", "nobutton")}} - | -
| {{HTMLElement("input/submit", "submit")}} | -用于提交表单的按钮。 | -- - {{EmbedLiveSample("examplesubmit",200,55,"","", "nobutton")}} - | -
| {{HTMLElement("input/tel", "tel")}} | -用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。 | -- - {{EmbedLiveSample("exampletel",200,55,"","", "nobutton")}} - | -
| {{HTMLElement("input/text", "text")}} | -默认值。单行的文本区域，输入中的换行会被自动去除。 | -- - {{EmbedLiveSample("exampletext",200,55,"","", "nobutton")}} - | -
| {{HTMLElement("input/time", "time")}} | -用于输入时间的控件，不包括时区。 | -- - {{EmbedLiveSample("exampletime",200,55,"","", "nobutton")}} - | -
| {{HTMLElement("input/url", "url")}} | -
- 用于输入 URL 的控件。类似 |
- - - {{EmbedLiveSample("exampleurl",200,55,"","", "nobutton")}} - | -
| {{HTMLElement("input/week", "week")}} | -用于输入以年和周数组成的日期，不带时区。 | -- - {{EmbedLiveSample("exampleweek",200,55,"","", "nobutton")}} - | -
| 废弃的值 | -||
| {{HTMLElement("input/datetime", "datetime")}} | -{{deprecated_inline}} 用于输入基于 UTC 时区的日期和时间（时、分、秒及秒的小数部分）。 | -- - {{EmbedLiveSample("exampledatetime",200,75,"","", "nobutton")}} - | -
<input> 元素由于拥有诸多属性而异常强大，其中前文举例说明的 {{htmlattrxref("type", "input")}} 属性尤其重要。由于所有 <input> 元素，无论是哪种 type，都基于 {{domxref("HTMLInputElement")}} 接口，所以理论上说，它们共享一套相同的属性。但实际上大部分属性只作用于特定一组 type。此外，一些属性作用于 <input> 的方式取决于 <input> 的 type 属性，不同的 type 有不同的效果。
下面的表格列出了所有属性，每个属性都有简短的描述。表格后的列表更详细地描述了各个属性及它们与哪些 <input> type 相关。与大部分或者全部 <input> type 都相关的属性会讲述更多细节。一些针对特定 <input> type 的属性，或者所有 <input> type 都有，但在特定的 <input> type 上有特定表现的属性，会在相应的 type 页面中说明。这个元素包含全局属性，一些针对 <input> 元素有额外意义的全局属性也会特别说明。
| 属性 | -相关的 type | -描述 | -
|---|---|---|
| Type | +描述 | +基础例子 | +
| accept | -file | -用于规定文件上传控件中期望的文件类型 | -
| alt | -image | -image type 的 alt 属性，是可访问性的要求。 | -
| autocomplete | -所有 | -用于表单的自动填充功能 | -
| autofocus | -所有 | -页面加载时自动聚焦到此表单控件 | -
| capture | -file | -文件上传控件中媒体拍摄的方式 | -
| checked | -radio、checkbox | -用于控制控件是否被选中 | -
| dirname | -text、search | -表单区域的一个名字，用于在提交表单时发送元素的方向性 | -
| disabled | -所有 | -表单控件是否被禁用 | -
| form | -所有 | -将控件和一个 form 元素联系在一起 | -
| formaction | -image、submit | -用于提交表单的 URL | -
| formenctype | -image、submit | -表单数据集的编码方式，用于表单提交 | -
| formmethod | -image、submit | -用于表单提交的 HTTP 方法 | -
| formnovalidate | -image、submit | -提交表单时绕过对表单控件的验证 | -
| formtarget | -image、submit | -表单提交的浏览上下文 | -
| height | -image | -
- 和 {{htmlelement('img')}} 的 |
-
| list | -绝大部分 | -自动填充选项的 {{htmlelement('datalist')}} 的 id 值 | -
| max | -数字 type | -最大值 | -
| maxlength | -password、search、tel、text、url | -value 的最大长度（最多字符数目） |
-
| min | -数字 type | -最小值 | -
| minlength | -password、search、tel、text、url | -value 的最小长度（最少字符数目） |
-
| multiple | -email、file | -布尔值。是否允许多个值 | -
| name | -所有 | -input 表单控件的名字。以名字/值对的形式随表单一起提交 | -
| pattern | -password、text、tel | -匹配有效 value 的模式（pattern） |
-
| placeholder | -password、search、tel、text、url | -当表单控件为空时，控件中显示的内容 | -
| readonly | -绝大部分 | -布尔值。存在时表示控件的值不可编辑 | -
| required | -绝大部分 | -布尔值。表示此值为必填项或者提交表单前必须先检查该值 | -
| size | -email、password、tel、text | -控件的大小 | -
| src | -image | -和 {{htmlelement('img')}} 的 src 属性一样；图像资源的地址 |
-
| step | -数字 type | -有效的递增值 | -
| type | -所有 | -input 表单控件的 type | -
| value | -所有 | -表单控件的值。以名字/值对的形式随表单一起提交 | -
| width | -image | -与 {{htmlelement('img')}} 的 width 属性一样 |
-
| {{HTMLElement("input/button", "button")}} | ++ 没有默认行为的按钮，上面显示 + value 属性的值，默认为空。 + | ++ + {{EmbedLiveSample("examplebutton",200,55,"","", "nobutton")}} + | +
| {{HTMLElement("input/checkbox", "checkbox")}} | +复选框，可设为选中或未选中。 | ++ + {{EmbedLiveSample("examplecheckbox",200,55,"","", "nobutton")}} + | +
| {{HTMLElement("input/color", "color")}} | +用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器。 | ++ + {{EmbedLiveSample("examplecolor",200,55,"","", "nobutton")}} + | +
| {{HTMLElement("input/date", "date")}} | ++ 输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。 + | ++ + {{EmbedLiveSample("exampledate",200,55,"","", "nobutton")}} + | +
| + {{HTMLElement("input/datetime-local", "datetime-local")}} + | ++ 输入日期和时间的控件，不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。 + | ++ + {{EmbedLiveSample("exampledtl",200,55,"","", "nobutton")}} + | +
| {{HTMLElement("input/email", "email")}} | +
+ 编辑邮箱地址的区域。类似
+ text
+ 输入，但在支持的浏览器和带有动态键盘的设备上会有确认参数和相应的键盘。
+ |
+ + + {{EmbedLiveSample("exampleemail",200,55,"","", "nobutton")}} + | +
| {{HTMLElement("input/file", "file")}} | ++ 让用户选择文件的控件。使用 + accept 属性规定控件能选择的文件类型。 + | ++ + {{EmbedLiveSample("examplefile",'100%',55,"","", "nobutton")}} + | +
| {{HTMLElement("input/hidden", "hidden")}} | ++ 不显示的控件，其值仍会提交到服务器。举个例子，右边就是一个隐形的控件。 + | ++ |
| {{HTMLElement("input/image", "image")}} | +
+ 带图像的 submit 按钮。显示的图像由
+ src 属性规定。如果 src 缺失，alt
+ 属性就会显示。
+ |
+ + + {{EmbedLiveSample("exampleimage",200,55,"","", "nobutton")}} + | +
| {{HTMLElement("input/month", "month")}} | +输入年和月的控件，没有时区。 | ++ + {{EmbedLiveSample("examplemonth",200,55,"","", "nobutton")}} + | +
| {{HTMLElement("input/number", "number")}} | ++ 用于输入数字的控件。如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。拥有动态键盘的设备上会显示数字键盘。 + | ++ + {{EmbedLiveSample("examplenumber",200,55,"","", "nobutton")}} + | +
| {{HTMLElement("input/password", "password")}} | +单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户。 | ++ + {{EmbedLiveSample("examplepassword",200,55,"","", "nobutton")}} + | +
| {{HTMLElement("input/radio", "radio")}} | ++ 单选按钮，允许在多个拥有相同 + name 值的选项中选中其中一个。 + | ++ + {{EmbedLiveSample("exampleradio",200,55,"","", "nobutton")}} + | +
| {{HTMLElement("input/range", "range")}} | ++ 此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。同时使用 + min 和 + max 来规定值的范围。 + | ++ + {{EmbedLiveSample("examplerange",200,55,"","", "nobutton")}} + | +
| {{HTMLElement("input/reset", "reset")}} | +此按钮将表单的所有内容重置为默认值。不推荐。 | ++ + {{EmbedLiveSample("examplereset",200,55,"","", "nobutton")}} + | +
| {{HTMLElement("input/search", "search")}} | ++ 用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。 + | ++ + {{EmbedLiveSample("examplesearch",200,55,"","", "nobutton")}} + | +
| {{HTMLElement("input/submit", "submit")}} | +用于提交表单的按钮。 | ++ + {{EmbedLiveSample("examplesubmit",200,55,"","", "nobutton")}} + | +
| {{HTMLElement("input/tel", "tel")}} | +用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。 | ++ + {{EmbedLiveSample("exampletel",200,55,"","", "nobutton")}} + | +
| {{HTMLElement("input/text", "text")}} | +默认值。单行的文本区域，输入中的换行会被自动去除。 | ++ + {{EmbedLiveSample("exampletext",200,55,"","", "nobutton")}} + | +
| {{HTMLElement("input/time", "time")}} | +用于输入时间的控件，不包括时区。 | ++ + {{EmbedLiveSample("exampletime",200,55,"","", "nobutton")}} + | +
| {{HTMLElement("input/url", "url")}} | +
+
+ 用于输入 URL 的控件。类似
+ |
+ + + {{EmbedLiveSample("exampleurl",200,55,"","", "nobutton")}} + | +
| {{HTMLElement("input/week", "week")}} | +用于输入以年和周数组成的日期，不带时区。 | ++ + {{EmbedLiveSample("exampleweek",200,55,"","", "nobutton")}} + | +
| 废弃的值 | +||
| {{HTMLElement("input/datetime", "datetime")}} | ++ {{deprecated_inline}} 用于输入基于 UTC + 时区的日期和时间（时、分、秒及秒的小数部分）。 + | ++ + {{EmbedLiveSample("exampledatetime",200,75,"","", "nobutton")}} + | +
一些额外的非标准属性会在标准属性后面列出。
- -file，则该属性表明了服务器端可接受的文件类型；否则它将被忽略。该属性的值必须为一个逗号分割的列表，包含了多个唯一的内容类型声明：
- audio/* 表示音频文件video/* 表示视频文件image/* 表示图片文件off：用户必须手动填值，或者该页面提供了自己的自动补全方法。浏览器不对此字段自动填充。on：浏览器可以根据用户先前的填表情况对此字段自动填值。name：完整的姓名honorific-prefix：Prefix or title (e.g. "Mr.", "Ms.", "Dr.", "Mlle")given-name：名additional-namefamily-name：姓honorific-suffix：Suffix (e.g. "Jr.", "B.Sc.", "MBASW", "II")nicknameemailusernamenew-password：新密码（如创建帐号或更改密码时使用）current-passwordorganization-title：Job title (e.g. "Software Engineer", "Senior Vice President", "Deputy Managing Director")organizationstreet-addressaddress-line1、address-line2、address-line3、address-level4、address-level3、address-level2、address-level1countrycountry-namepostal-codecc-name：Full name as given on the payment instrumentcc-given-namecc-additional-namecc-family-namecc-number：Code identifying the payment instrument (e.g. the credit card number)cc-exp：Expiration date of the payment instrumentcc-exp-monthcc-exp-yearcc-csc：Security code for the payment instrument cc-type：Type of payment instrument (e.g. Visa)transaction-currencytransaction-amountlanguage：Preferred language; Valid BCP 47 language tagbdaybday-daybday-monthbday-yearsex：Gender identity (e.g. Female, Fa'afafine); Free-form text, no newlinestelurl：Home page or other Web page corresponding to the company, person, address, or contact information in the other fields associated with this fieldphoto：Photograph, icon, or other image corresponding to the company, person, address, or contact information in the other fields associated with this field参考 WHATWG 标准 获取更多详细内容。
-如果 <input> 元素上没有 autocomplete 属性，浏览器可使用包含该 input 元素的表单（<form>）或通过 input 的 form 属性指定的表单的 autocomplete 属性值。更多信息请参见 {{ HTMLElement("form") }} 的 autocomplete 属性。
与其他浏览器不同，autocomplete 还控制着 Firefox 浏览器对 <input> 持久化动态禁用状态和（如果适用）跨页面加载的动态检查。持久化特性默认是开启的。设置 autocomplete 的值为 off 可以关闭该特性。即使 autocomplete 属性通常不应用于 <input> 的 type，它也可以工作。具体可以查看 {{bug(654072)}}。
-Introduced in the HTML Media Capture specification and valid for the file input type only, the capture attribute defines which media—microphone, video, or camera—should be used to capture a new file for upload with file upload control in supporting scenarios. See the {{HTMLElement("input/file", "file")}} input type.
If present on a checkbox type, it indicates that the checkbox is checked by default (when the page loads). It does not indicate whether this checkbox is currently checked: if the checkbox’s state is changed, this content attribute does not reflect the change. (Only the HTMLInputElement’s checked IDL attribute is updated.)
Note: Unlike other input controls, a checkboxes and radio buttons value are only included in the submitted data if they are currently checked. If they are, the name and the value(s) of the checked controls are submitted.
For example, if a checkbox whose name is fruit has a value of cherry, and the checkbox is checked, the form data submitted will include fruit=cherry. If the checkbox isn't active, it isn't listed in the form data at all. The default value for checkboxes and radio buttons is on.
Valid for text and search input types only, the dirname attribute enables the submission of the directionality of the element. When included, the form control will submit with two name/value pairs: the first being the name and value, the second being the value of the dirname as the name with the value of ltr or rtl being set by the browser.
<form action="page.html" method="post">
- <label>Fruit: <input type="text" name="fruit" dirname="fruit.dir" value="cherry"></label>
- <input type="submit"/>
-</form>
-<!-- page.html?fruit=cherry&fruit.dir=ltr -->
-When the form above is submitted, the input cause both the name / value pair of fruit=cherry and the dirname / direction pair of fruit.dir=ltr to be sent.
click 事件 将不会被分发 。 并且，禁用的控件的值在提交表单时也不会被提交。如果 type 属性为 hidden，此属性将被忽略。<input> across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.A string specifying the {{HTMLElement("form")}} element with which the input is associated (that is, its form owner). This string's value, if present, must match the {{htmlattrxref("id")}} of a <form> element in the same document. If this attribute isn't specified, the <input> element is associated with the nearest containing form, if any.
The form attribute lets you place an input anywhere in the document but have it included with a form elsewhere in the document.
Note: An input can only be associated with one form.
-Valid for the image and submit input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.
Valid for the image and submit input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.
Valid for the image and submit input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.
Valid for the image and submit input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.
Valid for the image and submit input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.
Global attribute valid for all elements, including all the input types, it defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking. The value is used as the value of the {{htmlelement('label')}}'s for attribute to link the label with the form control. See the the label element below.
Global value valid for all elements, it provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents. Values include none
- text, tel, url, email, numeric, decimal, and search.
The values of the list attribute is the {{domxref("Element.id", "id")}} of a {{HTMLElement("datalist")}} element located in the same document. The <datalist> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the {{htmlattrxref("type", "input")}} are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.
-<datalist id="colorsxx"> - <option>#ff0000</option> - <option>#ee0000</option> - <option>#dd0000</option> - <option>#cc0000</option> - <option>#bb0000</option> -</datalist> -<datalist id="numbersxx"> - <option>0</option> - <option>2</option> - <option>4</option> - <option>8</option> - <option>16</option> - <option>32</option> - <option>64</option> -</datalist> -<datalist id="fruitsxx"> - <option>cherry</option> - <option>banana</option> - <option>mango</option> - <option>orange</option> - <option>blueberry</option> -</datalist> -<datalist id="urlsxx"> - <option>https://developer.mozilla.org</option> - <option>https://caniuse.com/</option> - <option>https://mozilla.com</option> - <option>https://mdn.github.io</option> - <option>https://www.youtube.com/user/firefoxchannel</option> -</datalist> - -<p> - <label for="textx">Text</label> - <input type="text" list="fruitsxx" id="textx"/> -</p> -<p> - <label for="colorx">Color</label> - <input type="color" list="colorsxx" id="colorx"/> -</p> -<p> - <label for="rangex">Range</label> - <input type="range" min="0" max="64" list="numbersxx" id="rangex"/> -</p> -<p> - <label for="numberx">Number</label> - <input type="number" min="0" max="64" list="numbersxx" id="numberx"/> -</p> -<p> - <label for="urlx">URL</label> - <input type="url" list="urlsxx" id="urlx"/> -</p> -- -
{{EmbedLiveSample("datalist",400,275,"","", "nobutton")}}
- -It is valid on text, search, url, tel, email, date, month, week, time, datetime-local, number, range, and color.
Per the specifications, the list attribute is not supported by the hidden, password, checkbox, radio, file, or any of the button types.
Depending on the browser, the user may see a custom color palette suggested, tic marks along a range, or even a input that opens like a select but allows for non-listed values. Check out the browser compatibility table for the other input types.
- -See the {{htmlelement('datalist')}} element.
- -Valid for text, search, url, tel, email, and password, it defines the minimum number of characters (as UTF-16 code units) the user can enter into the entry field. This must be an non-negative integer value smaller than or equal to the value specified by maxlength. If no minlength is specified, or an invalid value is specified, the input has no minimum length.
The input will fail constraint validation if the length of the text entered into the field is fewer than minlength UTF-16 code units long, preventing form submission. See Client-side validation for more information.
备注：请不要用 placeholder 属性替换 {{ HTMLElement("label") }} 元素。他们的作用不同: {{ HTMLElement("label") }} 属性描述表单元素的角色; 也就是说，它展示预期的信息，而 placeholder 属性是提示用户内容的输入格式。某些情况下 placeholder 属性对用户不可见，所以当没有它时也需要保证 form 能被理解。
如果控件的 type 属性为 hidden、range、color、checkbox、radio、file，此属性将被忽略。
-true 表示元素需要检查其拼写和语法。值为 default 表示该元素将根据默认行为进行操作，可能基于父元素自己的 spellcheck 值。值为 false 表示不应该检查元素Global attribute valid for all elements, including all input types, containing a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip. The title should NOT be used as the primary explanation of the purpose of the form control. Instead, use the {{htmlelement('label')}} element with a for attribute set to the form control's {{htmlattrdef('id')}} attribute. See Labels below.
radio 或 checkbox。注意，当重新加载页面时，如果在重新加载之前更改了值，Gecko 和 IE 将忽略 HTML 源代码中指定的值。<input> 属性<input>. Possible attribute values are:
- on：Enable autocorrection.off：Disable autocorrection.autocorrect documentation in the Safari HTML Reference.go, done, next, search, and send; these automatically get mapped to the appropriate string (and are case-insensitive).none：Completely disables automatic capitalizationsentences：Automatically capitalize the first letter of sentences.words：Automatically capitalize the first letter of words.characters：Automatically capitalize all characters.on：{{deprecated_inline()}} Deprecated since iOS 5.off：{{deprecated_inline()}} Deprecated since iOS 5.autocapitalize documentation in the Safari HTML Referencesearch. If the attribute is present, regardless of what its value is, the <input> fires search events as the user edits the text value. The event is only fired after an implementation-defined timeout has elapsed since the most recent keystroke, and new keystrokes reset the timeout. In other words, the event firing is debounced. If the attribute is absent, the search event is only fired when the user explicitly initiates a search (e.g. by pressing the Enter key while within field). incremental documentation in the Safari HTML Referencego, done, next, search, and send. These automatically get mapped to the appropriate string and are case-insensitive.search. It is used to control the maximum number of entries that should be displayed in the <input>'s native dropdown list of past search queries. Its value should be a nonnegative decimal integer.filehas to allow for the selection of directories only.The following methods are provided by the HTMLInputElement interface which represents <input> elements in the DOM. Also available are those methods specified by the parent interfaces, HTMLElement, Element, Node, and EventTarget.
checkValidity()invalid event at the element if the value isn't valid.reportValidity()true if the element's value passes validity checks; otherwise, returns false.select()<input> element, if the element's content is selectable. For elements with no selectable text content (such as a visual color picker or calendar date input), this method does nothing.setCustomValidity()setRangeText()selectMode parameter is available to allow controlling how the existing content is affected.setSelectionRange()stepDown()stepUp()Inputs, being replaced elements, have a few features not applicable to non form elements. There are CSS selectors that can specification target form controls based on their UI features, also known as UI pseudo-classes. The input element can also be targeted by type with attribute selectors. There are some properties that are especially useful as well.
- -| Pseudo-class | -Description | -
|---|---|
:enabled |
- Any currently enabled element that can be activated (selected, clicked on, typed into, etc.) or accept focus and also has a disabled state, in which it can't be activated or accept focus. | -
:disabled |
- Any currently disabled element that has an enabled state, meaing it otherwise could be activated (selected, clicked on, typed into, etc.) or accept focus were it not disabled. | -
:read-only |
- Element not editable by the user | -
:read-write |
- Element that is editable by the user. | -
:placeholder-shown |
- Element that is currently displaying placeholder text, including input elements with the placeholder attribute present that has, as of yet, no value. | -
:default |
- Form elements that are the default in a group of related elements. Matches checkbox and radio input types that were checked on page load or render. | -
:checked |
- Matches checkbox and radio input types that are currently checked (and the (<option> in a <select> that is currently selected). |
-
:indeterminate |
- checkbox elements whose indeterminate property is set to true by JavaScript, radio elements, when all radio buttons with the same name value in the form are unchecked, and <progress> elements in an indeterminate state |
-
:valid |
- Form controls that can have constraint validation applied and are currently valid. | -
:invalid |
- Form controls that have constraint validation applied and are currently not valid. Matches a form control whose value doesn't match the constraints set on it by it's attributes, such as required, pattern , step and max. | -
:in-range |
- A non-empty input whose current value is within the range limits specified by the min and max attributes and the step . | -
:out-of-range |
- A non-empty input whose current value is NOT within the range limits specified by the min and max attributes or does not adher to the step constraint. | -
:placeholder-shown |
- An <input> or <textarea> element that is currently displaying placeholder text. |
-
:required |
- <input>, <select>, or <textarea> element that has the required attribute set on it. Only matches elements that can be required. The attribute included on a non-requirable element will not make for a match. |
-
:optional |
- <input>, <select>, or <textarea> element that does NOT have the required attribute set on it. Does not match elements that can't be required. |
-
:blank |
- <input> and <textarea> elements that currently have no value. |
-
:user-invalid |
- Similar to :invalid, but is activated on blur. Matches invalid input but only after the user interaction, such as by focusing on the control, leaving the control, or attempting to submit the form containing the invalid control. |
-
We can style a checkbox label based on whether the checkbox is checked or not. In this example, we are styling the color and font-weight of the <label> that comes immediately after a checked input. We haven't applied any styles if the input is not checked.
input:checked + label {
+## 属性
+
+`` 元素由于拥有诸多属性而异常强大，其中前文举例说明的 {{htmlattrxref("type", "input")}} 属性尤其重要。由于所有 `` 元素，无论是哪种 `type`，都基于 {{domxref("HTMLInputElement")}} 接口，所以理论上说，它们共享一套相同的属性。但实际上大部分属性只作用于特定一组 `type`。此外，一些属性作用于 `` 的方式取决于 `` 的 `type` 属性，不同的 `type` 有不同的效果。
+
+下面的表格列出了所有属性，每个属性都有简短的描述。表格后的列表更详细地描述了各个属性及它们与哪些 `` `type` 相关。与大部分或者全部 `` `type` 都相关的属性会讲述更多细节。一些针对特定 `` `type` 的属性，或者所有 `` `type` 都有，但在特定的 `` `type` 上有特定表现的属性，会在相应的 `type` 页面中说明。这个元素包含全局属性，一些针对 `` 元素有额外意义的全局属性也会特别说明。
+
+一些额外的非标准属性会在标准属性后面列出。
+
+### 属性各论
+
+- {{ htmlattrdef("accept") }}
+ - : 如果该元素的 **type** 属性的值是 `file`，则该属性表明了服务器端可接受的文件类型；否则它将被忽略。该属性的值必须为一个逗号分割的列表，包含了多个唯一的内容类型声明：
+
+ - 以 STOP 字符 (U+002E) 开始的文件扩展名。（例如：".jpg,.png,.doc"）
+ - 一个有效的 MIME 类型，但没有扩展名
+ - `audio/*` 表示音频文件
+ - `video/*` 表示视频文件
+ - `image/*` 表示图片文件
+- {{ htmlattrdef("accesskey") }} {{Deprecated_Inline}}
+ - : 用户按下后可以获得此控件焦点的单个字符。这是 HTML5 全局属性。
+- {{ htmlattrdef("autocomplete") }}
+ - : 这个属性表示这个控件的值是否可被浏览器自动填充。如果 **type** 属性的值是 hidden、checkbox、radio、file，或为按钮类型（button、submit、reset、image），则本属性被忽略。可用的值是：
+
+ - `off`：用户必须手动填值，或者该页面提供了自己的自动补全方法。浏览器不对此字段自动填充。
+ - `on`：浏览器可以根据用户先前的填表情况对此字段自动填值。
+ - `name`：完整的姓名
+ - `honorific-prefix`：Prefix or title (e.g. "Mr.", "Ms.", "Dr.", "Mlle")
+ - `given-name`：名
+ - `additional-name`
+ - `family-name`：姓
+ - `honorific-suffix`：Suffix (e.g. "Jr.", "B.Sc.", "MBASW", "II")
+ - `nickname`
+ - `email`
+ - `username`
+ - `new-password`：新密码（如创建帐号或更改密码时使用）
+ - `current-password`
+ - `organization-title`：Job title (e.g. "Software Engineer", "Senior Vice President", "Deputy Managing Director")
+ - `organization`
+ - `street-address`
+ - `address-line1`、`address-line2`、`address-line3`、`address-level4`、`address-level3`、`address-level2`、`address-level1`
+ - `country`
+ - `country-name`
+ - `postal-code`
+ - `cc-name`：Full name as given on the payment instrument
+ - `cc-given-name`
+ - `cc-additional-name`
+ - `cc-family-name`
+ - `cc-number`：Code identifying the payment instrument (e.g. the credit card number)
+ - `cc-exp`：Expiration date of the payment instrument
+ - `cc-exp-month`
+ - `cc-exp-year`
+ - `cc-csc`：Security code for the payment instrument
+ - `cc-type`：Type of payment instrument (e.g. Visa)
+ - `transaction-currency`
+ - `transaction-amount`
+ - `language`：Preferred language; Valid BCP 47 language tag
+ - `bday`
+ - `bday-day`
+ - `bday-month`
+ - `bday-year`
+ - `sex`：Gender identity (e.g. Female, Fa'afafine); Free-form text, no newlines
+ - `tel`
+ - `url`：Home page or other Web page corresponding to the company, person, address, or contact information in the other fields associated with this field
+ - `photo`：Photograph, icon, or other image corresponding to the company, person, address, or contact information in the other fields associated with this field
+ - 参考 [WHATWG 标准](https://html.spec.whatwg.org/multipage/forms.html#autofill) 获取更多详细内容。如果 `` 元素上没有 **autocomplete** 属性，浏览器可使用包含该 input 元素的表单（`
+
+ ```When the form above is submitted, the input cause both the `name` / `value` pair of `fruit=cherry` and the `dirname` / direction pair of `fruit.dir=ltr` to be sent.
+- {{ htmlattrdef("disabled") }}
+ - : 这个布尔属性表示此表单控件不可用。 特别是在禁用的控件中， `click` 事件 [将不会被分发](http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#enabling-and-disabling-form-controls) 。 并且，禁用的控件的值在提交表单时也不会被提交。如果 **type** 属性为 hidden，此属性将被忽略。
+
+> **备注：** Although not required by the specification, Firefox will by default [persist the dynamic disabled state](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) of an `` across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.
+
+- {{ htmlattrdef("form") }}
+ - : A string specifying the {{HTMLElement("form")}} element with which the input is associated (that is, its **form owner**). This string's value, if present, must match the {{htmlattrxref("id")}} of a `