From fb2e09a5a9dc0b5b161b37e24f4c20f39a9a78fc Mon Sep 17 00:00:00 2001 From: Will Bamberg Date: Fri, 17 Sep 2021 12:27:15 -0700 Subject: [PATCH] Remove page macro from input element pages --- .../web/html/element/input/email/index.html | 36 +++++++-- files/en-us/web/html/element/input/index.html | 45 +++++++++-- .../web/html/element/input/month/index.html | 4 +- .../web/html/element/input/number/index.html | 22 +++++- .../html/element/input/password/index.html | 24 +++++- .../web/html/element/input/range/index.html | 6 +- .../web/html/element/input/search/index.html | 74 +++++++++++++++--- .../web/html/element/input/tel/index.html | 53 +++++++++++-- .../web/html/element/input/text/index.html | 8 +- .../web/html/element/input/time/index.html | 12 ++- .../web/html/element/input/url/index.html | 75 +++++++++++++++++-- .../web/html/element/input/week/index.html | 8 +- 12 files changed, 310 insertions(+), 57 deletions(-) diff --git a/files/en-us/web/html/element/input/email/index.html b/files/en-us/web/html/element/input/email/index.html index b7b08d8fb5f9f63..a8d3df4431b80f9 100644 --- a/files/en-us/web/html/element/input/email/index.html +++ b/files/en-us/web/html/element/input/email/index.html @@ -104,7 +104,9 @@

Additional attributes

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "attr-list", 0, 1, 2)}}

+

list

+ +

The values of the list attribute is the {{domxref("Element.id", "id")}} of a {{HTMLElement("datalist")}} element located in the same document. The {{HTMLElement("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.

maxlength

@@ -128,15 +130,39 @@

multiple

pattern

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "pattern-include")}}

+

The pattern attribute, when specified, is a regular expression that the input's {{htmlattrxref("value")}} must match in order for the value to pass constraint validation. It must be a valid JavaScript regular expression, as used by the {{jsxref("RegExp")}} type, and as documented in our guide on regular expressions; the 'u' flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text.

+ +

If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored completely.

+ +
+

Note: Use the {{htmlattrxref("title", "input")}} attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You should also include other explanatory text nearby.

+

See the section {{anch("Pattern validation")}} for details and an example.

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "attr-placeholder", 0, 1, 2)}}

+

placeholder

+ +

The placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text must not include carriage returns or line feeds.

+ +

If the control's content has one directionality ({{Glossary("LTR")}} or {{Glossary("RTL")}}) but needs to present the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see {{SectionOnPage("/en-US/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm", "Overriding BiDi using Unicode control characters")}} for those characters.

+ +
+

Note: Avoid using the placeholder attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See {{SectionOnPage("/en-US/docs/Web/HTML/Element/input", "Labels and placeholders")}} for more information.

+
+ +

readonly

+ +

A Boolean attribute which, if present, means this field cannot be edited by the user. Its value can, however, still be changed by JavaScript code directly setting the {{domxref("HTMLInputElement")}} value property.

+ +
+

Note: Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.

+
+ +

size

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "attr-readonly", 0, 1, 2)}}

+

The size attribute is a numeric value indicating how many characters wide the input field should be. The value must be a number greater than zero, and the default value is 20. Since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font ({{cssxref("font")}} settings in use).

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "attr-size", 0, 1, 2)}}

+

This does not set a limit on how many characters the user can enter into the field. It only specifies approximately how many can be seen at a time. To set an upper limit on the length of the input data, use the {{anch("maxlength")}} attribute.

Using email inputs

diff --git a/files/en-us/web/html/element/input/index.html b/files/en-us/web/html/element/input/index.html index e7c358d78e21956..16a2a80fe9af567 100644 --- a/files/en-us/web/html/element/input/index.html +++ b/files/en-us/web/html/element/input/index.html @@ -766,17 +766,50 @@

Non-standard attributes

{{htmlattrdef("autocorrect")}} {{non-standard_inline}}
-
{{page("/en-US/docs/Web/HTML/Element/input/text", "autocorrect-include")}}
+
+

A Safari extension, the autocorrect attribute is a string which indicates whether or not to activate automatic correction while the user is editing this field. Permitted values are:

+ +
+
on
+
Enable automatic correction of typos, as well as processing of text substitutions if any are configured.
+
off
+
Disable automatic correction and text substitutions.
+
+
{{htmlattrdef("incremental")}} {{non-standard_inline}}
-
{{page("/en-US/docs/Web/HTML/Element/input/search", "incremental-include")}}
+
+

The Boolean attribute incremental is a WebKit and Blink extension (so supported by Safari, Opera, Chrome, etc.) which, if present, tells the {{Glossary("user agent")}} to process the input as a live search. As the user edits the value of the field, the user agent sends {{event("search")}} events to the {{domxref("HTMLInputElement")}} object representing the search box. This allows your code to update the search results in real time as the user edits the search.

+ +

If incremental is not specified, the {{event("search")}} event is only sent when the user explicitly initiates a search (such as by pressing the Enter or Return key while editing the field).

+ +

The search event is rate-limited so that it is not sent more frequently than an implementation-defined interval.

+
{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}
-
{{page("/en-US/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}
+
+

A Mozilla extension, supported by Firefox for Android, which provides a hint as to what sort of action will be taken if the user presses the Enter or Return key while editing the field. This information is used to decide what kind of label to use on the Enter key on the virtual keyboard.

+ +
+

Note: This has been standardized as the global attribute {{htmlattrxref("enterkeyhint")}}, but is not yet widely implemented. To see the status of the change being implemented in Firefox, see {{bug(1490661)}}.

+
+ +

Permitted values are: go, done, next, search, and send. The browser decides, using this hint, what label to put on the enter key.

+
{{htmlattrdef("orient")}} {{non-standard_inline}}
-
{{page("/en-US/docs/Web/HTML/Element/input/range", "orient-include")}}
+
+

Similar to the -moz-orient non-standard CSS property impacting the {{htmlelement('progress')}} and {{htmlelement('meter')}} elements, the orient attribute defines the orientation of the range slider. Values include horizontal, meaning the range is rendered horizontally, and vertical, where the range is rendered vertically.

+
{{htmlattrdef("results")}} {{non-standard_inline}}
-
{{page("/en-US/docs/Web/HTML/Element/input/search", "results-include")}}
+
+

The results attribute—supported only by Safari—is a numeric value that lets you override the maximum number of entries to be displayed in the {{HTMLElement("input")}} element's natively-provided drop-down menu of previous search queries.

+ +

The value must be a non-negative decimal number. If not provided, or an invalid value is given, the browser's default maximum number of entries is used.

+
{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}
-
{{page("/en-US/docs/Web/HTML/Element/input/file", "webkitdirectory-include")}}
+
+

The Boolean webkitdirectory attribute, if present, indicates that only directories should be available to be selected by the user in the file picker interface. See {{domxref("HTMLInputElement.webkitdirectory")}} for additional details and examples.

+ +

Though originally implemented only for WebKit-based browsers, webkitdirectory is also usable in Microsoft Edge as well as Firefox 50 and later. However, even though it has relatively broad support, it is still not standard and should not be used unless you have no alternative.

+

Methods

diff --git a/files/en-us/web/html/element/input/month/index.html b/files/en-us/web/html/element/input/month/index.html index d39361d0f824ac1..c90852dd32fc575 100644 --- a/files/en-us/web/html/element/input/month/index.html +++ b/files/en-us/web/html/element/input/month/index.html @@ -122,7 +122,9 @@

Additional attributes

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "attr-list", 0, 1, 2)}}

+

list

+ +

The values of the list attribute is the {{domxref("Element.id", "id")}} of a {{HTMLElement("datalist")}} element located in the same document. The {{HTMLElement("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.

max

diff --git a/files/en-us/web/html/element/input/number/index.html b/files/en-us/web/html/element/input/number/index.html index 22c6c71ef3f87e4..47b21f12af6b4ba 100644 --- a/files/en-us/web/html/element/input/number/index.html +++ b/files/en-us/web/html/element/input/number/index.html @@ -95,7 +95,9 @@

Additional attributes

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "attr-list", 0, 1, 2)}}

+

list

+ +

The values of the list attribute is the {{domxref("Element.id", "id")}} of a {{HTMLElement("datalist")}} element located in the same document. The {{HTMLElement("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.

max

@@ -109,9 +111,23 @@

min

This value must be less than or equal to the value of the max attribute.

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "attr-placeholder", 0, 1, 2)}}

+

placeholder

+ +

The placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text must not include carriage returns or line feeds.

+ +

If the control's content has one directionality ({{Glossary("LTR")}} or {{Glossary("RTL")}}) but needs to present the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see {{SectionOnPage("/en-US/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm", "Overriding BiDi using Unicode control characters")}} for those characters.

+ +
+

Note: Avoid using the placeholder attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See {{SectionOnPage("/en-US/docs/Web/HTML/Element/input", "Labels and placeholders")}} for more information.

+
+ +

readonly

+ +

A Boolean attribute which, if present, means this field cannot be edited by the user. Its value can, however, still be changed by JavaScript code directly setting the {{domxref("HTMLInputElement")}} value property.

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "attr-readonly", 0, 1, 2)}}

+
+

Note: Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.

+

step

diff --git a/files/en-us/web/html/element/input/password/index.html b/files/en-us/web/html/element/input/password/index.html index 52b20a65cb08e62..03e5d1a50562cee 100644 --- a/files/en-us/web/html/element/input/password/index.html +++ b/files/en-us/web/html/element/input/password/index.html @@ -118,11 +118,25 @@

minlength

pattern

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "pattern-include")}}

+

The pattern attribute, when specified, is a regular expression that the input's {{htmlattrxref("value")}} must match in order for the value to pass constraint validation. It must be a valid JavaScript regular expression, as used by the {{jsxref("RegExp")}} type, and as documented in our guide on regular expressions; the 'u' flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text.

+ +

If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored completely.

+ +
+

Note: Use the {{htmlattrxref("title", "input")}} attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You should also include other explanatory text nearby.

+

Use of a pattern is strongly recommended for password inputs, in order to help ensure that valid passwords using a wide assortment of character classes are selected and used by your users. With a pattern, you can mandate case rules, require the use of some number of digits and/or punctuation characters, and so forth. See the section {{anch("Validation")}} for details and an example.

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "attr-placeholder", 0, 1, 2)}}

+

placeholder

+ +

The placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text must not include carriage returns or line feeds.

+ +

If the control's content has one directionality ({{Glossary("LTR")}} or {{Glossary("RTL")}}) but needs to present the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see {{SectionOnPage("/en-US/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm", "Overriding BiDi using Unicode control characters")}} for those characters.

+ +
+

Note: Avoid using the placeholder attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See {{SectionOnPage("/en-US/docs/Web/HTML/Element/input", "Labels and placeholders")}} for more information.

+

readonly

@@ -132,7 +146,11 @@

readonly

Note: Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "attr-size", 0, 1, 2)}}

+

size

+ +

The size attribute is a numeric value indicating how many characters wide the input field should be. The value must be a number greater than zero, and the default value is 20. Since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font ({{cssxref("font")}} settings in use).

+ +

This does not set a limit on how many characters the user can enter into the field. It only specifies approximately how many can be seen at a time. To set an upper limit on the length of the input data, use the {{anch("maxlength")}} attribute.

Using password inputs

diff --git a/files/en-us/web/html/element/input/range/index.html b/files/en-us/web/html/element/input/range/index.html index bde7ad13af930c0..d3f1c626962e307 100644 --- a/files/en-us/web/html/element/input/range/index.html +++ b/files/en-us/web/html/element/input/range/index.html @@ -100,7 +100,9 @@

Additional attributes

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "attr-list", 0, 1, 2)}}

+

list

+ +

The values of the list attribute is the {{domxref("Element.id", "id")}} of a {{HTMLElement("datalist")}} element located in the same document. The {{HTMLElement("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.

See the range control with hash marks below for an example of how the options on a range are denoted in supported browsers.

@@ -147,7 +149,7 @@

Non Standard Attributes

orient {{non-standard_inline}}

-

Similar to the -moz-orient non-standard CSS property impacting the {{htmlelement('progress')}} and {{htmlelement('meter')}} elements, the orient attribute defines the orientation of the range slider. Values include horizontal, meaning the range is rendered horizontally, and vertical, where the range is rendered vertically.

+

Similar to the -moz-orient non-standard CSS property impacting the {{htmlelement('progress')}} and {{htmlelement('meter')}} elements, the orient attribute defines the orientation of the range slider. Values include horizontal, meaning the range is rendered horizontally, and vertical, where the range is rendered vertically.

Note: The following input attributes do not apply to the input range: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, minlength, multiple, pattern, placeholder, readonly, required, size, src, and width. Any of these attributes, if included, will be ignored.

diff --git a/files/en-us/web/html/element/input/search/index.html b/files/en-us/web/html/element/input/search/index.html index c162f4242200900..df1b625703a0ea0 100644 --- a/files/en-us/web/html/element/input/search/index.html +++ b/files/en-us/web/html/element/input/search/index.html @@ -98,7 +98,9 @@

Additional attributes

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "attr-list", 0, 1, 2)}}

+

list

+ +

The values of the list attribute is the {{domxref("Element.id", "id")}} of a {{HTMLElement("datalist")}} element located in the same document. The {{HTMLElement("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.

maxlength

@@ -114,17 +116,56 @@

minlength

pattern

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "pattern-include")}}

+

The pattern attribute, when specified, is a regular expression that the input's {{htmlattrxref("value")}} must match in order for the value to pass constraint validation. It must be a valid JavaScript regular expression, as used by the {{jsxref("RegExp")}} type, and as documented in our guide on regular expressions; the 'u' flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text.

+ +

If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored completely.

+ +
+

Note: Use the {{htmlattrxref("title", "input")}} attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You should also include other explanatory text nearby.

+

See the section {{anch("Specifying a pattern")}} for details and an example.

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "attr-placeholder", 0, 1, 2)}}

+

placeholder

+ +

The placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text must not include carriage returns or line feeds.

+ +

If the control's content has one directionality ({{Glossary("LTR")}} or {{Glossary("RTL")}}) but needs to present the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see {{SectionOnPage("/en-US/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm", "Overriding BiDi using Unicode control characters")}} for those characters.

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "attr-readonly", 0, 1, 2)}}

+
+

Note: Avoid using the placeholder attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See {{SectionOnPage("/en-US/docs/Web/HTML/Element/input", "Labels and placeholders")}} for more information.

+
+ +

readonly

+ +

A Boolean attribute which, if present, means this field cannot be edited by the user. Its value can, however, still be changed by JavaScript code directly setting the {{domxref("HTMLInputElement")}} value property.

+ +
+

Note: Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.

+
-

{{page("/en-US/docs/Web/HTML/Element/input/text", "attr-size", 0, 1, 2)}}

+

size

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "attr-spellcheck", 0, 1, 2)}}

+

The size attribute is a numeric value indicating how many characters wide the input field should be. The value must be a number greater than zero, and the default value is 20. Since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font ({{cssxref("font")}} settings in use).

+ +

This does not set a limit on how many characters the user can enter into the field. It only specifies approximately how many can be seen at a time. To set an upper limit on the length of the input data, use the {{anch("maxlength")}} attribute.

+ +

spellcheck

+ +

spellcheck is a global attribute which is used to indicate whether or not to enable spell checking for an element. It can be used on any editable content, but here we consider specifics related to the use of spellcheck on {{HTMLElement("input")}} elements. The permitted values for spellcheck are:

+ +
+
false
+
Disable spell checking for this element.
+
true
+
Enable spell checking for this element.
+
"" (empty string) or no value
+
Follow the element's default behavior for spell checking. This may be based upon a parent's spellcheck setting or other factors.
+
+ +

An input field can have spell checking enabled if it doesn't have the {{anch("readonly")}} attribute set and is not disabled.

+ +

The value returned by reading spellcheck may not reflect the actual state of spell checking within a control, if the {{Glossary("user agent", "user agent's")}} preferences override the setting.

Non-standard attributes

@@ -159,29 +200,38 @@

Non-standard attributes

autocorrect> {{non-standard_inline}}

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "autocorrect-include")}}

+

A Safari extension, the autocorrect attribute is a string which indicates whether or not to activate automatic correction while the user is editing this field. Permitted values are:

+ +
+
on
+
Enable automatic correction of typos, as well as processing of text substitutions if any are configured.
+
off
+
Disable automatic correction and text substitutions.
+

incremental {{non-standard_inline}}

-

The Boolean attribute incremental is a WebKit and Blink extension (so supported by Safari, Opera, Chrome, etc.) which, if present, tells the {{Glossary("user agent")}} to process the input as a live search. As the user edits the value of the field, the user agent sends {{event("search")}} events to the {{domxref("HTMLInputElement")}} object representing the search box. This allows your code to update the search results in real time as the user edits the search.

If incremental is not specified, the {{event("search")}} event is only sent when the user explicitly initiates a search (such as by pressing the Enter or Return key while editing the field).

The search event is rate-limited so that it is not sent more frequently than an implementation-defined interval.

-

mozactionhint {{non-standard_inline}}

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}

+

A Mozilla extension, supported by Firefox for Android, which provides a hint as to what sort of action will be taken if the user presses the Enter or Return key while editing the field. This information is used to decide what kind of label to use on the Enter key on the virtual keyboard.

+ +
+

Note: This has been standardized as the global attribute {{htmlattrxref("enterkeyhint")}}, but is not yet widely implemented. To see the status of the change being implemented in Firefox, see {{bug(1490661)}}.

+
+ +

Permitted values are: go, done, next, search, and send. The browser decides, using this hint, what label to put on the enter key.

results {{non-standard_inline}}

-

The results attribute—supported only by Safari—is a numeric value that lets you override the maximum number of entries to be displayed in the {{HTMLElement("input")}} element's natively-provided drop-down menu of previous search queries.

The value must be a non-negative decimal number. If not provided, or an invalid value is given, the browser's default maximum number of entries is used.

-

Using search inputs

diff --git a/files/en-us/web/html/element/input/tel/index.html b/files/en-us/web/html/element/input/tel/index.html index df7b84b0471cf8b..71406f1b7811798 100644 --- a/files/en-us/web/html/element/input/tel/index.html +++ b/files/en-us/web/html/element/input/tel/index.html @@ -99,7 +99,9 @@

Additional attributes

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "attr-list", 0, 1, 2)}}

+

list

+ +

The values of the list attribute is the {{domxref("Element.id", "id")}} of a {{HTMLElement("datalist")}} element located in the same document. The {{HTMLElement("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.

maxlength>

@@ -115,15 +117,39 @@

minlength

pattern

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "pattern-include")}}

+

The pattern attribute, when specified, is a regular expression that the input's {{htmlattrxref("value")}} must match in order for the value to pass constraint validation. It must be a valid JavaScript regular expression, as used by the {{jsxref("RegExp")}} type, and as documented in our guide on regular expressions; the 'u' flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text.

+ +

If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored completely.

+ +
+

Note: Use the {{htmlattrxref("title", "input")}} attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You should also include other explanatory text nearby.

+

See {{anch("Pattern validation")}} below for details and an example.

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "attr-placeholder", 0, 1, 2)}}

+

placeholder

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "attr-readonly", 0, 1, 2)}}

+

The placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text must not include carriage returns or line feeds.

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "attr-size", 0, 1, 2)}}

+

If the control's content has one directionality ({{Glossary("LTR")}} or {{Glossary("RTL")}}) but needs to present the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see {{SectionOnPage("/en-US/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm", "Overriding BiDi using Unicode control characters")}} for those characters.

+ +
+

Note: Avoid using the placeholder attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See {{SectionOnPage("/en-US/docs/Web/HTML/Element/input", "Labels and placeholders")}} for more information.

+
+ +

readonly

+ +

A Boolean attribute which, if present, means this field cannot be edited by the user. Its value can, however, still be changed by JavaScript code directly setting the {{domxref("HTMLInputElement")}} value property.

+ +
+

Note: Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.

+
+ +

size

+ +

The size attribute is a numeric value indicating how many characters wide the input field should be. The value must be a number greater than zero, and the default value is 20. Since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font ({{cssxref("font")}} settings in use).

+ +

This does not set a limit on how many characters the user can enter into the field. It only specifies approximately how many can be seen at a time. To set an upper limit on the length of the input data, use the {{anch("maxlength")}} attribute.

Non-standard attributes

@@ -150,11 +176,24 @@

Non-standard attributes

autocorrect {{non-standard_inline}}

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "autocorrect-include")}}

+

A Safari extension, the autocorrect attribute is a string which indicates whether or not to activate automatic correction while the user is editing this field. Permitted values are:

+ +
+
on
+
Enable automatic correction of typos, as well as processing of text substitutions if any are configured.
+
off
+
Disable automatic correction and text substitutions.
+

mozactionhint {{non-standard_inline}}

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}

+

A Mozilla extension, supported by Firefox for Android, which provides a hint as to what sort of action will be taken if the user presses the Enter or Return key while editing the field. This information is used to decide what kind of label to use on the Enter key on the virtual keyboard.

+ +
+

Note: This has been standardized as the global attribute {{htmlattrxref("enterkeyhint")}}, but is not yet widely implemented. To see the status of the change being implemented in Firefox, see {{bug(1490661)}}.

+
+ +

Permitted values are: go, done, next, search, and send. The browser decides, using this hint, what label to put on the enter key.

Using tel inputs

diff --git a/files/en-us/web/html/element/input/text/index.html b/files/en-us/web/html/element/input/text/index.html index 9a8d94de4f30a25..fb5647da63b461a 100644 --- a/files/en-us/web/html/element/input/text/index.html +++ b/files/en-us/web/html/element/input/text/index.html @@ -119,14 +119,12 @@

minlength

pattern

-

The pattern attribute, when specified, is a regular expression that the input's {{htmlattrxref("value")}} must match in order for the value to pass constraint validation. It must be a valid JavaScript regular expression, as used by the {{jsxref("RegExp")}} type, and as documented in our guide on regular expressions; the 'u' flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text.

If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored completely.

-

Tip: Use the {{htmlattrxref("title", "input")}} attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You should also include other explanatory text nearby.

-
+

Note: Use the {{htmlattrxref("title", "input")}} attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You should also include other explanatory text nearby.

See {{anch("Specifying a pattern")}} for further details and an example.

@@ -197,7 +195,6 @@

Non-standard attributes

autocorrect {{non-standard_inline}}

-

A Safari extension, the autocorrect attribute is a string which indicates whether or not to activate automatic correction while the user is editing this field. Permitted values are:

@@ -206,11 +203,9 @@

autocorrect {{non-standa
off
Disable automatic correction and text substitutions.

-

mozactionhint {{non-standard_inline}}

-

A Mozilla extension, supported by Firefox for Android, which provides a hint as to what sort of action will be taken if the user presses the Enter or Return key while editing the field. This information is used to decide what kind of label to use on the Enter key on the virtual keyboard.

@@ -218,7 +213,6 @@

mozactionhint {{non-

Permitted values are: go, done, next, search, and send. The browser decides, using this hint, what label to put on the enter key.

-

Using text inputs

diff --git a/files/en-us/web/html/element/input/time/index.html b/files/en-us/web/html/element/input/time/index.html index 6e9c36e78530022..700a3b0c08efbbe 100644 --- a/files/en-us/web/html/element/input/time/index.html +++ b/files/en-us/web/html/element/input/time/index.html @@ -161,7 +161,9 @@

Note

href="#making_min_and_max_cross_midnight">making min and max cross midnight section of this article.

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "attr-list", 0, 1, 2)}}

+

list

+ +

The values of the list attribute is the {{domxref("Element.id", "id")}} of a {{HTMLElement("datalist")}} element located in the same document. The {{HTMLElement("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.

max

@@ -171,7 +173,13 @@

min

A string specifying the earliest time to accept, given in the {{anch("Time value format", "time value format")}} described previously. If the value specified isn't a valid time string, no minimum value is set.

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "attr-readonly", 0, 1, 2)}}

+

readonly

+ +

A Boolean attribute which, if present, means this field cannot be edited by the user. Its value can, however, still be changed by JavaScript code directly setting the {{domxref("HTMLInputElement")}} value property.

+ +
+

Note: Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.

+

step

diff --git a/files/en-us/web/html/element/input/url/index.html b/files/en-us/web/html/element/input/url/index.html index 87ec4c4bbdd6fe5..c62b2becc89da33 100644 --- a/files/en-us/web/html/element/input/url/index.html +++ b/files/en-us/web/html/element/input/url/index.html @@ -110,7 +110,9 @@

Additional attributes

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "attr-list", 0, 1, 2)}}

+

list

+ +

The values of the list attribute is the {{domxref("Element.id", "id")}} of a {{HTMLElement("datalist")}} element located in the same document. The {{HTMLElement("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.

maxlength

@@ -126,17 +128,57 @@

minlength

pattern

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "pattern-include")}}

+

The pattern attribute, when specified, is a regular expression that the input's {{htmlattrxref("value")}} must match in order for the value to pass constraint validation. It must be a valid JavaScript regular expression, as used by the {{jsxref("RegExp")}} type, and as documented in our guide on regular expressions; the 'u' flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text.

+ +

If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored completely.

+ +
+

Note: Use the {{htmlattrxref("title", "input")}} attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You should also include other explanatory text nearby.

+

See the section {{anch("Pattern validation")}} for details and an example.

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "attr-placeholder", 0, 1, 2)}}

+

placeholder

+ +

The placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text must not include carriage returns or line feeds.

+ +

If the control's content has one directionality ({{Glossary("LTR")}} or {{Glossary("RTL")}}) but needs to present the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see {{SectionOnPage("/en-US/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm", "Overriding BiDi using Unicode control characters")}} for those characters.

+ +
+

Note: Avoid using the placeholder attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See {{SectionOnPage("/en-US/docs/Web/HTML/Element/input", "Labels and placeholders")}} for more information.

+
+ +

readonly

+ +

A Boolean attribute which, if present, means this field cannot be edited by the user. Its value can, however, still be changed by JavaScript code directly setting the {{domxref("HTMLInputElement")}} value property.

+ +
+

Note: Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.

+
+ +

size

+ +

The size attribute is a numeric value indicating how many characters wide the input field should be. The value must be a number greater than zero, and the default value is 20. Since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font ({{cssxref("font")}} settings in use).

+ +

This does not set a limit on how many characters the user can enter into the field. It only specifies approximately how many can be seen at a time. To set an upper limit on the length of the input data, use the {{anch("maxlength")}} attribute.

+ + +

spellcheck

+ +

spellcheck is a global attribute which is used to indicate whether or not to enable spell checking for an element. It can be used on any editable content, but here we consider specifics related to the use of spellcheck on {{HTMLElement("input")}} elements. The permitted values for spellcheck are:

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "attr-readonly", 0, 1, 2)}}

+
+
false
+
Disable spell checking for this element.
+
true
+
Enable spell checking for this element.
+
"" (empty string) or no value
+
Follow the element's default behavior for spell checking. This may be based upon a parent's spellcheck setting or other factors.
+
-

{{page("/en-US/docs/Web/HTML/Element/input/text", "attr-size", 0, 1, 2)}}

+

An input field can have spell checking enabled if it doesn't have the {{anch("readonly")}} attribute set and is not disabled.

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "attr-spellcheck", 0, 1, 2)}}

+

The value returned by reading spellcheck may not reflect the actual state of spell checking within a control, if the {{Glossary("user agent", "user agent's")}} preferences override the setting.

Non-standard attributes

@@ -161,9 +203,26 @@

Non-standard attributes

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "attr-autocorrect", 0, 1, 2)}}

+

autocorrect {{non-standard_inline}}

+ +

A Safari extension, the autocorrect attribute is a string which indicates whether or not to activate automatic correction while the user is editing this field. Permitted values are:

+ +
+
on
+
Enable automatic correction of typos, as well as processing of text substitutions if any are configured.
+
off
+
Disable automatic correction and text substitutions.
+
+ +

mozactionhint {{non-standard_inline}}

+ +

A Mozilla extension, supported by Firefox for Android, which provides a hint as to what sort of action will be taken if the user presses the Enter or Return key while editing the field. This information is used to decide what kind of label to use on the Enter key on the virtual keyboard.

+ +
+

Note: This has been standardized as the global attribute {{htmlattrxref("enterkeyhint")}}, but is not yet widely implemented. To see the status of the change being implemented in Firefox, see {{bug(1490661)}}.

+
-

{{page("/en-US/docs/Web/HTML/Element/input/text", "attr-mozactionhint", 0, 1, 2)}}

+

Permitted values are: go, done, next, search, and send. The browser decides, using this hint, what label to put on the enter key.

Using URL inputs

diff --git a/files/en-us/web/html/element/input/week/index.html b/files/en-us/web/html/element/input/week/index.html index 0b12c4dc7244cf3..367c57815bac837 100644 --- a/files/en-us/web/html/element/input/week/index.html +++ b/files/en-us/web/html/element/input/week/index.html @@ -119,7 +119,13 @@

min

This value must be less than or equal to the value of the max attribute.

-

{{page("/en-US/docs/Web/HTML/Element/input/text", "attr-readonly", 0, 1, 2)}}

+

readonly

+ +

A Boolean attribute which, if present, means this field cannot be edited by the user. Its value can, however, still be changed by JavaScript code directly setting the {{domxref("HTMLInputElement")}} value property.

+ +
+

Note: Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.

+

step