这篇翻译不完整。请帮忙从英语翻译这篇文章

HTML <input> 元素用于为基于Web的表单创建交互式控件,以便接受来自用户的数据。

内容分类 流动区域; 内容区域; 交互式内容(如果不是处于hiddenhidden状态); 列表,可标签,可提交,可重置,与表单相关的元素。
允许的内容 无,这是一个空元素
标签省略

必须有开始标签但不必有结束标签。

Permitted parents Any element that accepts phrasing content.
Permitted ARIA roles
DOM 接口 HTMLInputElement

Form <input> types

<input>的工作方式因其类型属性的值而有很大差异,不同的类型会在各自的参考页中进行介绍。如果未指定此属性,则采用的默认类型为

可用的值包括:

  • button:无缺省行为按钮。
  • checkbox: 复选框。必须使用 value 属性定义此控件被提交时的值。使用 checked 属性指示控件是否被选择。也可以使用 indeterminate 指示复选框在一种不确定状态(大多数平台上,显示为一条穿过复选框的水平线)。
  • colorHTML5 用于指定颜色的控件。
  • date:HTML5 用于输入日期的控件(年,月,日,不包括时间)。
  • datetimeHTML5 基于 UTC 时区的日期时间输入控件(时,分,秒及几分之一秒)。
  • datetime-localHTML5 用于输入日期时间控件,不包含时区。
  • emailHTML5 用于编辑 e-mail 的字段。 合适的时候可以使用 :valid:invalid CSS 伪类。
  • file:此控件可以让用户选择文件。使用 accept 属性可以定义控件可以选择的文件类型。
  • hidden:不显示在页面上的控件,但它的值会被提交到服务器。
  • image:图片提交按钮。必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。还可以使用 height 和 width 属性以像素为单位定义图片的大小。
  • monthHTML5 用于输入年月的控件,不带时区。
  • number: HTML5 用于输入浮点数的控件。
  • password:一个值被遮盖的单行文本字段。使用 maxlength 指定可以输入的值的最大长度 。
  • radio:单选按钮。必须使用 value 属性定义此控件被提交时的值。使用checked 必须指示控件是否缺省被选择。在同一个”单选按钮组“中,所有单选按钮的 name 属性使用同一个值; 一个单选按钮组中是,同一时间只有一个单选按钮可以被选择。
  • rangeHTML5 用于输入不精确值控件。如果未指定相应的属性,控件使用如下缺省值:
    • min:0
    • max:100
    • valuemin + (max-min)/2,或当 max 小于 min 时使用 min
    • step:1
  • reset:用于将表单所内容设置为缺省值的按钮。
  • searchHTML5用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
  • submit:用于提交表单的按钮。
  • telHTML5 用于输入电话号码的控件;换行会被自动从输入的值中移除A,但不会执行其他语法。可以使用属性,比如 pattern 和 maxlength 来约束控件输入的值。恰当的时候,可以应用 :valid:invalid CSS 伪类。
  • text:单行字段;换行会将自动从输入的值中移除。
  • timeHTML5 用于输入不含时区的时间控件。
  • urlHTML5 用于编辑URL的字段。 The user may enter a blank or invalid address. 换行会被自动从输入值中移队。可以使用如:pattern 和 maxlength 样的属性来约束输入的值。 恰当的时候使可以应用 :valid:invalid CSS 伪类。
  • weekHTML5 用于输入一个由星期-年组成的日期,日期不包括时区。

属性

全局 <input> 属性

本节列出了所有表单<input>类型可用的属性。 非全局属性和全局属性指定在不同<input>类型上的行为不同;这些差异都列在这些类型的独立页面上。

注意:这包括全局属性

type
要呈现的控件类型。有关各个类型的信息,请参阅 Form <input> types,其中包含指向每个类型的更多信息的链接。
accept
如果该元素的 type 属性的值是file,则该属性表明了服务器端可接受的文件类型;否则它将被忽略。该属性的值必须为一个逗号分割的列表,包含了多个唯一的内容类型声明:
  • 以 STOP 字符 (U+002E) 开始的文件扩展名。(例如:".jpg,.png,.doc")
  • 一个有效的 MIME 类型,但没有扩展名
  • audio/* 表示音频文件 HTML5
  • video/* 表示视频文件 HTML5
  • image/* 表示图片文件 HTML5
accesskey HTML 4 only, 已废弃 HTML5
用户按下后可以获得此控件焦点的单个字符。这是 HTML5 全局属性。
mozactionhint
Specifies an "action hint" used to determine how to label the enter key on mobile devices with virtual keyboards. Supported values are go, done, next, search, and send; these automatically get mapped to the appropriate string (and are case-insensitive).
autocapitalize
This is a nonstandard attribute used by iOS Safari Mobile which controls whether and how the text value should be automatically capitalized as it is entered/edited by the user. The non-deprecated values are available in iOS 5 and later. Possible values are:
  • none: Completely disables automatic capitalization
  • sentences: Automatically capitalize the first letter of sentences.
  • words: Automatically capitalize the first letter of words.
  • characters: Automatically capitalize all characters.
  • on: Deprecated since iOS 5.
  • off: Deprecated since iOS 5.
autocapitalize documentation in the Safari HTML Reference
autocomplete HTML5
这个属性表示这个控件的值是否可被浏览器自动填充。如果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 标准 获取更多详细内容。

如果<input>元素上没有autocomplete属性,浏览器可使用包含该input元素的表单(<form>)或通过input的form属性指定的表单的autocomplete属性值。更多信息请参见<form>autocomplete属性。

与其他浏览器不同,autocomplete 还控制着Firefox浏览器 对 <input> 持久化动态禁用状态和(如果适用)跨页面加载的动态检查。持久化特性默认是开启的。设置autocomplete的值为off 可以关闭该特性即使autocomplete属性通常不应用于<input>的type,它也可以工作。具体可以查看bug 654072

 

autofocus HTML5
这个布尔属性允许您指定的表单控件在页面加载时具有焦点(自动获得焦点),除非用户将其覆盖,例如通过键入不同的控件。文档中只有一个表单元素可以具有autofocus属性,它是一个布尔值。 如果type属性设置为隐藏则不能应用(即您不能自动获得焦点的属性设置为隐藏的控件)。
autosave HTML5
This attribute should be defined as a unique value. If the value of the type attribute is search, previous search term values will persist in the dropdown across page load.
checked
如果该元素的type属性的值为radio或者checkbox,则该布尔属性的存在与否表明了该控件是否是默认选择状态.
disabled
这个布尔属性表示此表单控件不可用。 特别是在禁用的控件中, click 事件 将不会被分发 。 并且,禁用的控件的值在提交表单时也不会被提交。如果 type 属性为  hidden,此属性将被忽略。
form HTML5
The form element that the input element is associated with (its form owner). The value of the attribute must be an id of a <form> element in the same document. If this attribute is not specified, this <input> element must be a descendant of a <form> element. This attribute enables you to place <input> elements anywhere within a document, not just as descendants of their form elements.
formactionHTML5
The URI of a program that processes the information submitted by the input element, if it is a submit button or image. If specified, it overrides the action attribute of the element's form owner.
formenctypeHTML5
If the input element is a submit button or image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are:
  • 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 <input> element with the type attribute set to file.
  • text/plain

If this attribute is specified, it overrides the enctype attribute of the element's form owner.

formmethodHTML5
If the input element is a submit button or image, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are:
  • 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 are 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 method attribute of the element's form owner.

formnovalidateHTML5
If the input element is a submit button or image, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the novalidate attribute of the element's form owner.
formtargetHTML5
If the input element is a submit button or image, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). If this attribute is specified, it overrides the target attribute of the elements's form owner. The following keywords have special meanings:
  • _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.
height HTML5
如果type属性的值是image,这个属性定义了按钮图片的高度。
list HTML5
Identifies a list of pre-defined options to suggest to the user. The value must be the id of a <datalist> element in the same document. The browser displays only options that are valid values for this input element. This attribute is ignored when the type attribute's value is hidden, checkbox, radio, file, or a button type.
max HTML5 
此项目的最大(数字或日期时间)值,且不得小于其最小值(min属性)值。
maxlength HTML5
如果 type 的值是  textemailsearch, password, tel, 或 url,那么这个属性指明了用户最多可以输入的字符个数(按照Unicode编码方式计数);对于其他类型的输入框,该属性被忽略。它可以大于 size 属性的值。如果不指定这个属性,那么用户可以输入任意多的字符。如果指定为一个负值,那么元素表现出默认行为,即用户可以输入任意多的字符。本属性的约束规则,仅在元素的 value 属性发生变化时才会执行。译者注:ie10+
min HTML5 
此项目的最小(数字或日期时间)值,且不得大于其最大值(最大属性)值。
multipleHTML5
This Boolean attribute indicates whether the user can enter more than one value.这个属性指示用户能否输入多个值。这个属性仅在type属性为email或file的时候生效 ; 否则被忽视.
name
控件的名称,与表单数据一起提交。
patternHTML5
检查控件值的正则表达式.。pattern必须匹配整个值,而不仅仅是某些子集.。使用title属性来描述帮助用户的模式.。当类型属性的值为text, search, tel, url 或 email时,此属性适用,否则将被忽略。译者注:ie10+
placeholder HTML5
提示用户输入框的作用。用于提示的占位符文本不能包含回车或换行。仅适用于当type 属性为text, search, tel, url or email时; 否则会被忽略。
Note: 请不要用placeholder 属性替换 <label> 元素。他们的作用不同:  <label> 属性描述表单元素的角色; 也就是说,它展示预期的信息,而placeholder 属性是提示用户内容的输入格式。某些情况下 placeholder 属性对用户不可见, 所以当没有它时也需要保证form能被理解。
readonly
这个布尔属性用于指明用户无法修改控件的值。

HTML5 如果控件的 type 属性为hidden, range, color, checkbox, radio, file 或 type时,此属性会被忽略。

required HTML5
这个属性指定用户在提交表单之前必须为该元素填充值. 当type属性是hidden,image或者按钮类型(submit,reset,button)时不可使用. :optional:required CSS 伪元素的样式将可以被该字段应用作外观.
selectionDirection HTML5
The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.
size
控件的初始大小。以像素为单位。但当type  属性为text 或 password时, 它表示输入的字符的长度。从HTML5开始, 此属性仅适用于当 type 属性为 text, search, tel, url, email,或 password;否则会被忽略。 此外,它的值必须大于0。 如果未指定大小,则使用默认值20。 HTML5 概述 "用户代理应该确保至少大部分字符是可见的", 但是不同的字符的用不同的字体表示可能会导致宽度不同。在某些浏览器中,一串带有x的字符即使定义了到x的大小也将显示不完整。 。
spellcheck HTML5
将此属性的值设置为true表示元素需要检查其拼写和语法。值default 表示该元素将根据默认行为进行操作,可能基于父元素自己的spellcheck值。值false表示不应该检查元素
src
如果type属性的值是image, 这个属性指定了按钮图片的路径; 否则它被忽视.
step HTML5
使用minmax 属性来限制可以设置数字或日期时间值的增量。它可以是任意字符串或是正浮点数。如果此属性未设置为任何,则控件仅接受大于最小步长值的倍数的值。
tabindex element-specific in HTML 4, global in HTML5
元素在当前文档的Tab导航顺序中的位置。
usemap HTML 4 only, 已废弃 HTML5
作为图像映射的<map>元素的名称.
value
控件的初始值. 此属性是可选的,除非type 属性是radiocheckbox注意,当重新加载页面时,如果在重新加载之前更改了值,Gecko和IE将忽略HTML源代码中指定的值
width HTML5
如果type属性的值是image,这个属性定义了按钮图片的宽度。

非标准 <input> 属性

autocorrect
This is a non-standard attribute supported by Safari that is used to control whether autocorrection should be enabled when the user is entering/editing the text value of the <input>. Possible attribute values are:
  • on: Enable autocorrection.
  • off: Disable autocorrection.
autocorrect documentation in the Safari HTML Reference.
incremental
This is a nonstandard attribute supported by WebKit (Safari) and Blink (Chrome) that only applies when the type is search. 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 Reference
mozactionhint
Specifies an "action hint" used to determine how to label the enter key on mobile devices with virtual keyboards. Supported values are godonenextsearch, and send. These automatically get mapped to the appropriate string and are case-insensitive.
results
This is a nonstandard attribute supported by Safari that only applies when the type is 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.
webkitdirectory
This Boolean attribute indicates if the selector used when the type attribute is filehas to allow for the selection of directories only.
x-moz-errormessage
This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.

input 元素造型

你可以使用各种与颜色相关的属性来设置<input>元素的样式。与文本输入相关的元素特有的一个不常见的特性是CSS caret-color属性,该属性允许你设置用于绘制文本输入插入符的颜色

HTML

<label for="textInput">Note the red caret:</label>
<input id="textInput" class="custom" size="32"/>

CSS

input.custom {
  caret-color: red;
  font: 16px "Helvetica", "Arial", "sans-serif"
}

结果

有关向HTML中的元素添加颜色的更多信息,请参阅使用CSS将颜色应用于HTML元素

示例

你可以在覆盖每个单独类型的页面上找到<input>元素用法的多个例子 - 参见Form <input> types,也可以参考Live example在文章的顶部。

规范

Specification Status Comment
HTML Living Standard
<input>
Living Standard  
HTML Media Capture
<input capture>
Recommendation Adds the capture element
HTML5
<input>
Recommendation  
HTML 4.01 Specification
<form>
Recommendation  

浏览器兼容

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
type="button"Chrome Full support 1Edge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support 1WebView Android Full support YesChrome Android Full support 18Edge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
type="checkbox"Chrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
type="color"Chrome Full support 20Edge Full support 14Firefox Full support 29
Notes
Full support 29
Notes
Notes Firefox doesn't yet support inputs of type color on Windows Touch.
IE No support NoOpera Full support 12Safari Full support 10WebView Android Full support 4.4Chrome Android ? Edge Mobile Full support 14Firefox Android Full support 27Opera Android Full support YesSafari iOS No support NoSamsung Internet Android ?
type="date"Chrome Full support 20Edge Full support 12Firefox Full support 57IE No support NoOpera Full support 11Safari No support No
Notes
No support No
Notes
Notes The input type is recognized, but there is no date-specific control.
WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 57Opera Android Full support 11Safari iOS Full support 5Samsung Internet Android ?
type="datetime-local"Chrome Full support 20Edge Full support 12Firefox No support No
Notes
No support No
Notes
Notes See bug 888320 and TPE DOM/Date time input types.
IE No support NoOpera Full support 11Safari No support No
Notes
No support No
Notes
Notes The input type is recognized, but there is no date-specific control.
WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android Full support 11Safari iOS Full support YesSamsung Internet Android ?
type="email"Chrome Full support 5Edge ? Firefox Full support YesIE Full support 10Opera Full support 11Safari Full support YesWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 3.1
Notes
Full support 3.1
Notes
Notes Doesn't do validation, but instead offers a custom 'email' keyboard, which is designed to make entering email addresses easier.
Notes Automatically applies a default style of opacity: 0.4 to disable textual <input> elements, including those of type 'email'. Other major browsers don't currently share this particular default style.
Samsung Internet Android ?
type="file"Chrome Full support 1Edge ? Firefox Full support 1
Notes
Full support 1
Notes
Notes You can set as well as get the value of HTMLInputElement.files in all modern browsers; this was most recently added to Firefox, in version 57 (see bug 1384030).
IE Full support YesOpera Full support 11Safari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support 4Opera Android Full support 1Safari iOS Full support YesSamsung Internet Android ?
type="hidden"Chrome Full support 1Edge Full support YesFirefox Full support 1IE Full support YesOpera Full support 2Safari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
type="image"Chrome Full support YesEdge ? Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android ? Edge Mobile ? Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
type="month"Chrome Full support 20Edge Full support 12Firefox No support No
Notes
No support No
Notes
Notes See bug 888320.
IE No support NoOpera Full support 11Safari No support No
Notes
No support No
Notes
Notes The input type is recognized, but there is no month-specific control.
WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android No support NoOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
type="number"Chrome Full support YesEdge ? Firefox Full support YesIE Full support 10Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
type="password"Chrome Full support 1Edge ? Firefox Full support 1IE Full support 2Opera Full support 2Safari Full support 1WebView Android ? Chrome Android Full support YesEdge Mobile ? Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
type="radio"Chrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
type="range"Chrome Full support 4Edge Full support 12Firefox Full support 23IE Full support 10Opera Full support 11Safari Full support 3.1WebView Android Full support 4.4
Full support 4.4
No support 2 — 4.4
Notes
Notes Android WebView recognizes the range type, but doesn't implement a range-specific control.
Chrome Android Full support 57Edge Mobile ? Firefox Android Full support 52Opera Android Full support YesSafari iOS Full support 5.1Samsung Internet Android ?
type="reset"Chrome Full support 1Edge ? Firefox Full support 1
Notes
Full support 1
Notes
Notes Unlike other browsers, Firefox by default persists the dynamic disabled state of a &ltbutton&gt across page loads. Use the autocomplete attribute to control this feature.
IE Full support YesOpera Full support YesSafari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support 4
Notes
Full support 4
Notes
Notes Unlike other browsers, Firefox by default persists the dynamic disabled state of a &ltbutton&gt across page loads. Use the autocomplete attribute to control this feature.
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
type="search"Chrome Full support 5Edge Full support 12Firefox Full support 4IE Full support 10Opera Full support 10.6Safari Full support 5WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
type="submit"Chrome Full support 1Edge Full support YesFirefox Full support 1
Notes
Full support 1
Notes
Notes Unlike other browsers, Firefox by default persists the dynamic disabled state of a <button> across page loads. Use the autocomplete attribute to control this feature.</button>
IE Full support YesOpera Full support YesSafari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4
Notes
Full support 4
Notes
Notes Unlike other browsers, Firefox by default persists the dynamic disabled state of a <button> across page loads. Use the autocomplete attribute to control this feature.</button>
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
type="tel"Chrome Full support YesEdge Full support YesFirefox Full support YesIE Full support 10Opera Full support 11Safari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
type="text"Chrome Full support 1Edge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
type="time"Chrome Full support 20Edge Full support 12Firefox Full support 57IE No support NoOpera Full support 10Safari No support NoWebView Android Full support YesChrome Android Full support 25Edge Mobile Full support YesFirefox Android Full support 57Opera Android Full support YesSafari iOS No support NoSamsung Internet Android ?
type="url"Chrome Full support 1Edge Full support YesFirefox Full support YesIE Full support 10Opera Full support 11Safari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
type="week"Chrome Full support 20Edge Full support 12Firefox No support No
Notes
No support No
Notes
Notes See bug 888320.
IE No support NoOpera Full support 11Safari No support NoWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

 

备注

File inputs

Gecko 2.0 note
(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

从Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)开始,在一个file类型的<input>元素上调用click()方法,会打开文件选择对话框让用户选择文件.查看Using files from web applications 了解更多详情.

你不能通过脚本为file类型的input元素赋值,这样做没有任何效果:

var e = getElementById("someFileInputElement");
e.value = "foo";

错误消息

如果你想让Firefox在某个表单字段在有效性验证失败时显示自定义的错误消息,你可以使用 x-moz-errormessage 属性来达到这种效果:

<input type="email" x-moz-errormessage="Please specify a valid email address.">

不过需要注意的是,这不是一个标准属性,在其他浏览器中没有任何效果.

Localization

The allowed inputs for certain <input> types depend on the locale. In some locales, 1,000.00 is a valid number, while in other locales the valid way to enter this number is 1.000,00.

Firefox uses the following heuristics to determine the locale to validate the user's input (at least for type="number"):

  • Try the language specified by a lang/xml:lang attribute on the element or any of its parents.
  • Try the language specified by any Content-Language HTTP header or
  • If none specified, use the browser's locale.

在Firefox 移动上使用使用mozactionhint属性

当你的表单在Firefox mobile中显示时,你可以使用 mozactionhint 属性来指定虚拟键盘中回车键上的提示文字 .例如,想要一个"Next"标签,你可以这样写:

<input type="text" mozactionhint="next" name="sometext" />

效果如下:

mozactionhint.png

参见