Атрибут controls в HTML


Содержание
Otherwise, if element has an ancestor form element, then associate element with the nearest such ancestor form element. In the following non-conforming snippet: Since the input name takes precedence over built-in form properties, the JavaScript reference form.method will point to the input element named «method» instead of the built-in method property. 4.10.18.2 Submitting element directionality: the dirname attribute The attribute on a form control element enables the submission of the directionality of the element, and gives the name of the control that contains this value during form submission. If such an attribute is specified, its value must not be the empty string. In this example, a form contains a text control and a submission button: When the user submits the form, the user agent includes three fields, one called «comment», one called «comment.dir», and one called «mode»; so if the user types «Hello», the submission body might be something like: If the user manually switches to a right-to-left writing direction and enters » مرحبا «, the submission body might be something like: 4.10.18.3 Limiting user input length: the maxlength attribute A , controlled by the dirty value flag, declares a limit on the number of characters a user can input. The «number of characters» is measured using JavaScript string length and, in the case of textarea elements, with all newlines normalized to a single character (as opposed to CRLF pairs). If an element has its form control maxlength attribute specified, the attribute’s value must be a valid non-negative integer. If the attribute is specified and applying the rules for parsing non-negative integers to its value results in a number, then that number is the element’s . If the attribute is omitted or parsing its value results in an error, then there is no maximum allowed value length. Constraint validation: If an element has a maximum allowed value length, its dirty value flag is true, its value was last changed by a user edit (as opposed to a change made by a script), and the JavaScript string length of the element’s API value is greater than the element’s maximum allowed value length, then the element is suffering from being too long. User agents may prevent the user from causing the element’s API value to be set to a value whose JavaScript string length is greater than the element’s maximum allowed value length. In the case of textarea elements, the API value and value differ. In particular, newline normalization is applied before the maximum allowed value length is checked (whereas the textarea wrapping transformation is not applied). 4.10.18.4 Setting minimum input length requirements: the minlength attribute A , controlled by the dirty value flag, declares a lower bound on the number of characters a user can input. The «number of characters» is measured using JavaScript string length and, in the case of textarea elements, with all newlines normalized to a single character (as opposed to CRLF pairs). The minlength attribute does not imply the required attribute. If the form control has no required attribute, then the value can still be omitted; the minlength attribute only kicks in once the user has entered a value at all. If the empty string is not allowed, then the required attribute also needs to be set. If an element has its form control minlength attribute specified, the attribute’s value must be a valid non-negative integer. If the attribute is specified and applying the rules for parsing non-negative integers to its value results in a number, then that number is the element’s . If the attribute is omitted or parsing its value results in an error, then there is no minimum allowed value length. Constraint validation: If an element has a minimum allowed value length, its dirty value flag is true, its value was last changed by a user edit (as opposed to a change made by a script), its value is not the empty string, and the JavaScript string length of the element’s API value is less than the element’s minimum allowed value length, then the element is suffering from being too short. In this example, there are four text controls. The first is required, and has to be at least 5 characters long. The other three are optional, but if the user fills one in, the user has to enter at least 10 characters. 4.10.18.5 Enabling and disabling form controls: the disabled attribute The content attribute is a boolean attribute. The disabled attribute for option elements and the disabled attribute for optgroup elements are defined separately. A form control is if any of the following conditions are met: The element is a button , input , select , textarea , or form-associated custom element, and the disabled attribute is specified on this element (regardless of its value). The element is a descendant of a fieldset element whose disabled attribute is specified, and is not a descendant of that fieldset element’s first legend element child, if any. A form control that is disabled must prevent any click events that are queued on the user interaction task source from being dispatched on the element. Constraint validation: If an element is disabled, it is barred from constraint validation. Chrome Yes Chrome Android Yes Edge 12+ Edge Mobile ? Firefox Yes Firefox Android Yes Internet Explorer 9+ Opera 9+ Opera Android Yes Safari Yes Safari iOS Yes Samsung Internet Yes WebView Android Yes The >disabled content attribute. 4.10.18.6 Form submission can be specified both on form elements and on submit buttons (elements that represent buttons that submit forms, e.g. an input element whose type attribute is in the Submit Button state). Support: form-submit-attributes Chrome for Android 78+ Chrome 15+ iOS Safari 5.0+ Firefox 4+ Samsung Internet 4+ UC Browser for Android 12.12+ Safari 5.1+ IE 10+ Edge 12+ Opera Mini all+ Opera 10.6+ Android Browser 4+ The corresponding attributes for form submission that may be specified on submit buttons are formaction , formenctype , formmethod , formnovalidate , and formtarget . When omitted, they default to the values given on the corresponding attributes on the form element. The and content attributes, if specified, must have a value that is a valid non-empty URL potentially surrounded by spaces. The of an element is the value of the element’s formaction attribute, if the element is a submit button and has such an attribute, or the value of its form owner’s action attribute, if it has one, or else the empty string. The and content attributes are enumerated attributes with the following keywords and states: The keyword , mapping to the state , indicating the HTTP GET method. The keyword , mapping to the state , indicating the HTTP POST method. The keyword , mapping to the state , indicating that submitting the form is intended to close the dialog box in which the form finds itself, if any, and otherwise not submit. The of an element is one of those states. If the element is a submit button and has a formmethod attribute, then the element’s method is that attribute’s state; otherwise, it is the form owner’s method attribute’s state. Here the method attribute is used to explicitly specify the default value, » get «, so that the search query is submitted in the URL: On the other hand, here the method attribute is used to specify the value » post «, so that the user’s message is submitted in the HTTP request’s body: In this example, a form is used with a dialog . The method attribute’s » dialog » keyword is used to have the dialog automatically close when the form is submitted. The and content attributes are enumerated attributes with the following keywords and states: The «» keyword and corresponding state. The «» keyword and corresponding state. The «» keyword and corresponding state. The of an element is one of those three states. If the element is a submit button and has a formenctype attribute, then the element’s enctype is that attribute’s state; otherwise, it is the form owner’s enctype attribute’s state. The and content attributes, if specified, must have values that are valid browsing context names or keywords. The and content attributes are boolean attributes. If present, they indicate that the form is not to be validated during submission. The of an element is true if the element is a submit button and the element’s formnovalidate attribute is present, or if the element’s form owner’s novalidate attribute is present, and false otherwise. This attribute is useful to include «save» buttons on forms that have validation constraints, to allow users to save their progress even though they haven’t fully entered the data in the form. The following example shows a simple form that has two required fields. There are three buttons: one to submit the form, which requires both fields to be filled in; one to save the form so that the user can come back and fill it in later; and one to cancel the form altogether. The >enctype content attribute, limited to only known values. The >novalidate content attribute. The >formaction content attribute, except that on getting, when the content attribute is missing or its value is the empty string, the element’s node document’s URL must be returned instead. The >formenctype content attribute, limited to only known values. The >formmethod content attribute, limited to only known values. The >formnovalidate content attribute. The >formtarget content attribute. 4.10.18.7 Autofill Support: input-autocomplete-onoff Chrome for Android 78+ Chrome (limited) 27+ iOS Safari 5.0+ Firefox (limited) 30+ Samsung Internet 4+ UC Browser for Android 12.12+ Safari (limited) 7+ IE (limited) 11+ Edge (limited) 12+ Opera Mini all+ Opera 9+ Android Browser 2.1+ 4.10.18.7.1 Autofilling form controls: the autocomplete attribute User agents sometimes have features for helping users fill forms in, for example prefilling the user’s address based on earlier user input. The content attribute can be used to hint to the user agent how to, or indeed whether to, provide such a feature. There are two ways this attribute is used. When wearing the , the autocomplete attribute describes what input is expected from users. When wearing the , the autocomplete attribute describes the meaning of the given value. On an input element whose type attribute is in the H >autocomplete attribute wears the autofill anchor mantle. In all other cases, it wears the autofill expectation mantle. When wearing the autofill expectation mantle, the autocomplete attribute, if specified, must have a value that is an ordered set of space-separated tokens consisting of either a single token that is an ASCII case-insensitive match for the string » off «, or a single token that is an ASCII case-insensitive match for the string » on «, or autofill detail tokens. When wearing the autofill anchor mantle, the autocomplete attribute, if specified, must have a value that is an ordered set of space-separated tokens consisting of just autofill detail tokens (i.e. the » on » and » off » keywords are not allowed). are the following, in the order given below: Optionally, a token whose first eight characters are an ASCII case-insensitive match for the string «», meaning that the field belongs to the named group. For example, if there are two shipping addresses in the form, then they could be marked up as: Optionally, a token that is an ASCII case-insensitive match for one of the following strings: «», meaning the field is part of the shipping address or contact information «», meaning the field is part of the billing address or contact information Either of the following two options: A token that is an ASCII case-insensitive match for one of the following autofill field names, excluding those that are inappropriate for the control: (See the table below for descriptions of these values.) The following, in the given order: Optionally, a token that is an ASCII case-insensitive match for one of the following strings: «», meaning the field is for contacting someone at their residence «», meaning the field is for contacting someone at their workplace «», meaning the field is for contacting someone regardless of location «», meaning the field describes a fax machine’s contact details «», meaning the field describes a pager’s or beeper’s contact details A token that is an ASCII case-insensitive match for one of the following autofill field names, excluding those that are inappropriate for the control: (See the table below for descriptions of these values.) As noted earlier, the meaning of the attribute and its keywords depends on the mantle that the attribute is wearing. The «» keyword indicates either that the control’s input data is particularly sensitive (for example the activation code for a nuclear weapon); or that it is a value that will never be reused (for example a one-time-key for a bank login) and the user will therefore have to explicitly enter the data each time, instead of being able to rely on the UA to prefill the value for them; or that the document provides its own autocomplete mechanism and does not want the user agent to provide autocompletion values. The «» keyword indicates that the user agent is allowed to provide the user with autocompletion values, but does not provide any further information about what kind of data the user might be expected to enter. User agents would have to use heuristics to decide what autocompletion values to suggest. The autofill field listed above indicate that the user agent is allowed to provide the user with autocompletion values, and specifies what kind of value is expected. The meaning of each such keyword is described in the table below. If the autocomplete attribute is omitted, the default value corresponding to the state of the element’s form owner’s autocomplete attribute is used instead (either » on » or » off «). If there is no form owner, then the value » on » is used. The autofill field listed above indicate that the value of the particular kind of value specified is that value provided for this element. The meaning of each such keyword is described in the table below. In this example the page has explicitly specified the currency and amount of the transaction. The form requests a credit card and other billing details. The user agent could use this information to suggest a credit card that it knows has sufficient balance and that supports the relevant currency. The keywords relate to each other as described in the table below. Each field name listed on a row of this table corresponds to the meaning given in the cell for that row in the column labeled «Meaning». Some fields correspond to subparts of other fields; for example, a credit card expiry date can be expressed as one field giving both the month and year of expiry (» cc-exp «), or as two fields, one giving the month (» cc-exp-month «) and one the year (» cc-exp-year «). In such cases, the names of the broader fields cover multiple rows, in which the narrower fields are defined. Generally, authors are encouraged to use the broader fields rather than the narrower fields, as the narrower fields tend to expose Western biases. For example, while it is common in some Western cultures to have a given name and a family name, in that order (and thus often referred to as a first name and a surname), many cultures put the family name first and the given name second, and many others simply have one name (a mononym). Having a single field is therefore more flexible. Some fields are only appropriate for certain form controls. An autofill field name is if the control does not belong to the group listed for that autofill field in the fifth column of the first row describing that autofill field in the table below. What controls fall into each group is described below the table. Field name Meaning Canonical Format Canonical Format Example Control group «» Full name Free-form text, no newlines Sir Timothy John Berners-Lee, OM, KBE, FRS, FREng, FRSA Text «» Prefix or title (e.g. «Mr.», «Ms.», «Dr.», » M lle «) Free-form text, no newlines Sir Text «» Given name (in some Western cultures, also known as the first name) Free-form text, no newlines Timothy Text «» Additional names (in some Western cultures, also known as middle names, forenames other than the first name) Free-form text, no newlines John Text «» Family name (in some Western cultures, also known as the last name or surname) Free-form text, no newlines Berners-Lee Text «» Suffix (e.g. «Jr.», «B.Sc.», «MBASW», «II») Free-form text, no newlines OM, KBE, FRS, FREng, FRSA Text «» Nickname, screen name, handle: a typically short name used instead of the full name Free-form text, no newlines Tim Text «» Job title (e.g. «Software Engineer», «Senior Vice President», «Deputy Managing Director») Free-form text, no newlines Professor Text «» A username Free-form text, no newlines timbl Text «» A new password (e.g. when creating an account or changing a password) Free-form text, no newlines GUMFXbadyrS3 Password «» The current password for the account >username field (e.g. when logging in) Free-form text, no newlines qwerty Password «» One-time code used for verifying user identity Free-form text, no newlines 123456 Password «» Company name corresponding to the person, address, or contact information in the other fields associated with this field Free-form text, no newlines World Wide Web Consortium Text «» Street address (multiple lines, newlines preserved) Free-form text 32 Vassar Street MIT Room 32-G524 Multiline «» Street address (one line per field) Free-form text, no newlines 32 Vassar Street Text «» Free-form text, no newlines MIT Room 32-G524 Text «» Free-form text, no newlines Text «» The most fine-grained administrative level, in addresses with four administrative levels Free-form text, no newlines Text «» The third administrative level, in addresses with three or more administrative levels Free-form text, no newlines Text «» The second administrative level, in addresses with two or more administrative levels; in the countries with two administrative levels, this would typically be the city, town, village, or other locality within which the relevant street address is found Free-form text, no newlines Cambridge Text «» The broadest administrative level in the address, i.e. the province within which the locality is found; for example, in the US, this would be the state; in Switzerland it would be the canton; in the UK, the post town Free-form text, no newlines MA Text «» Country code Valid ISO 3166-1-alpha-2 country code [ISO3166] US Text «» Country name Free-form text, no newlines; derived from country in some cases US Text «» Postal code, post code, ZIP code, CEDEX code (if CEDEX, append «CEDEX», and the arrondissement, if relevant, to the address-level2 field) Free-form text, no newlines 02139 Text «» Full name as given on the payment instrument Free-form text, no newlines Tim Berners-Lee Text «» Given name as given on the payment instrument (in some Western cultures, also known as the first name) Free-form text, no newlines Tim Text «» Additional names given on the payment instrument (in some Western cultures, also known as middle names, forenames other than the first name) Free-form text, no newlines Text «» Family name given on the payment instrument (in some Western cultures, also known as the last name or surname) Free-form text, no newlines Berners-Lee Text «» Code identifying the payment instrument (e.g. the credit card number) ASCII digits 4114360123456785 Text «» Expiration date of the payment instrument Valid month string 2014-12 Month «» Month component of the expiration date of the payment instrument Valid integer in the range 1..12 12 Numeric «» Year component of the expiration date of the payment instrument Valid integer greater than zero 2014 Numeric «» Security code for the payment instrument (also known as the card security code (CSC), card validation code (CVC), card verification value (CVV), signature panel code (SPC), credit card ID (CCID), etc) ASCII digits 419 Text «» Type of payment instrument Free-form text, no newlines Visa Text «» The currency that the user would prefer the transaction to use ISO 4217 currency code [ISO4217] GBP Text «» The amount that the user would like for the transaction (e.g. when entering a bid or sale price) Valid floating-point number 401.00 Numeric «» Preferred language Valid BCP 47 language tag [BCP47] en Text «» Birthday Valid date string 1955-06-08 Date «» Day component of birthday Valid integer in the range 1..31 8 Numeric «» Month component of birthday Valid integer in the range 1..12 6 Numeric «» Year component of birthday Valid integer greater than zero 1955 Numeric «» Gender identity (e.g. Female, Fa’afafine) Free-form text, no newlines Male Text «» Home page or other Web page corresponding to the company, person, address, or contact information in the other fields associated with this field Valid URL string https://www.w3.org/People/Berners-Lee/ URL «» Photograph, icon, or other image corresponding to the company, person, address, or contact information in the other fields associated with this field Valid URL string https://www.w3.org/Press/Stock/Berners-Lee/2001-europaeum-eighth.jpg URL «» Full telephone number, including country code ASCII digits and U+0020 SPACE characters, prefixed by a U+002B PLUS SIGN character (+) +1 617 253 5702 Tel «» Country code component of the telephone number ASCII digits prefixed by a U+002B PLUS SIGN character (+) +1 Text «» Telephone number without the county code component, with a country-internal prefix applied if applicable ASCII digits and U+0020 SPACE characters 617 253 5702 Text «» Area code component of the telephone number, with a country-internal prefix applied if applicable ASCII digits 617 Text «» Telephone number without the country code and area code components ASCII digits 2535702 Text «» First part of the component of the telephone number that follows the area code, when that component is split into two components ASCII digits 253 Text «» Second part of the component of the telephone number that follows the area code, when that component is split into two components ASCII digits 5702 Text «» Telephone number internal extension code ASCII digits 1000 Text «» E-mail address Valid e-mail address timbl@w3.org E-mail «» URL representing an instant messaging protocol endpoint (for example, » aim:goim?screenname=example » or » xmpp:fred@example.net «) Valid URL string irc://example.org/timbl,isuser URL The groups correspond to controls as follows: input elements with a type attribute in the Hidden state input elements with a type attribute in the Text state input elements with a type attribute in the Search state textarea elements select elements input elements with a type attribute in the Hidden state textarea elements select elements input elements with a type attribute in the Hidden state input elements with a type attribute in the Text state input elements with a type attribute in the Search state input elements with a type attribute in the Password state textarea elements select elements input elements with a type attribute in the Hidden state input elements with a type attribute in the Text state input elements with a type attribute in the Search state input elements with a type attribute in the URL state textarea elements select elements input elements with a type attribute in the Hidden state input elements with a type attribute in the Text state input elements with a type attribute in the Search state input elements with a type attribute in the E-mail state textarea elements select elements input elements with a type attribute in the Hidden state input elements with a type attribute in the Text state input elements with a type attribute in the Search state input elements with a type attribute in the Telephone state textarea elements select elements input elements with a type attribute in the Hidden state input elements with a type attribute in the Text state input elements with a type attribute in the Search state input elements with a type attribute in the Number state textarea elements select elements input elements with a type attribute in the Hidden state input elements with a type attribute in the Text state input elements with a type attribute in the Search state input elements with a type attribute in the Month state textarea elements select elements input elements with a type attribute in the Hidden state input elements with a type attribute in the Text state input elements with a type attribute in the Search state input elements with a type attribute in the Date state textarea elements select elements Address levels: The » address-level1 » – » address-level4 » fields are used to describe the locality of the street address. Different locales have different numbers of levels. For example, the US uses two levels (state and town), the UK uses one or two depending on the address (the post town, and in some cases the locality), and China can use three (province, city, district). The » address-level1 » field represents the widest administrative division. Different locales order the fields in different ways; for example, in the US the town (level 2) precedes the state (level 1); while in Japan the prefecture (level 1) precedes the city (level 2) which precedes the district (level 3). Authors are encouraged to provide forms that are presented in a way that matches the country’s conventions (hiding, showing, and rearranging fields accordingly as the user changes the country). 4.10.18.7.2 Processing model Each input element to which the autocomplete attribute applies, each select element, and each textarea element, has an , an , an , and an . The autofill field name specifies the specific kind of data expected in the field, e.g. » street-address » or » cc-exp «. The autofill scope identifies the group of fields whose information concerns the same subject, and consists of the autofill hint set with, if applicable, the » section-* » prefix, e.g. » billing «, » section-parent shipping «, or » section-child shipping home «. These values are defined as the result of running the following algorithm: If the element has no autocomplete attribute, then jump to the step labeled default. If tokens is empty, then jump to the step labeled default. Let index be the index of the last token in tokens . If the index th token in tokens is not an ASCII case-insensitive match for one of the tokens given in the first column of the following table, or if the number of tokens in tokens is greater than the maximum number given in the cell in the second column of that token’s row, then jump to the step labeled default. Otherwise, let field be the string given in the cell of the first column of the matching row, and let category be the value of the cell in the third column of that same row. Token Maximum number of tokens Category » off » 1 Off » on » 1 Automatic » name » 3 Normal » honorific-prefix » 3 Normal » given-name » 3 Normal » additional-name » 3 Normal » family-name » 3 Normal » honorific-suffix » 3 Normal » nickname » 3 Normal » organization-title » 3 Normal » username » 3 Normal » new-password » 3 Normal » current-password » 3 Normal » one-time-code » 3 Normal » organization » 3 Normal » street-address » 3 Normal » address-line1 » 3 Normal » address-line2 » 3 Normal » address-line3 » 3 Normal » address-level4 » 3 Normal » address-level3 » 3 Normal » address-level2 » 3 Normal » address-level1 » 3 Normal » country » 3 Normal » country-name » 3 Normal » postal-code » 3 Normal » cc-name » 3 Normal » cc-given-name » 3 Normal » cc-additional-name » 3 Normal » cc-family-name » 3 Normal » cc-number » 3 Normal » cc-exp » 3 Normal » cc-exp-month » 3 Normal » cc-exp-year » 3 Normal » cc-csc » 3 Normal » cc-type » 3 Normal » transaction-currency » 3 Normal » transaction-amount » 3 Normal » language » 3 Normal » bday » 3 Normal » bday-day » 3 Normal » bday-month » 3 Normal » bday-year » 3 Normal » sex » 3 Normal » url » 3 Normal » photo » 3 Normal » tel » 4 Contact » tel-country-code » 4 Contact » tel-national » 4 Contact » tel-area-code » 4 Contact » tel-local » 4 Contact » tel-local-prefix » 4 Contact » tel-local-suffix » 4 Contact » tel-extension » 4 Contact » email » 4 Contact » impp » 4 Contact If category is Off or Automatic but the element’s autocomplete attribute is wearing the autofill anchor mantle, then jump to the step labeled default. If category is Off, let the element’s autofill field name be the string » off «, let its autofill hint set be empty, and let its IDL-exposed autofill value be the string » off «. Then, return. If category is Automatic, let the element’s autofill field name be the string » on «, let its autofill hint set be empty, and let its IDL-exposed autofill value be the string » on «. Then, return. Let scope tokens be an empty list. Let hint tokens be an empty set. Let IDL value have the same value as field . If the index th token in tokens is the first entry, then skip to the step labeled done. Decrement index by one. If category is Contact and the index th token in tokens is an ASCII case-insensitive match for one of the strings in the following list, then run the substeps that follow: The substeps are: Let contact be the matching string from the list above. Insert contact at the start of scope tokens . Add contact to hint tokens . Let IDL value be the concatenation of contact , a U+0020 SPACE character, and the previous value of IDL value (which at this point will always be field ). If the index th entry in tokens is the first entry, then skip to the step labeled done. Decrement index by one. If the index th token in tokens is an ASCII case-insensitive match for one of the strings in the following list, then run the substeps that follow: The substeps are: Let mode be the matching string from the list above. Insert mode at the start of scope tokens . Add mode to hint tokens . Let IDL value be the concatenation of mode , a U+0020 SPACE character, and the previous value of IDL value (which at this point will either be field or the concatenation of contact , a space, and field ). If the index th entry in tokens is the first entry, then skip to the step labeled done. Decrement index by one. If the index th entry in tokens is not the first entry, then jump to the step labeled default. If the first eight characters of the index th token in tokens are not an ASCII case-insensitive match for the string » section- «, then jump to the step labeled default. Let section be the index th token in tokens , converted to ASCII lowercase. Insert section at the start of scope tokens . Let IDL value be the concatenation of section , a U+0020 SPACE character, and the previous value of IDL value . Done: Let the element’s autofill hint set be hint tokens . Let the element’s autofill scope be scope tokens . Let the element’s autofill field name be field . Let the element’s IDL-exposed autofill value be IDL value . Default: Let the element’s IDL-exposed autofill value be the empty string, and its autofill hint set and autofill scope be empty. If the element’s autocomplete attribute is wearing the autofill anchor mantle, then let the element’s autofill field name be the empty string and return. Let form be the element’s form owner, if any, or null otherwise. If form is not null and form ‘s autocomplete attribute is in the off state, then let the element’s autofill field name be » off «. Otherwise, let the element’s autofill field name be » on «. For the purposes of autofill, a depends on the kind of control: An input element with its type attribute in the E-mail state and with the multiple attribute specified The element’s values. Any other input element A textarea element The element’s value. A select element with its multiple attribute specified The option elements in the select element’s list of options that have their selectedness set to true. Any other select element The option element in the select element’s list of options that has its selectedness set to true. How to process the autofill hint set, autofill scope, and autofill field name depends on the mantle that the autocomplete attribute is wearing. When an element’s autofill field name is » off «, the user agent should not remember the control’s data, and should not offer past values to the user. Banks frequently do not want UAs to prefill login information: When an element’s autofill field name is not » off «, the user agent may store the control’s data, and may offer previously stored values to the user. For example, suppose a user visits a page with this control: This might render as follows: Suppose that on the first visit to this page, the user selects «Zambia». On the second visit, the user agent could duplicate the entry for Zambia at the top of the list, so that the interface instead looks like this: When the autofill field name is » on «, the user agent should attempt to use heuristics to determine the most appropriate values to offer the user, e.g. based on the element’s name value, the position of the element in its tree, what other fields exist in the form, and so forth. When the autofill field name is one of the names of the autofill fields described above, the user agent should provide suggestions that match the meaning of the field name as given in the table earlier in this section. The autofill hint set should be used to select amongst multiple possible suggestions. For example, if a user once entered one address into fields that used the » shipping » keyword, and another address into fields that used the » billing » keyword, then in subsequent forms only the first address would be suggested for form controls whose autofill hint set contains the keyword » shipping «. Both addresses might be suggested, however, for address-related form controls whose autofill hint set does not contain either keyword. When the autofill field name is not the empty string, then the user agent must act as if the user had specified the control’s data for the given autofill hint set, autofill scope, and autofill field name combination. When the user agent , elements with the same form owner and the same autofill scope must use data relating to the same person, address, payment instrument, and contact details. When a user agent autofills » country » and » country-name » fields with the same form owner and autofill scope, and the user agent has a value for the country » field(s), then the » country-name » field(s) must be filled using a human-readable name for the same country. When a user agent fills in multiple fields at once, all fields with the same autofill field name, form owner and autofill scope must be filled with the same value. Suppose a user agent knows of two phone numbers, +1 555 123 1234 and +1 555 666 7777. It would not be conforming for the user agent to fill a field with autocomplete=»shipping tel-local-prefix» with the value «123» and another field in the same form with autocomplete=»shipping tel-local-suffix» with the value «7777». The only valid prefilled values given the aforementioned information would be «123» and «1234», or «666» and «7777», respectively. Similarly, if a form for some reason contained both a » cc-exp » field and a » cc-exp-month » field, and the user agent prefilled the form, then the month component of the former would have to match the latter. This requirement interacts with the autofill anchor mantle also. Consider the following markup snippet: The only value that a conforming user agent could suggest in the text control is «TreePlate», the value given by the h >input element. The » section-* » tokens in the autofill scope are opaque; user agents must not attempt to derive meaning from the precise values of these tokens. For example, it would not be conforming if the user agent decided that it should offer the address it knows to be the user’s daughter’s address for » section-child » and the addresses it knows to be the user’s spouses’ addresses for » section-spouse «. The autocompletion mechanism must be implemented by the user agent acting as if the user had modified the control’s data, and must be done at a time where the element is mutable (e.g. just after the element has been inserted into the document, or when the user agent stops parsing). User agents must only prefill controls using values that the user could have entered. For example, if a select element only has option elements with values «Steve» and «Rebecca», «Jay», and «Bob», and has an autofill field name » given-name «, but the user agent’s only >select element to the value «Evan», since the user could not have done so themselves. A user agent prefilling a form control must not discriminate between form controls that are in a document tree and those that are connected; that is, it is not conforming to make the decision on whether or not to autofill based on whether the element’s root is a shadow root versus a Document . A user agent prefilling a form control’s value must not cause that control to suffer from a type mismatch, suffer from being too long, suffer from being too short, suffer from an underflow, suffer from an overflow, or suffer from a step mismatch. A user agent prefilling a form control’s value must not cause that control to suffer from a pattern mismatch either. Where possible given the control’s constraints, user agents must use the format given as canonical in the aforementioned table. Where it’s not possible for the canonical format to be used, user agents should use heuristics to attempt to convert values so that they can be used. For example, if the user agent knows that the user’s middle name is «Ines», and attempts to prefill a form control that looks like this: . then the user agent could convert «Ines» to «I» and prefill it that way. A more elaborate example would be with month values. If the user agent knows that the user’s birthday is the 27th of July 2012, then it might try to prefill all of the following controls with slightly different values, all driven from this information: 2012-07 The day is dropped since the Month state only accepts a month/year combination. (Note that this example is non-conforming, because the autofill field name bday is not allowed with the Month state.) July The user agent picks the month from the listed options, either by noticing there are twelve options and picking the 7th, or by recognizing that one of the strings (three characters «Jul» followed by a newline and a space) is a close match for the name of the month (July) in one of the user agent’s supported languages, or through some other similar mechanism. 7 User agent converts «July» to a month number in the range 1..12, like the field. 6 User agent converts «July» to a month number in the range 0..11, like the field. User agent doesn’t fill in the field, since it can’t make a good guess as to what the form expects. A user agent may allow the user to overr >off » to » on » to allow values to be remembered and prefilled despite the page author’s objections, or to always » off «, never remembering values. More specifically, user agents may in particular cons >on » or » off «, with the value given in the second cell of that row. If this table is used, the replacements must be done in tree order, since all but the first row references the autofill field name of earlier elements. When the descriptions below refer to form controls being preceded or followed by others, they mean in the list of listed elements that share the same form owner. Form control New autofill field name an input element whose type attribute is in the Text state that is followed by an input element whose type attribute is in the Password state » username » an input element whose type attribute is in the Password state that is preceded by an input element whose autofill field name is » username » » current-password » an input element whose type attribute is in the Password state that is preceded by an input element whose autofill field name is » current-password » » new-password » an input element whose type attribute is in the Password state that is preceded by an input element whose autofill field name is » new-password » » new-password « The IDL attribute, on getting, must return the element’s IDL-exposed autofill value, and on setting, must reflect the content attribute of the same name. 4.10.19 APIs for the text control selections The input and textarea elements define several attributes and methods for handling their selection. Their shared algorithms are defined here. Selects everything in the text control. Returns the offset to the start of the selection. Can be set, to change the start of the selection. Returns the offset to the end of the selection. Can be set, to change the end of the selection. Returns the current direction of the selection. Can be set, to change the direction of the selection. The possible values are » forward «, » backward «, and » none «. element . setSelectionRange ( start , end [, direction ] ) Changes the selection to cover the given substring in the given direction. If the direction is omitted, it will be reset to be the platform default (none or forward). element . setRangeText ( replacement [, start , end [, selectionMode ] ] ) Replaces a range of text with the new text. If the start and end arguments are not provided, the range is assumed to be the selection. The final argument determines how the selection will be set after the text has been replaced. The possible values are: » select » Selects the newly inserted text. » start » Moves the selection to just before the inserted text. » end » Moves the selection to just after the selected text. » preserve » Attempts to preserve the selection. This is the default. All input elements to which these APIs apply, and all textarea elements, have either a or a at all times (even for elements that are not being rendered). The initial state must consist of a text entry cursor at the beginning of the control. For input elements, these APIs must operate on the element’s value. For textarea elements, these APIs must operate on the element’s API value. In the below algorithms, we call the value string being operated on the . The use of API value instead of raw value for textarea elements means that U+000D (CR) characters are normalized away. For example, If we had operated on the raw value of » A\r\nB «, then we would have replaced the characters » A\r «, ending up with a result of » replaced\nB «. But since we used the API value of » A\nB «, we replaced the characters » A\n «, giving » replacedB «. Whenever the relevant value changes for an element to which these APIs apply, run these steps: If the element has a selection: If the start of the selection is now past the end of the relevant value, set it to the end of the relevant value. If the end of the selection is now past the end of the relevant value, set it to the end of the relevant value. If the user agent does not support empty selection, and both the start and end of the selection are now pointing to the end of the relevant value, then instead set the element’s text entry cursor position to the end of the relevant value, removing any selection. Otherwise, the element must have a text entry cursor position position. If it is now past the end of the relevant value, set it to the end of the relevant value. In some cases where the relevant value changes, other parts of the specification will also modify the text entry cursor position, beyond just the clamping steps above. For example, see the value setter for textarea . Characters with no visible rendering, such as U+200D ZERO WIDTH JOINER, still count as characters. Thus, for instance, the selection can include just an invisible character, and the text insertion cursor can be placed to one side or another of such a character. Where possible, user interface features for changing the text selection in input and textarea elements must be implemented using the set the selection range algorithm so that, e.g., all the same events fire. The selections of input and textarea elements have a , which is either » forward «, » backward «, or » none «. The exact meaning of the selection direction depends on the platform. This direction is set when the user manipulates the selection. The initial selection direction must be » none » if the platform supports that direction, or » forward » otherwise. To of an element to a given direction, update the element’s selection direction to the given direction, unless the direction is » none » and the platform does not support that direction; in that case, update the element’s selection direction to » forward «. On Windows, the direction indicates the position of the caret relative to the selection: a » forward » selection has the caret at the end of the selection and a » backward » selection has the caret at the start of the selection. Windows has no » none » direction. On Mac, the direction indicates which end of the selection is affected when the user adjusts the size of the selection using the arrow keys with the Shift modifier: the » forward » direction means the end of the selection is modified, and the » backward » direction means the start of the selection is modified. The » none » direction is the default on Mac, it indicates that no particular direction has yet been selected. The user sets the direction implicitly when first adjusting the selection, based on which directional arrow key was used. Chrome ? Chrome Android ? Edge ? Edge Mobile ? Firefox ? Firefox Android ? Internet Explorer ? Opera ? Opera Android ? Safari ? Safari iOS ? Samsung Internet ? WebView Android ? The method, when invoked, must run the following steps: If this element is an input element, and either select() does not apply to this element or the corresponding control has no selectable text, return. For instance, in a user agent where is rendered as a color well with a picker, as opposed to a text control accepting a hexadecimal color code, there would be no selectable text, and thus calls to the method are ignored. The attribute’s getter must run the following steps: If this element is an input element, and selectionStart does not apply to this element, return null. If there is no selection, return the offset (in logical order) within the relevant value to the character that immediately follows the text entry cursor. Return the offset (in logical order) within the relevant value to the character that immediately follows the start of the selection. The selectionStart attribute’s setter must run the following steps: If this element is an input element, and selectionStart does not apply to this element, throw an » InvalidStateError » DOMException . Let end be the value of this element’s selectionEnd attribute. If end is less than the given value, set end to the given value. Set the selection range with the given value, end , and the value of this element’s selectionDirection attribute. The attribute’s getter must run the following steps: If this element is an input element, and selectionEnd does not apply to this element, return null. If there is no selection, return the offset (in logical order) within the relevant value to the character that immediately follows the text entry cursor. Return the offset (in logical order) within the relevant value to the character that immediately follows the end of the selection. The selectionEnd attribute’s setter must run the following steps: If this element is an input element, and selectionEnd does not apply to this element, throw an » InvalidStateError » DOMException . Set the selection range with the value of this element’s selectionStart attribute, the given value, and the value of this element’s selectionDirection attribute. The attribute’s getter must run the following steps: If this element is an input element, and selectionDirection does not apply to this element, return null. The selectionDirection attribute’s setter must run the following steps: Set the selection range with the value of this element’s selectionStart attribute, the value of this element’s selectionEnd attribute, and the given value. Chrome 1+ Chrome Android Yes Edge 12+ Edge Mobile ? Firefox 1+ Firefox Android Yes Internet Explorer 9+ Opera 8+ Opera Android Yes Safari Yes Safari iOS Yes Samsung Internet Yes WebView Android Yes The method, when invoked, must run the following steps: Support: input-selection Chrome for Android 78+ Chrome 4+ iOS Safari 4.0+ Firefox 2+ Samsung Internet 4+ UC Browser for Android 12.12+ Safari 4+ IE 9+ Edge 12+ Opera Mini None Opera 10.6+ Android Browser 2.1+ Set the selection range with start , end , and direction . To with an integer or null start , an integer or null or the special value infinity end , and optionally a string direction , run the following steps: If start is null, let start be zero. If end is null, let end be zero. Set the selection of the text control to the sequence of characters within the relevant value starting with the character at the start th position (in logical order) and ending with the character at the ( end -1) th position. Arguments greater than the length of the relevant value of the text control (including the special value infinity) must be treated as pointing at the end of the text control. If end is less than or equal to start then the start of the selection and the end of the selection must both be placed immediately before the character with offset end . In UAs where there is no concept of an empty selection, this must set the cursor to be just before the character with offset end . If direction is not a case-sensitive match for either the string » backward » or » forward «, or if the direction argument was omitted, set direction to » none «. Set the selection direction of the text control to direction . If the previous steps caused the selection of the text control to be modified (in either extent or direction), then queue a task, using the user interaction task source, to fire an event named select at the element, with the bubbles attribute initialized to true. The method, when invoked, must run the following steps: If this element is an input element, and setRangeText() does not apply to this element, throw an » InvalidStateError » DOMException . Set this element’s dirty value flag to true. If the method has only one argument, then let start and end have the values of the selectionStart attribute and the selectionEnd attribute respectively. Otherwise, let start , end have the values of the second and third arguments respectively. If start is greater than end , then throw an » IndexSizeError » DOMException . If start is greater than the length of the relevant value of the text control, then set it to the length of the relevant value of the text control. If end is greater than the length of the relevant value of the text control, then set it to the length of the relevant value of the text control. Let selection start be the current value of the selectionStart attribute. Let selection end be the current value of the selectionEnd attribute. If start is less than end , delete the sequence of characters within the element’s relevant value starting with the character at the start th position (in logical order) and ending with the character at the ( end -1) th position. Insert the value of the first argument into the text of the relevant value of the text control, immediately before the start th character. Let new length be the length of the value of the first argument. Let new end be the sum of start and new length . Run the appropriate set of substeps from the following list: If the fourth argument’s value is «» Let selection start be start . Let selection end be new end . If the fourth argument’s value is «» Let selection start and selection end be start . If the fourth argument’s value is «» Let selection start and selection end be new end . If the fourth argument’s value is «» If the method has only one argument Let old length be end minus start . Let delta be new length minus old length . If selection start is greater than end , then increment it by delta . (If delta is negative, i.e. the new text is shorter than the old text, then this will decrease the value of selection start .) Otherwise: if selection start is greater than start , then set it to start . (This snaps the start of the selection to the start of the new text if it was in the middle of the text that it replaced.) If selection end is greater than end , then increment it by delta in the same way. Otherwise: if selection end is greater than start , then set it to new end . (This snaps the end of the selection to the end of the new text if it was in the middle of the text that it replaced.) Set the selection range with selection start and selection end . The setRangeText() method uses the following enumeration: To obtain the currently selected text, the following JavaScript suffices: . where control is the input or textarea element. To add some text at the start of a text control, while maintaining the text selection, the three attributes must be preserved: . where control is the input or textarea element. 4.10.20 Constraints 4.10.20.1 Definitions A submittable element is a except when a condition has . (For example, an element is barred from constraint val >object element.) An element can have a defined. Initially, an element must have its custom val >setCustomValidity() method, except for form-associated custom elements. Form-associated custom elements can have a custom val >ElementInternals object’s setValidity() method. The user agent should use the custom validity error message when alerting the user to the problem with the control. An element can be constrained in various ways. The following is the list of that a form control can be in, making the control invalid for the purposes of constraint validation. (The definitions below are non-normative; other parts of this specification define more precisely when each state applies or does not.) When a control has no value but has a required attribute ( input required , textarea required ); or, more complicated rules for select elements and controls in radio button groups, as specified in their sections. When the setValidity() method sets valueMissing flag to true for a form-associated custom element. When a control that allows arbitrary user input has a value that is not in the correct syntax (E-mail, URL). When the setValidity() method sets typeMismatch flag to true for a form-associated custom element. When a control has a value that doesn’t satisfy the pattern attribute. When the setValidity() method sets patternMismatch flag to true for a form-associated custom element. When the setValidity() method sets tooLong flag to true for a form-associated custom element. When the setValidity() method sets tooShort flag to true for a form-associated custom element. When a control has a value that is not the empty string and is too low for the min attribute. When the setValidity() method sets rangeUnderflow flag to true for a form-associated custom element. When a control has a value that is not the empty string and is too high for the max attribute. When the setValidity() method sets rangeOverflow flag to true for a form-associated custom element. When a control has a value that doesn’t fit the rules given by the step attribute. When the setValidity() method sets stepMismatch flag to true for a form-associated custom element. When a control has incomplete input and the user agent does not think the user ought to be able to submit the form in its current state. When the setValidity() method sets badInput flag to true for a form-associated custom element. When a control’s custom val >setCustomValidity() method or ElementInternals ‘s setValidity() method) is not the empty string. An element can still suffer from these states even when the element is disabled; thus these states can be represented in the DOM even if validating the form during submission wouldn’t indicate a problem to the user. An element if it is not suffering from any of the above validity states. 4.10.20.2 Constraint validation When the user agent is required to of form element form , it must run the following steps, which return either a positive result (all the controls in the form are valid) or a negative result (there are invalid controls) along with a (possibly empty) list of elements that are invalid and for which no script has claimed responsibility: Let controls be a list of all the submittable elements whose form owner is form , in tree order. Let invalid controls be an initially empty list of elements. For each element field in controls , in tree order: If field is not a candidate for constraint validation, then move on to the next element. Otherwise, if field satisfies its constraints, then move on to the next element. Otherwise, add field to invalid controls . If invalid controls is empty, then return a positive result. Let unhandled invalid controls be an initially empty list of elements. For each element field in invalid controls , if any, in tree order: Let notCanceled be the result of firing an event named invalid at field , with the cancelable attribute initialized to true. If notCanceled is true, then add field to unhandled invalid controls . Return a negative result with the list of elements in the unhandled invalid controls list. If a user agent is to of form element form , then the user agent must run the following steps: Statically validate the constraints of form , and let unhandled invalid controls be the list of elements returned if the result was negative. If the result was positive, then return that result. Report the problems with the constraints of at least one of the elements given in unhandled invalid controls to the user. User agents may focus one of those elements in the process, by running the focusing steps for that element, and may change the scrolling position of the document, or perform some other action that brings the element to the user’s attention. For elements that are form-associated custom elements, user agents should use their validation anchor instead, for the purposes of these actions. User agents may report more than one constraint violation. User agents may coalesce related constraint violation reports if appropriate (e.g. if multiple radio buttons in a group are marked as required, only one error need be reported). If one of the controls is not being rendered (e.g. it has the hidden attribute set) then user agents may report a script error. Return a negative result. Chrome 10+ Chrome Android 18+ Edge 12+ Edge Mobile ? Firefox 4+ Firefox Android 64+ Internet Explorer 10+ Opera 10+ Opera Android 12+ Safari 5+ Safari iOS 5+ Samsung Internet 4.0+ WebView Android 4+ 4.10.20.3 The Support: constraint-val > Chrome for Android 78+ Chrome 40+ iOS Safari 10.0+ Firefox 51+ Samsung Internet 4+ UC Browser for Android 12.12+ Safari 10+ IE (limited) 10+ Edge 17+ Opera Mini None Opera 27+ Android Browser 76+ Returns true if the element will be validated when the form is submitted; false otherwise. Sets a custom error, so that the element would fail to validate. The given message is the message to be shown to the user when reporting the problem to the user. If the argument is the empty string, clears the custom error. Returns true if the element has no value but is a required field; false otherwise. Returns true if the element’s value is not in the correct syntax; false otherwise. Returns true if the element’s value doesn’t match the provided pattern; false otherwise. Returns true if the element’s value is longer than the provided maximum length; false otherwise. Returns true if the element’s value, if it is not the empty string, is shorter than the provided minimum length; false otherwise. Returns true if the element’s value is lower than the provided minimum; false otherwise. Returns true if the element’s value is higher than the provided maximum; false otherwise. Returns true if the element’s value doesn’t fit the rules given by the step attribute; false otherwise. Returns true if the user has provided input in the user interface that the user agent is unable to convert to a value; false otherwise. Returns true if the element has a custom error; false otherwise. Returns true if the element’s value has no validity problems; false otherwise. Returns true if the element’s value has no val >invalid event at the element in the latter case. Returns true if the element’s value has no val >invalid event at the element, and (if the event isn’t canceled) reports the problem to the user. Returns the error message that would be shown to the user if the element was to be checked for validity. Chrome 46+ Chrome Android 46+ Edge 12+ Edge Mobile ? Firefox 1+ Firefox Android 4+ Internet Explorer Yes Opera Yes Opera Android Yes Safari 6+ Safari iOS Yes Samsung Internet ? WebView Android 46+ The attribute’s getter must return true, if this element is a candidate for constraint validation, and false otherwise (i.e., false if any conditions are barring it from constraint validation). The attribute of ElementInternals interface, on getting, must throw a » NotSupportedError » DOMException if the target element is not a form-associated custom element. Otherwise, it must return true if the target element is a candidate for constraint validation, and false otherwise. Chrome Yes Chrome Android Yes Edge 12+ Edge Mobile ? Firefox 1+ Firefox Android 4+ Internet Explorer Yes Opera Yes Opera Android Yes Safari 6+ Safari iOS Yes Samsung Internet ? WebView Android Yes Chrome Yes Chrome Android Yes Edge 12+ Edge Mobile ? Firefox 4+ Firefox Android 4+ Internet Explorer Yes Opera Yes Opera Android Yes Safari Yes Safari iOS Yes Samsung Internet ? WebView Android Yes The method, when invoked, must set the custom validity error message to message . In the following example, a script checks the value of a form control each time it is edited, and whenever it is not a val >setCustomValidity() method to set an appropriate message. The attribute’s getter must return a ValidityState object that represents the validity states of this element. This object is live. The attribute of ElementInternals interface, on getting, must throw a » NotSupportedError » DOMException if the target element is not a form-associated custom element. Otherwise, it must return a ValidityState object that represents the validity states of the target element. This object is live. Chrome 15+ Chrome Android Yes Edge 12+ Edge Mobile ? Firefox 4+ Firefox Android 64+ Internet Explorer 10+ Opera 12.1+ Opera Android 12.1+ Safari 11+ Safari iOS 5+ Samsung Internet 4.0+ WebView Android 4+ A ValidityState object has the following attributes. On getting, they must return true if the corresponding condition given in the following list is true, and false otherwise. Chrome 15+ Chrome Android Yes Edge 12+ Edge Mobile ? Firefox 4+ Firefox Android 64+ Internet Explorer 10+ Opera 15+ Opera Android 14+ Safari 11+ Safari iOS 5+ Samsung Internet 4.0+ WebView Android 4+ Chrome 40+ Chrome Android Yes Edge 17+ Edge Mobile ? Firefox 51+ Firefox Android 64+ Internet Explorer No Opera 27+ Opera Android 27+ Safari 11+ Safari iOS 10+ Samsung Internet 4.0+ WebView Android 67+ Chrome 25+ Chrome Android Yes Edge 14+ Edge Mobile ? Firefox 29+ Firefox Android 64+ Internet Explorer No Opera 15+ Opera Android 14+ Safari 11+ Safari iOS 7+ Samsung Internet 4.0+ WebView Android 4.4+ Где разместить атрибут aria-controls в моей разметке вкладок Я настраиваю раздел содержимого с вкладками на моей странице с помощью script, который следует за следующим синтаксисом: Я буду устанавливать различные роли ARIA ( role=»tablist» , role=»tab» , role=»tabpanel» и т.д.) на этой структурной разметке через javascript (так как если нет сценариев, то нет вкладок), но я не уверен, где именно для размещения моих атрибутов «ария-контроль». Должны ли они перейти к элементу или к его дочернему элементу ? Или это не имеет значения? В самом деле, тот же вопрос можно задать о role=»tab» и tabindex=»0″ — должны ли эти вещи перейти к элементу списка или привязке? Поместите aria-controls на элемент, который получает role=»tab» . aria-controls — это то, что создает связь между вкладкой и ее панелью. См. Третью пулю в описании для aria-controls из спецификации: https://www.w3.org/TR/wai-aria/states_and_properties#aria-controls Считайте также, что role=»presentation» для элементов и role=»tablist» на (особенно потому, что вы показываете инертный с role=»presentation» ). Будьте готовы также управлять навигацией по клавишам со стрелками, так как, используя роли табуляции, вы, по сути, говорите эксперту, что эти вкладки будут вести себя как вкладки в ОС, которые помечают клавиши со стрелками для переключения между вкладками. Дополнительные ресурсы, которые стоит проверить: https://www.marcozehe.de/2013/02/02/advanced-aria-tip-1-tabs-in-web-apps/ (от парня, который работает над доступом в Mozilla и является пользователем программы для чтения с экрана). http://heydonworks.com/practical_aria_examples/#tab-interface (от парня, который консультируется по вопросам доступности и исправления) После всего этого, пожалуйста, проверьте его на экране, чтобы убедиться, что он ведет себя так, как вы ожидаете. В этом демонстрационном примере показан экранный ридер с помощью вкладки с ARIA. Считыватель экрана Jaws предоставляет ярлык для перехода от вкладки к соответствующей вкладке на основе отношения, созданного атрибутом aria-controls. Если вам интересно, эта демонстрация показывает экранный ридер с помощью tabpanels без ARIA. При создании набора вкладок вы хотите, чтобы виджет представлял одну вкладку в порядке клавиатуры. Когда кто-то использует клавишу табуляции, чтобы перейти к набору вкладок, фокус должен перейти на текущую выбранную вкладку, а следующее нажатие клавиши табуляции снова должно вернуться к содержимому. Вы можете использовать roving tabindex для этого. Только текущая выбранная вкладка должна быть настраиваемой. Все остальные вкладки (в частности, элементы , которые их представляют) должны иметь tabindex = «- 1». Это предотвращает их включение в последовательность вкладок клавиатуры. Сценарии, позволяющие кому-либо перемещаться по вкладкам с помощью клавиш со стрелками влево/вправо, также должны обновлять значения атрибута tabindex на каждой вкладке, так что для всех, кроме текущей вкладки, значение tabindex равно -1. Здесь представлена ​​рабочая вкладка табуляций.
  • Комментарии 19
  • Тег video в HTML5
  • Автовоспроизведение autoplay
  • Элементы управления controls
  • Высота и ширина
  • Путь к видео файлу src
  • Предварительная загрузка preload
  • Изображение poster
  • Повтор loop
  • Тема: Control’лы в HTML
  • Control’лы в HTML
  • Атрибуты и свойства
  • DOM-свойства
  • HTML-атрибуты
  • Синхронизация между атрибутами и свойствами
  • DOM-свойства типизированы
  • Нестандартные атрибуты, dataset
  • Итого
  • Задачи
  • Получите атрибут
  • HTML Tag
  • Syntax
  • Example
  • Attributes
  • Атрибут controls в HTML
  • 4.10.19 APIs for the text control selections
  • 4.10.20 Constraints
  • Где разместить атрибут aria-controls в моей разметке вкладок
  • Илон Маск рекомендует:  Что такое код oracle

    Как сделать одинаковый плеер во всех браузерах, JS управление и CSS стилизация тега audio — controls

    Стандартный тег audio появился в HTML5, он должен был решить проблему воспроизведения звуков и музыкальных файлов на веб-страницах. Он обладает базовыми возможностями управления воспроизведением и позволяет проигрывать все популярные форматы файлов.

    Стандартных возможностей обычно достаточно для решения рядовых задач, однако есть существенная проблема – это разный вид плеера в браузерах. Для решения данной проблемы необходимо сверстать плеер на HTML, применить свои CSS-стили и сделать управление на JavaScript.

    Рассмотри подробнее, как при помощи тега audio сделать одинаковый плеер во всех браузерах. Известно, что плеер не будет показан на странице, пока не задан атрибут controls у тега audio. К сожалению простой возможности управления внешним видом плеера при помощи CSS не предлагается, для атрибута controls нет стандартных CSS-стилей. Разработчики предлагают решать эту проблему более сложным способом – полностью скрыть плеер, то есть не задавать атрибут controls. Затем разработать свой внешний вид и логику управления плеером на JS – в нем есть для этого специальные функции.

    Рассмотрим небольшой пример, как это можно сделать на практике – создадим готовый плеер для всех браузеров. Для начала приведем HTML-код плеера, он может быть любым — содержать множество разных элементов и выглядеть как потребуется:

    Здесь всё довольно просто — создается контейнер-обертка, который содержит кнопку, сам тег audio и две надписи. Одна надпись нужна для показа заголовка, другая — для времени воспроизведения. После этого можно сделать CSS стилизацию тега audio — стилизовать сам контейнер и его содержимое.

    Когда внешний вид плеера готов, можно перейти к следующему этапу — необходимо сделать управление плеером на JavaScript, реализовать логику его работы. Комментарии по коду позволяют понять, что делают участки кода:

    Приведен самый простой пример, при необходимости можно добавить дополнительный HTML-код в контейнер, который реализует остальные кнопки стандартного плеера – выключение звука (muted), ползунок позиции трека (currentTime), длительность (duration) и прочее. Останется только добавить в JavaScript-код соответствующую логику, которая будет реализовывать соответствующие операции.

    Таким вот простым способом можно сделать одинаковый плеер во всех браузерах, а также придать плееру любой внешний вид и функционал.

    HTML Атрибуты

    Атрибуты задаются в начальном тэге элемента и состоят из имени и значения, которые отделяются друг от друга знаком равно (=). Например в атрибуте href=»http://www.wm-school.ru/» href является именем, а http://www.wm-school.ru/ значением.

    HTML-теги могут содержать один или несколько атрибутов. Атрибуты добавляются в тег для того, чтобы информировать браузер о том, как данный тег должен отображаться в html-документе.

    Атрибут title

    Рассмотрим следующий пример:

    Имя атрибута title. В этом примере, мы дали ему значение Язык гипертекстовой разметки .

    Атрибут title может (необязательно) использоваться в любом HTML — элементе, чтобы предоставить дополнительную информацию о содержимом элемента.

    При использовании атрибута title, большинство браузеров будет отображать его значение как «всплывающую подсказку», когда пользователь наводит указатель мыши на элемент.

    Атрибут alt

    Вы уже знаете, что изображения вставляются в Web-страницы с помощью одинарного тега . Атрибут alt добавляется внутрь тera и определяет для добавленноrо на WеЬ-страницу rpaфическоrо элемента альтернативный текст. Этот текст называется альтернативным, поскольку может отображаться на экране как альтернатива самому изображению.

    В следующем примере вы увидите, как браузер работает с атрибутом alt, когда появляется «отсутствующее» изображение. Если рисунок не может быть найден или по какой-то причине не загружается, вместо него выводится значение атрибута alt. Поменяйте имя файла с изображением с orange.jpg на pencil.jpg. На самом деле такого файла не существует, поэтому вы получите «отсутствующее» изображение.

    Атрибут href

    Вы можете добавить сразу несколько атрибутов к элементу.

    Атрибут href определяет расположение веб — страницы, на которую ведет ссылка.

    Мы также используем атрибут title для того, чтобы обеспечить некоторую консультационную помощь для пользователя в виде всплывающей подсказки.

    Указывать атрибуты можно только внутри открывающих тегов и если атрибутов несколько, то между ними ставится пробел. При этом нельзя в одном теге задавать два одинаковых атрибута, даже если у них разные значения, то есть дублировать их запрещено. Атрибуты, как и теги, нечувствительны к регистру, то есть их допустимо писать заглавными и строчными буквами. Значения атрибутов можно брать в необязательные двойные (» «) или одинарные кавычки(‘ ‘).

    W3C рекомендует использовать кавычки в HTML, и требует применение кавычек для более строгих типов документов, таких как XHTML.

    Иногда бывает необходимо использовать кавычки. В этом примере атрибут заголовка не будет отображаться правильно, так как в значении атрибута содержатся пробелы:

    Как и в случае с тегами, рекомендую вам всегда писать атрибуты в нижнем регистре и брать их значения в кавычки.

    Одинарные или двойные кавычки?

    Чаще всего в HTML используются «двойные кавычки», но вы можете использовать и ‘одинарные’. Иногда вам придется использовать одинарные кавычки, если в значении есть часть, которая отдельно должна быть заключена в кавычки:

    Общие атрибуты

    Ниже представлен список некоторых атрибутов, которые стандартны для большинства html-элементов:

    Атрибут Значение Описание
    align right, left, center Горизонтальное выравнивание тегов
    valign top, middle, bottom Вертикальное вырвнивание тегов внутри HTML-элемента.
    background URL Расположение фонового изображения
    id Уникальное имя Уникальное имя для использования с каскадными таблицами стилей.
    class правило класса или стиль класса Классифицирует элемент для использования с каскадными таблицами стилей.
    width Числовое значение Определяет ширину таблиц, изображений или ячеек таблицы.
    height Числовое значение Определяет высотуу таблиц, изображений или ячеек таблицы.
    title Текст подсказки Текст, отображаемый во всплывающей подсказке.

    Полный список всех атрибутов для каждого элемента HTML, указан в нашем справочнике: HTML Атрибуты.

    Первое итоговое задание [1-4]

    Вы познакомились с тегами, необходимыми для создания простейшей HTML-страницы, а также с атрибутами и их значениями, которые очень важны для корректного отображения документа, оптимизации и продвижения в поисковиках.

    Пришло время повторить изученное и выполнить несложные задания:

    Всплывающая подсказка

    Сделайте всплывающую подсказку с текстом «Хороший сайт», который появляется когда вы наводите указатель мыши на абзац, как показано на рис. 1.

    Реализация v >

    В статье описаны строение audio и video контейнера HTML5, теги video, audio, source, track и их атрибуты с возможными значениями. Приведены HTML шаблоны и примеры реализации воспроизведения мультимедийных файлов на основе встроенных в браузер возможностей. Показано подключение к видео текстовой дорожки субтитров, заголовков, оглавления при помощи файлов формата WEBVTT с примерами. Представлены HTML5 шаблоны кода с микроразметкой по schema.org для аудио и видео. Указаны основные для web форматы аудио и видео файлов с их MIME типами и инструменты для конвертации видео и аудио в эти форматы.

    В HTML5 присутствуют новые возможности, позволяющие выполнять проигрывание аудио и видео файлов напрямую браузером без использования сторонних программ. Пока, несмотря на то, что HTML5 уже не новость, имеются еще разногласие в том, как браузеры обрабатывают теги video и audio и как отображают сам плеер. Одни это делают все лучше с каждой новой версией, другие пока еще отстают. Глобально же, тенденция идет к тому, что браузеры будут предоставлять все больше функционала для проигрывания мультимедиа файлов.

    Скринкаст: Видео обзор этой статьи

    HTML5 video не поддерживается вашим браузером. Скачать видео

    Скринкаст: видео обзор статьи Реализация video и audio в HTML5, шаблоны, schema.org микроразметка на сайте Andew.ru

    Скринкаст: Пример использования шаблонов

    HTML5 video не поддерживается вашим браузером. Скачать видео

    Скринкаст: примеры использования шаблонов из статьи Реализация video и audio в HTML5, шаблоны, schema.org микроразметка — andew.ru

    В HTML5 воспроизведение браузером аудио и видео файлов реализуется посредством тегов и , которые предоставляют управляемый сценариями объект. Использование этих тегов позволяет проиграть мультимедийный файл на web странице, управлять его воспроизведением путем задания атрибутов для тегов и , и дополнительных, вложенных в них тегов. В простейшем варианте использования достаточно вставить на web страницу нужный вам тег или и задать через их атрибуты несколько параметров. И это уже позволит проиграть мультимедиа файл на странице в HTML5 плеере. Также, поскольку элементы и являются объектами для JS, у них доступны свойства, методы и события, что предоставляет расширенные возможности полного управления HTML5 плеером через JavaScript . Однако, ввиду того, что браузеры могут иметь различия в реализации управления объектами аудио и видео посредством JS, то более лучшим выбором для этих целей будет использование специальных кроссбраузерных JS библиотек. Одна из таких библиотек под названием v > будет описана в отдельном посте. К тегам и , как и к другим тегам HTML применима стилизация посредством CSS. Детальную спецификацию для аудио и видео в HTML5 можно посмотреть на сайте World W > .

    HTML5 видео и аудио развивающийся стандарт и он не связан ни с одним форматом аудио или видео, поэтому между браузерами существуют различия в поддерживаемых ими форматами аудио и видео файлов. Это различие сейчас компенсируют тем, что кодируют оригинальный файл несколькими разными кодеками и подключают все эти версии файлов к тегам или через вложенные теги . Однако среди поддерживаемых браузерами форматов аудио и видео файлов намечаются лидеры. Для видео это, конечно же, формат mp4 (H.264), и для аудио это формат mp3 и m4a. Сейчас уже, наверное, все браузеры способны проигрывать файлы этих форматов. Так же, браузеры Firefox, Chrome и Opera договорились поддерживать стандарт WEBM в качестве общего видео формата. С моей точки зрения, оптимальным на сейчас вариантом использования HTML5 видео и аудио будет схема основанная на использовании одного мультимедийного файла в формате mp4(H.264) для видео и m4a для аудио и JS HTML5 плеера. К аудио или видео контейнеру подключается только один файл в указанном формате. Сейчас большинство браузеров способны воспроизводить mp4 формат. Подключенная же JS библиотека выполнит стилизацию встроенного в браузер плеера. Если браузер не будет поддерживать формат mp4/m4a, то JS плеер, в таком случае, реализует подключение Flash плеера для воспроизведения мультимедийного файла. Учитывая, что mp4 формат стал сильно популярен, можно надеяться на низкую вероятность проблем с его воспроизведением в браузерах. Такая схема требует наличие всего одного мультимедийного файла в указанном формате, что экономит место на диске и ресурсы для обработки файлов. Также, такая схема будет стратегически более правильной, так как тенденция идет к тому, что браузеры все больше и лучше выполняют реализацию HTML5 видео и аудио.

    Для указания HTML5 плееру проигрываемого файла нужно, помимо URL файла, передать и MIME тип файла, что бы браузер понимал какой кодек ему нужно использовать. Ниже в таблице привожу наиболее распространенные форматы файлов и их MIME типы.

    Форматы файлов и их MIME типы

    Файлы мультимедиа Расширения Mime тип
    Аудио mp3 mp3 audio/mpeg
    Аудио mp4 m4a audio/mp4
    Аудио webm webm audio/webm
    Аудио ogg ogg audio/ogg
    Видео mp4 (H.264) mp4 video/mp4
    Видео webm webm video/webm
    Видео ogg ogv video/ogg

    Инструменты кодирования аудио и видео файлов

    Пример стандартного использование HTML5 тега :

    Пример HTML5 audio

    HTML5 audio не поддерживается вашим браузером.

    HTML5 код примера audio с микроразметкой schema.org:

    Так будут выглядеть извлеченные из кода данные микроразметки для описанного выше шаблона аудио.

    Минимальная разметка аудио по schema.org должна включать itemprop= «name» , itemprop= «description» , itemprop= «contentUrl» . Остальные свойства не являются обязательными.

    Пример стандартного использование HTML5 тега :

    В демонстрации я применил для тега через атрибут class CSS стили, делающие ширину области видео динамической в зависимости от размера экрана. По высоте плеер подстроиться сам. Попробуйте изменить размер окна браузера для того, что бы увидеть как это работает. Поэтому в источнике кода этой демонстрации нет атрибутов width и height для тега , их заменяют CSS стили. Но в листинге кода шаблона этот примем не показан, т.к. является уже частностью.

    Пример HTML5 v >

    HTML5 video не поддерживается вашим браузером.

    HTML5 код примера video с микроразметкой schema.org:

    Так будут выглядеть извлеченные из кода данные микроразметки для описанного выше шаблона видео.

    Минимально необходимая для поисковиков разметка видео по schema.org должна включать все приведенные в коде примера свойства itemprop за исключением блока itemprop= «author» , который является не обязательным для поисковиков и его можно удалить, если нет данных для его заполнения. Для v >»thumbnail» в виде ImageObject, а Google требует указывать как itemprop= «thumbnailUrl» , поэтому приходиться вставлять v > , google валидатор . Основное преимущество от использования микроразметки заключается в удобстве такого контента для поисковых роботов и роботов социальных сетей. Эти роботы извлекают размеченные данные и агрегирую их. Поэтому использование микроразметки улучшает SEO сайта и способствует автоматическому распространению данных в социальных сетях. Детальное описание микроразметки Schema.org для видео размеченных схемой V > . Так же, стоит заметить, что для случаев, когда вы делаете вставку на свой сайт видео не напрямую, а с помощью виджетов видео хостинга Яндекс.Видео или YouTube, то вы можете под блоком кода виджета добавить свой блок кода HTML с описанием видео и в него встроить микроразметку Schema.org для этого видео. При этом, в качестве параметра URL — ссылки на видеоролик, указать не прямую ссылку на статический файл, а задать ссылку полученную от видео хостинга. Хотя в спецификации Schema.org и написано, что ссылка должна быть именно на прямой файл, но поисковики обрабатывают и ссылки на видео от видео хостинга (см. в примерах на сайте Яндекса в разделе Вебмастер), несмотря на то, что по такой ссылке нельзя скачать файл и нельзя просмотреть его напрямую в своем HTML5 медиа плеере на странице, только в виджете видео хостинга.

    Если перед вами стоит вопрос с какого хостинга загружать мультимедийные файлы аудио и видео, то посмотрите статью Yandex Disk REST API jQuery Plugin, в которой описан вариант вставки медиа файлов на WEB страницу с Яндекс Диска.

    Атрибуты и тегов:

    Атрибуты src, preload, autoplay, mediagroup, loop, muted, controls являются общими атрибутами для всех медийных элементов, в том числе и для тегов и .

    атрибут autoplay:

    • атрибут autoplay задается его присутствием в теге или и для этого атрибута не нужно задавать значение, достаточно просто его присутствия. Для редакторов HTML, которые правят код элементов, можно задать этот атрибут как autoplayautoplay«, что равносильно просто присутствию атрибута. Наличие атрибута autoplay дает команду браузеру начать воспроизведение файла сразу после загрузки web страницы. Соответственно, атрибут autoplay отменяет значения атрибута preload, который управляет загрузкой видео в плеер, потому что видео должно сразу начать воспроизводиться, а значит и должно быть загружено. По умолчанию атрибут autoplay отсутствует.

    атрибут controls:

    • атрибут controls дает команду браузеру показывать панель управления плеером, когда страница загрузилась, но воспроизведение записи на начато. Этот атрибут также как и атрибут autoplay задается только присутствием в теге или , и не требует значения, достаточно только его присутствия. По умолчанию этот атрибут отсутствует, т.е. плеер не показывает панель управления до начала воспроизведения. Когда же проигрывание файла будет запущено, то панель управления будет появляться при наведении указателя мыши на область плеера.

    атрибут loop:

    • атрибут loop заставляет плеер воспроизводить файл по кругу. Атрибут задается только его присутствием в теге или и не имеет параметров. По умолчанию атрибут loop отсутствует.

    атрибут preload:

    • атрибут preload определяет загрузку файла вместе с загрузкой web страницы и принимает одно из следующих трех значений:
      • none — не выполнять загрузку файла вместе с загрузкой web страницы. Это значит, что файл начнет загружаться в плеере только после нажатия кнопки воспроизведения. Это может быть удобным для ускорения загрузки страницы. Значение none является значением по умолчанию для атрибута preload, поэтому для него можно вообще не вставлять атрибут preload в тег или для этого случая.
      • metadata — не выполнять загрузку файла вместе с загрузкой web страницы, но выполнять загрузку метаданных мультимедийного файла.
      • auto — выполнять полную загрузку файла вместе с загрузкой web страницы. В этом варианте браузеры будут автоматически подгружать медийный файл вместе с web страницей, но это не будет мешать загрузке самой страницы и ее отрисовки в браузере. Если в теге или задан атрибут preload=«» с пустым значением, то будет использовано значение auto для него.
      • Значение атрибута preload будет отменено, если использован атрибут autoplay.

    атрибут src:

    • атрибут src тега или позволяет сразу в теге задать путь к мультимедийному файлу. Путь может быть, как полным с указанием протокола и домена, так и относительно корня текущего сайта. Также путь к файлу можно задать и во вложенных в аудио или видео контейнер тегах .

    Атрибут poster тега video:

    • атрибут poster используется только в теге и задает URL изображения (gif, png, jpeg и т.п.), которое будет показано пока видео не доступно. Если атрибут poster не задан, то плеер браузера будет пытаться показать первый кадр видео.

    Атрибуты width и height тега video:

    • атрибуты width и height применяются только к тегу и задают, соответственно, ширину и высоту области воспроизведения видеоплеера. В качестве значения ожидают положительное целое число, указанное в пикселях или процентах. Задание этих атрибутов влияет на размер отображения видео, но не изменяет пропорции видео. Видео подстроиться под указанные размеры с сохранением его пропорций. Если указанные размеры не совпадают с пропорциями видео, то по верхним или/и по боковым краям видео будут темные полосы. Поэтому при задании этих параметров желательно подбирать их соотношение такое же, как у воспроизводимого видео, или задавать только w >.

    Атрибут muted:

    • атрибут muted устанавливает своим наличием в тегах или звук в выключенное состояние в HTML5 плеере. По умолчанию атрибут отсутствует.

    Атрибут crossorigin:

    • атрибут crossorigin указывает браузеру на необходимость выполнение CORS запроса для данного элемента. По умолчанию атрибут отсутствует, что значит не использовать CORS запросы вообще. При наличии атрибута возможны следующие значения: anonymous и use-credentials. CORS (Cross-origin resource sharing ) — это технология современных браузеров, которая позволяет управлять разрешениями на загрузку ресурсов на текущей web странице с других доменов, отличных от домена текущей страницы. Поддержка браузерами стандарта CORS позволяет реализовать безопасный кроссдоменный обмен данными через выполнение специального запроса (заголовка) к домену текущей страницы на предмет того, разрешается ли загружать на этой странице ресурсы с другого указанного домена. Сервер на такой запрос должен указать домены, с которых разрешена загрузка ресурсов.

    Атрибут mediagroup:

    • атрибут mediagroup позволяет объединить управление несколькими медиафайлами в один MediaController через создание группы медиафайлов в разных местах страницы. Это группа будет управляться одновременно для всех входящих в нее файлов. Это удобно, например, если нужно проиграть и управлять одновременно одним и тем же роликом в разных местах страницы с разными субтитрами, или разными роликами.

    Теги и требуют наличие закрывающего тега.

    Для тех случаев, когда браузер не поддерживает HTML5 и теги, что сейчас большая редкость, пред закрывающим контейнер тегом пишут текстовое сообщение и обычно добавляют ссылку на скачивание файла. Если же встроенный в браузер HTML5 плеер будет дополнительно управляться JS библиотекой (JS плеером), то большинство из них выполняют подключение флэш плеера в случае невозможности воспроизведения в браузере HTML5 видео и аудио по причине не поддержки браузером тегов видео и аудио или формата мультимедийного файла.

    Путь к проигрываемому файлу также можно задать и при помощи тега с атрибутом src, размещенного внутри тегов или . Тег не имеет закрывающего тега.

    В большинстве случаев тег выглядит так:

    и в нем присутствует всегда атрибут src и type, который в большинстве случаев имеет только MIME-тип.

    Атрибуты тега :

    • атрибут src=«URL» тега задает URL к мультимедийному файлу. Путь может быть как полным с указанием протокола и домена, так и относительно корня сайта.
    • атрибут type=»MIME-тип» тега или более полно type=’MIME-тип; codecs=»кодек»‘ указывает MIME-тип файла и кодек. Для аудио достаточно указать MIME-тип, например, для .mp3 — type=»audio/mpeg». Хотя по спецификации для видео в атрибуте type нужно указывать и кодек, но сейчас часто указывают только MIME-тип без кодека, предоставляя это на решение браузерам.
    • атрибут media=»all|braille|handheld|print|screen|speech|projection|tty|tv» тега указывает тип устройства, для которого должен воспроизводиться файл. Значение по умолчанию all, поэтому этот атрибут в большинстве случаев не указывают вообще, если не хотят конкретно определить устройство для воспроизведения.

    Для HTML5 видео возможно также отображать в плеере дополнительную дорожку с информацией, такой как субтитры (subtitles), заголовки (captions), главы (chapters), описания (descriptions – не поддерживаются пока) и метаданные (metadata – не поддерживаются пока). Эта возможность реализуется путем добавления внутри тега тегов с соответствующими атрибутами.

    Тег позволяет подключать к видео дополнительные файлы-дорожки специального формата WebVTT (Web V > ), в которых указаны выводимые текстовые сообщения с их временной привязкой к видео файлу. Стандарт WebVTT поддерживает не просто вывод текстовых сообщений, но и предоставляет варианты его CSS стилизации и опции по размещению в области просмотра видео. На настоящий момент WebVTT файлы в основном используются для подключения к видео текстовых субтитров, что поддерживается почти всеми браузерами. Другие возможности WebVTT стандарта пока не полностью реализуются самими браузерами, поэтому, для более полного использования WebVTT, лучше применять JS плееры. Также, файлы WebVTT могут нестандартно использоваться JS плеерами для передачи дополнительных данных в JS плеер, таких как, например, URL превью картинок для фреймов видео. К вопросу о том, как показать превью кадров видео на шкале перемотки плеера (Scrub Bar Thumbnails) как это сделано на видео хостингах. Тут нужно сказать, что такой функционал пока отсутствует во встроенных в браузеры плеерах и поэтому реализуется через JS плееры как дополнение. Для этого подключают JS библиотеку (js плеер), которая берет на себя управление HTML5 видео и аудио объектом и выполняет его стилизацию. Такие JS плееры для показа превью кадров видео нестандартно используют файлы WEBVTT из тега для передачи через него URL картинок превью.

    Файл формата WebVTT является обычным текстовым файлом с расширением .vtt в котором, в виде построчного списка, прописаны временные метки с временем старта и временем окончания и текстовые сообщения для вывода к этим меткам. К контейнеру можно подключить несколько файлов WebVTT с текстом на разных языках. Для каждого языка нужно создавать отдельный файл и подключать каждый через тег. Теги необходимо вставлять внутрь контейнера после всех тегов , но перед сообщениями об ошибках HTML5 видео. Тегс файлом субтитров на языке по умолчанию нужно размешать первым среди теговв текущем контейнере .

    WEBVTT файл может содержать одну и более временных меток. Файл начинается со слова WEBVTT. Пустые строки отделяют между собой временные метки с принадлежащими к ним текстом и атрибутами. Текст может содержать элементы HTML и CSS разметки. Перед временной меткой может располагаться ID для нее, что бы при помощи специальных выражений обратиться к ней. Все эти детали описаны в стандарте WEBVTT.

    00:00:01.000 00:00:10.000 -это простой пример временной метки в формате hh:mm:ss.mmm

    00:00:15.000 00:00:20.000 A:middle T:50% — метка может содержать дополнительные атрибуты, указывающие на месторасположение текста для нее в области просмотра видео.

    Пример файла формата WEBVTT для субтитров на ru

    Атрибуты тега :

    Атрибут kind тега задает тип дорожки и может принимать значения:

    • subtitles — субтитры в виде текста, который выводиться поверх видео. Для проигрываемого файла можно задать субтитры на разных языках для предоставления их выбора в плеере, если он его поддерживает. В большинстве случаев используется именно этот тип так он поддерживается большинством браузеров.
    • captions – заголовки в виде текста и звука, которые выводятся поверх видео. Похожи на субтитры, но, помимо текста, могут включать звуковые эффекты и другую аудио информацию.
    • chapters – главы, которые отображаются текстом в виде меню списка и предназначены для быстрой навигации по медиафайлу.
    • descriptions – описание, это текстовые файлы с описанием видео для воспроизведения их в screenreader.
    • metadata – метаданные для передачи js скриптам.

    Атрибут src тега задает URL к файлу дорожки с дополнительной информацией. Подключаемый к тегу файл имеет формат WebVTT и расширение .vtt.

    Атрибут srclang тега задает язык дорожки через код языка. Для русского языка будет равен «ru», для английского «en».

    Атрибут label тега задает название дорожки, которое будет показано в плеере. Если атрибут не будет задан, то браузер покажет свое служебное название.

    Атрибут default тега задает выбор данной дорожки по умолчанию при наличии других дорожек в контейнере video. Только один из нескольких тегов может иметь default атрибут. Лучше дорожку по умолчанию располагать первой среди других подключаемых дорожек.

    Освоение HTML5 тега audio

    С появлением достаточно быстрого соединения с сетью Интернет, Flash был единственным инструментом для воспроизведения звуков на веб-сайтах. Но HTML5 в корне изменит способ воспроизведения звуков в Интернет. В этой статье я хочу подробно рассказать Вам о том, как использовать тег на ваших сайтах.

    Воспроизведение звука в цикле

    Различные форматы файлов

    Для старых браузеров

    Управление воспроизведением через JavaScript

    Читают сейчас

    Похожие публикации

    • 26 сентября 2011 в 12:04

    HTML5: старые теги нового назначения

    Проблемы с HTML5

    HTML5 Audio и Game Development: баги браузеров, проблемы и их решения, идеи

    Заказы

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Комментарии 19

    Используем audio для вставки звукового файлу на сторінку

    Для незнающих украинских — имеется в виду «на страницу»?

    И «файл wtkbrjv» — файл целиком :)

    Обратите внимание на атрибут autoload, который используется для автоматического воспроизведения звука. Тем не менее Вам не следует автоматически воспроизводить звуки а сайте, ведь это надоедает пользователям.

    так autoload или autoplay?

    >Safari, например, может проигрывать MP3, а Firefox не может, и играет OGG-файлы вместо этого.

    Ну вот опять начинается. Каждый браузер реализует свое, а фронтэндеры в итоге мучаются и держат на своей машине целый зоопарк.

    С появлением достаточно быстрого соединения с сетью Интернет, Flash был единственным инструментом для воспроизведения звуков на веб-сайтах.

    Никого не насторожило, что с 1-й строчки идёт неправда? Издревле альтернативами флешу были теги object и embed, которые работали напрямую с звуковыми файлами, сильно зависели от настроек ОС и установленных кодеков, но всегда были независимы от флеша. И никогда не исчезали из браузеров.

    Так вот, почему бы, даже если и перевод, не поправить автора сочинения? Как обычно, в скобках «прим. перев.». Зачем вообще переводить автора, не полностью разбирающегося в теме? Лучше взять правильную часть, проверить, если надо, и написать своими словами. Тем более, что в комментах уже пишут, что и данные теги работают с глюками, поэтому не могут быть решением.

    Возможно, я уже начитался кучи всего по и мне кажется эта информация просто убогой бесполезной, детской… Если в гугле набрать , то выдаст кучу ответов, где написано то же самое что и в этой статье… тогда — зачем переводить было?

    Вот это лучше бы перевели, если так сильно хотелось что-то сделать.

    Все легко: ниже приведён код, который будет отображать сообщение для браузеров, которые не поддерживают тег audio.

    У сервера неправильно прописан MIME тип для ogg (application/octet-stream), из-за этого Firefox не играет (в отличие от Оперы и Хрома). Может автор знает, как это исправить? Отредактировать .htaccess невозможно.

    Пробовал указывать тип в тегах — не помогает.

    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

    Тег video в HTML5

    Давненько я ничего не писал, но сегодня я все-таки взялся решил взяться за этот урок. Он будет немного большим чем предыдущие. В этом уроке мы с вами познакомимся с замечательным абсолютно новым тегом .

    В чем же прелесть данного тега? А вся прелесть заключается в том, что теперь вам не требуется использовать никаких плагинов для вставки видео файлов. Более того теперь вы сможете сами настраивать и стилизовать элементы видео. И так начнем!

    Тег video позволяет добавлять, воспроизводить и управлять настройками видео файла на страничке документа HTML5. Путь к видео файлу можно задать двумя разными способами: через атрибут src или тег . Общий синтаксис имеет следующий вид:

    Для элемента видео представлен целый ряд атрибутов, которые расширяют его возможности:

    Автовоспроизведение autoplay

    Как вы уж догадались из названия атрибут autoplay позволяет нам автоматически начать воспроизведение видео файла.
    Синтаксис для данного атрибута имеет следующий вид:

    Скажу сразу, что я бы не советовал использовать данный атрибут так, как посетителям странички сайта вряд ли это понравится. Но всё же имейте ввиду что такой атрибут есть. Возможно вы захотите использовать его для загрузки видео вместо слайд-шоу.

    Элементы управления controls

    А вот этот атрибут, наоборот, я бы посоветовал вам использовать. Атрибут controls добавляет панель управления видеовоспроизведения, причем вид панели и элементы управления могут быть различными в зависимости от браузера на котором, воспроизводится видео. Синтаксис имеет вид:

    Высота и ширина

    Атрибуты height и width задают высоту и ширину области видевоспроизведения соответственно. Думаю здесь объяснения излишне так, как данные атрибуты используются для изображений. Общий синтаксис:

    Путь к видео файлу src

    Об этом атрибуте мы говорили в самом начале статьи, он указывает путь к видео файлу.

    Предварительная загрузка preload

    Данный атрибут позволяет управлять предварительной загрузкой файла. Имеет несколько значений:

    • none — не загружает видео файл (стоит по умолчанию);
    • metadata — подгружает данные видео т.е. первый кадр, продолжительность воспроизведения и т.д.
    • auto — загружает видео целиком.

    Синтаксис применения для данного атрибута имеет следующий вид:

    Изображение poster

    Данный атрибут позволяет указать путь к изображению, которое будет использоваться перед запуском видео. Если не использовать данный атрибут, то будет показан первый кадр видео фрагмента. Синтаксис имеет следующий вид:

    Повтор loop

    Этот атрибут используется для бесконечного воспроизведения видео после его завершения. Имеет следующий синтаксис:

    Что же ещё надо обязательно знать про тег video? Осталась ещё одна вещь. Всё дело в том, что разные браузеры поддерживают разные аудио и видео кодеки.
    Т.е видео файл воспроизводимый на одном браузере, не будет воспроизводиться на другом. Чтобы исправить данное положение видео кодируют с помощью разных кодеков и добавляют закодированные файлы одновременно,
    используя тег и атрибут type. Для закрепления данного урока я покажу вам небольшой пример использования видео в HTML5:

    Уверен, что вам понравился данный урок. Совсем скоро мы закончим изучение HTML5 и подведём некоторые итоги.

    Все права на сайт принадлежат Александру Побединскому.

    Копирование любых материалов сайта возможно только с разрешения автора или при указании ссылки на источник.

    Тема: Control’лы в HTML

    Опции темы
    Отображение
    • Линейный вид
    • Комбинированный вид
    • Древовидный вид

    Control’лы в HTML

    Добрый день, всё чаще и чаще сталкиваюсь с вот такой формой и дизайном кнопок, кто либуть может дать код access.gif
    Буду весьма благодарен за ответ!

    ну все кнопки делаются стандартными методами

    при указании атрибута type можно задать
    радиокнопки (type=»radio») — как в первом варианте
    или просто кнопки (type=»button») — как ниже

    Атрибуты и свойства

    Когда браузер загружает страницу, он «читает» (также говорят: «парсит») HTML и генерирует из него DOM-объекты. Для узлов-элементов большинство стандартных HTML-атрибутов автоматически становятся свойствами DOM-объектов.

    Например, для такого тега у DOM-объекта будет такое свойство body. .

    Но преобразование атрибута в свойство происходит не один-в-один! В этой главе мы уделим внимание различию этих двух понятий, чтобы посмотреть, как работать с ними, когда они одинаковые и когда разные.

    DOM-свойства

    Ранее мы уже видели встроенные DOM-свойства. Их много. Но технически нас никто не ограничивает, и если этого мало – мы можем добавить своё собственное свойство.

    DOM-узлы – это обычные объекты JavaScript. Мы можем их изменять.

    Например, создадим новое свойство для document.body :

    Мы можем добавить и метод:

    Также можно изменять встроенные прототипы, такие как Element.prototype и добавлять новые методы ко всем элементам:

    Итак, DOM-свойства и методы ведут себя так же, как и обычные объекты JavaScript:

    • Им можно присвоить любое значение.
    • Они регистрозависимы (нужно писать elem.nodeType , не elem.NoDeTyPe ).

    HTML-атрибуты

    В HTML у тегов могут быть атрибуты. Когда браузер парсит HTML, чтобы создать DOM-объекты для тегов, он распознаёт стандартные атрибуты и создаёт DOM-свойства для них.

    Таким образом, когда у элемента есть id или другой стандартный атрибут, создаётся соответствующее свойство. Но этого не происходит, если атрибут нестандартный.

    Пожалуйста, учтите, что стандартный атрибут для одного тега может быть нестандартным для другого. Например, атрибут «type» является стандартным для элемента (HTMLInputElement), но не является стандартным для (HTMLBodyElement). Стандартные атрибуты описаны в спецификации для соответствующего класса элемента.

    Мы можем увидеть это на примере ниже:

    Таким образом, для нестандартных атрибутов не будет соответствующих DOM-свойств. Есть ли способ получить такие атрибуты?

    Конечно. Все атрибуты доступны с помощью следующих методов:

    • elem.hasAttribute(name) – проверяет наличие атрибута.
    • elem.getAttribute(name) – получает значение атрибута.
    • elem.setAttribute(name, value) – устанавливает значение атрибута.
    • elem.removeAttribute(name) – удаляет атрибут.

    Этим методы работают именно с тем, что написано в HTML.

    Кроме этого, получить все атрибуты элемента можно с помощью свойства elem.attributes : коллекция объектов, которая принадлежит ко встроенному классу Attr со свойствами name и value .

    Вот демонстрация чтения нестандартного свойства:

    У HTML-атрибутов есть следующие особенности:

    • Их имена регистронезависимы ( id то же самое, что и ID ).
    • Их значения всегда являются строками.

    Расширенная демонстрация работы с атрибутами:

    Пожалуйста, обратите внимание:

    1. getAttribute(‘About’) – здесь первая буква заглавная, а в HTML – строчная. Но это не важно: имена атрибутов регистронезависимы.
    2. Мы можем присвоить что угодно атрибуту, но это станет строкой. Поэтому в этой строчке мы получаем значение «123» .
    3. Все атрибуты, в том числе те, которые мы установили, видны в outerHTML .
    4. Коллекция attributes является перебираемой. В ней есть все атрибуты элемента (стандартные и нестандартные) в виде объектов со свойствами name и value .

    Синхронизация между атрибутами и свойствами

    Когда стандартный атрибут изменяется, соответствующее свойство автоматически обновляется. Это работает и в обратную сторону (за некоторыми исключениями).

    В примере ниже id модифицируется как атрибут, и можно увидеть, что свойство также изменено. То же самое работает и в обратную сторону:

    Но есть и исключения, например, input.value синхронизируется только в одну сторону – атрибут → значение, но не в обратную:

    • Изменение атрибута value обновило свойство.
    • Но изменение свойства не повлияло на атрибут.

    Иногда эта «особенность» может пригодиться, потому что действия пользователя могут приводить к изменениям value , и если после этого мы захотим восстановить «оригинальное» значение из HTML, оно будет в атрибуте.

    DOM-свойства типизированы

    DOM-свойства не всегда являются строками. Например, свойство input.checked (для чекбоксов) имеет логический тип:

    Есть и другие примеры. Атрибут style – строка, но свойство style является объектом:

    Хотя большинство свойств, всё же, строки.

    При этом некоторые из них, хоть и строки, могут отличаться от атрибутов. Например, DOM-свойство href всегда содержит полный URL, даже если атрибут содержит относительный URL или просто #hash .

    Если же нужно значение href или любого другого атрибута в точности, как оно записано в HTML, можно воспользоваться getAttribute .

    Нестандартные атрибуты, dataset

    При написании HTML мы используем много стандартных атрибутов. Но что насчёт нестандартных, пользовательских? Во-первых, давайте посмотрим, полезны они или нет? Для чего они нужны?

    Иногда нестандартные атрибуты используются для передачи пользовательских данных из HTML в JavaScript, или чтобы «помечать» HTML-элементы для JavaScript.

    Также они могут быть использованы, чтобы стилизовать элементы.

    Например, здесь для состояния заказа используется атрибут order-state :

    Почему атрибут может быть предпочтительнее таких классов, как .order-state-new , .order-state-pending , order-state-canceled ?

    Это потому, что атрибутом удобнее управлять. Состояние может быть изменено достаточно просто:

    Но с пользовательскими атрибутами могут возникнуть проблемы. Что если мы используем нестандартный атрибут для наших целей, а позже он появится в стандарте и будет выполнять какую-то функцию? Язык HTML живой, он растёт, появляется больше атрибутов, чтобы удовлетворить потребности разработчиков. В этом случае могут возникнуть неожиданные эффекты.

    Чтобы избежать конфликтов, существуют атрибуты вида data-*.

    Все атрибуты, начинающиеся с префикса «data-», зарезервированы для использования программистами. Они доступны в свойстве dataset .

    Например, если у elem есть атрибут «data-about» , то обратиться к нему можно как elem.dataset.about .

    Атрибуты, состоящие из нескольких слов, к примеру data-order-state , становятся свойствами, записанными с помощью верблюжьей нотации: dataset.orderState .

    Вот переписанный пример «состояния заказа»:

    Использование data-* атрибутов – валидный, безопасный способ передачи пользовательских данных.

    Пожалуйста, примите во внимание, что мы можем не только читать, но и изменять data-атрибуты. Тогда CSS обновит представление соответствующим образом: в примере выше последняя строка (*) меняет цвет на синий.

    Итого

    • Атрибуты – это то, что написано в HTML.
    • Свойства – это то, что находится в DOM-объектах.
    Свойства Атрибуты
    Тип Любое значение, стандартные свойства имеют типы, описанные в спецификации Строка
    Имя Имя регистрозависимо Имя регистронезависимо

    Методы для работы с атрибутами:

    • elem.hasAttribute(name) – проверить на наличие.
    • elem.getAttribute(name) – получить значение.
    • elem.setAttribute(name, value) – установить значение.
    • elem.removeAttribute(name) – удалить атрибут.
    • elem.attributes – это коллекция всех атрибутов.

    В большинстве ситуаций предпочтительнее использовать DOM-свойства. Нужно использовать атрибуты только тогда, когда DOM-свойства не подходят, когда нужны именно атрибуты, например:

    • Нужен нестандартный атрибут. Но если он начинается с data- , тогда нужно использовать dataset .
    • Мы хотим получить именно то значение, которое написано в HTML. Значение DOM-свойства может быть другим, например, свойство href – всегда полный URL, а нам может понадобиться получить «оригинальное» значение.

    Задачи

    Получите атрибут

    Напишите код для выбора элемента с атрибутом data-widget-name из документа и прочитайте его значение.

    HTML Tag

    The is one of the HTML5 elements added to allow embedding audio files to a web page. Since not all browsers support all audio formats, the audio file is encoded using special codecs.

    The tag or the src attribute is used to indicate the variations of the same audio file. The path to an audio file can contain an absolute or relative URLs.

    Syntax

    Example

    Attributes

    controls autoplay , loop and muted attributes are used their values can be omitted. If the attribute is specified, then by default this function is considered to be enabled.

    Атрибут controls в HTML

    Most form controls have a and a . (The latter is only used by input elements.) These are used to describe how the user interacts with the control.

    A control’s value is its internal state. As such, it might not match the user’s current input.

    For instance, if a user enters the word » three » into a numeric field that expects digits, the user’s input would be the string «three» but the control’s value would remain unchanged. Or, if a user enters the email address » awesome@example.com » (with leading whitespace) into an email field, the user’s input would be the string » awesome@example.com» but the browser’s UI for email fields might translate that into a value of » awesome@example.com » (without the leading whitespace).

    input and textarea elements have a . This is used to track the interaction between the value and default value. If it is false, value mirrors the default value. If it is true, the default value is ignored.

    To define the behavior of constraint val >input element’s multiple attribute, input elements can also have separately defined .

    To define the behavior of the maxlength and minlength attributes, as well as other APIs specific to the textarea element, all form control with a value also have an algorithm for obtaining an . By default this algorithm is to simply return the control’s value.

    The select element does not have a value; the selectedness of its option elements is what is used instead.

    4.10.17.2 Mutability

    A form control can be designated as .

    This determines (by means of definitions and requirements in this specification that rely on whether an element is so designated) whether or not the user can modify the value or checkedness of a form control, or whether or not a control can be automatically prefilled.

    4.10.17.3 Association of controls and forms

    A form-associated element can have a relationship with a form element, which is called the element’s . If a form-associated element is not associated with a form element, its form owner is said to be null.

    A form-associated element is, by default, associated with its nearest ancestor form element (as described below), but, if it is listed, may have a attribute specified to overr >

    Support: form-attribute Chrome for Android 78+ Chrome 10+ iOS Safari 5.0+ Firefox 4+ Samsung Internet 4+ UC Browser for Android 12.12+ Safari 5.1+ IE None Edge 16+ Opera Mini all+ Opera 9.5+ Android Browser 3+

    This feature allows authors to work around the lack of support for nested form elements.

    If a listed form-associated element has a form attribute specified, then that attribute’s value must be the >form element in the element’s tree.

    The rules in this section are complicated by the fact that although conforming documents or trees will never contain nested form elements, it is quite possible (e.g., using a script that performs DOM manipulation) to generate trees that have such nested elements. They are also complicated by rules in the HTML parser that, for historical reasons, can result in a form-associated element being associated with a form element that is not its ancestor.

    When a form-associated element is created, its form owner must be initialized to null (no owner).

    When a form-associated element is to be with a form, its form owner must be set to that form.

    When a listed form-associated element’s form attribute is set, changed, or removed, then the user agent must reset the form owner of that element.

    When a listed form-associated element has a form attribute and the ID of any of the elements in the tree changes, then the user agent must reset the form owner of that form-associated element.

    When a listed form-associated element has a form attribute and an element with an >Document , then the user agent must reset the form owner of that form-associated element.

    When the user agent is to of a form-associated element element , it must run the following steps:

    If all of the following conditions are true

    • element ‘s form owner is not null
    • element is not listed or its form content attribute is not present
    • element ‘s form owner is its nearest form element ancestor after the change to the ancestor chain

    then do nothing, and return.

    Set element ‘s form owner to null.

    If element is listed, has a form content attribute, and is connected, then:

    If the first element in element ‘s tree, in tree order, to have an ID that is case-sensitively equal to element ‘s form content attribute’s value, is a form element, then associate the element with that form element.

    Otherwise, if element has an ancestor form element, then associate element with the nearest such ancestor form element.

    In the following non-conforming snippet:

    Since the input name takes precedence over built-in form properties, the JavaScript reference form.method will point to the input element named «method» instead of the built-in method property.

    4.10.18.2 Submitting element directionality: the dirname attribute

    The attribute on a form control element enables the submission of the directionality of the element, and gives the name of the control that contains this value during form submission. If such an attribute is specified, its value must not be the empty string.

    In this example, a form contains a text control and a submission button:

    When the user submits the form, the user agent includes three fields, one called «comment», one called «comment.dir», and one called «mode»; so if the user types «Hello», the submission body might be something like:

    If the user manually switches to a right-to-left writing direction and enters » مرحبا «, the submission body might be something like:

    4.10.18.3 Limiting user input length: the maxlength attribute

    A , controlled by the dirty value flag, declares a limit on the number of characters a user can input. The «number of characters» is measured using JavaScript string length and, in the case of textarea elements, with all newlines normalized to a single character (as opposed to CRLF pairs).

    If an element has its form control maxlength attribute specified, the attribute’s value must be a valid non-negative integer. If the attribute is specified and applying the rules for parsing non-negative integers to its value results in a number, then that number is the element’s . If the attribute is omitted or parsing its value results in an error, then there is no maximum allowed value length.

    Constraint validation: If an element has a maximum allowed value length, its dirty value flag is true, its value was last changed by a user edit (as opposed to a change made by a script), and the JavaScript string length of the element’s API value is greater than the element’s maximum allowed value length, then the element is suffering from being too long.

    User agents may prevent the user from causing the element’s API value to be set to a value whose JavaScript string length is greater than the element’s maximum allowed value length.

    In the case of textarea elements, the API value and value differ. In particular, newline normalization is applied before the maximum allowed value length is checked (whereas the textarea wrapping transformation is not applied).

    4.10.18.4 Setting minimum input length requirements: the minlength attribute

    A , controlled by the dirty value flag, declares a lower bound on the number of characters a user can input. The «number of characters» is measured using JavaScript string length and, in the case of textarea elements, with all newlines normalized to a single character (as opposed to CRLF pairs).

    The minlength attribute does not imply the required attribute. If the form control has no required attribute, then the value can still be omitted; the minlength attribute only kicks in once the user has entered a value at all. If the empty string is not allowed, then the required attribute also needs to be set.

    If an element has its form control minlength attribute specified, the attribute’s value must be a valid non-negative integer. If the attribute is specified and applying the rules for parsing non-negative integers to its value results in a number, then that number is the element’s . If the attribute is omitted or parsing its value results in an error, then there is no minimum allowed value length.

    Constraint validation: If an element has a minimum allowed value length, its dirty value flag is true, its value was last changed by a user edit (as opposed to a change made by a script), its value is not the empty string, and the JavaScript string length of the element’s API value is less than the element’s minimum allowed value length, then the element is suffering from being too short.

    In this example, there are four text controls. The first is required, and has to be at least 5 characters long. The other three are optional, but if the user fills one in, the user has to enter at least 10 characters.

    4.10.18.5 Enabling and disabling form controls: the disabled attribute

    The content attribute is a boolean attribute.

    The disabled attribute for option elements and the disabled attribute for optgroup elements are defined separately.

    A form control is if any of the following conditions are met:

    1. The element is a button , input , select , textarea , or form-associated custom element, and the disabled attribute is specified on this element (regardless of its value).
    2. The element is a descendant of a fieldset element whose disabled attribute is specified, and is not a descendant of that fieldset element’s first legend element child, if any.

    A form control that is disabled must prevent any click events that are queued on the user interaction task source from being dispatched on the element.

    Constraint validation: If an element is disabled, it is barred from constraint validation.

    Chrome Yes Chrome Android Yes Edge 12+ Edge Mobile ? Firefox Yes Firefox Android Yes Internet Explorer 9+ Opera 9+ Opera Android Yes Safari Yes Safari iOS Yes Samsung Internet Yes WebView Android Yes

    The >disabled content attribute.

    4.10.18.6 Form submission

    can be specified both on form elements and on submit buttons (elements that represent buttons that submit forms, e.g. an input element whose type attribute is in the Submit Button state).

    Support: form-submit-attributes Chrome for Android 78+ Chrome 15+ iOS Safari 5.0+ Firefox 4+ Samsung Internet 4+ UC Browser for Android 12.12+ Safari 5.1+ IE 10+ Edge 12+ Opera Mini all+ Opera 10.6+ Android Browser 4+

    The corresponding attributes for form submission that may be specified on submit buttons are formaction , formenctype , formmethod , formnovalidate , and formtarget . When omitted, they default to the values given on the corresponding attributes on the form element.

    The and content attributes, if specified, must have a value that is a valid non-empty URL potentially surrounded by spaces.

    The of an element is the value of the element’s formaction attribute, if the element is a submit button and has such an attribute, or the value of its form owner’s action attribute, if it has one, or else the empty string.

    The and content attributes are enumerated attributes with the following keywords and states:

    • The keyword , mapping to the state , indicating the HTTP GET method.
    • The keyword , mapping to the state , indicating the HTTP POST method.
    • The keyword , mapping to the state , indicating that submitting the form is intended to close the dialog box in which the form finds itself, if any, and otherwise not submit.

    The of an element is one of those states. If the element is a submit button and has a formmethod attribute, then the element’s method is that attribute’s state; otherwise, it is the form owner’s method attribute’s state.

    Here the method attribute is used to explicitly specify the default value, » get «, so that the search query is submitted in the URL:

    On the other hand, here the method attribute is used to specify the value » post «, so that the user’s message is submitted in the HTTP request’s body:

    In this example, a form is used with a dialog . The method attribute’s » dialog » keyword is used to have the dialog automatically close when the form is submitted.

    The and content attributes are enumerated attributes with the following keywords and states:

    • The «» keyword and corresponding state.
    • The «» keyword and corresponding state.
    • The «» keyword and corresponding state.

    The of an element is one of those three states. If the element is a submit button and has a formenctype attribute, then the element’s enctype is that attribute’s state; otherwise, it is the form owner’s enctype attribute’s state.

    The and content attributes, if specified, must have values that are valid browsing context names or keywords.

    The and content attributes are boolean attributes. If present, they indicate that the form is not to be validated during submission.

    The of an element is true if the element is a submit button and the element’s formnovalidate attribute is present, or if the element’s form owner’s novalidate attribute is present, and false otherwise.

    This attribute is useful to include «save» buttons on forms that have validation constraints, to allow users to save their progress even though they haven’t fully entered the data in the form. The following example shows a simple form that has two required fields. There are three buttons: one to submit the form, which requires both fields to be filled in; one to save the form so that the user can come back and fill it in later; and one to cancel the form altogether.

    The >enctype content attribute, limited to only known values. The >novalidate content attribute. The >formaction content attribute, except that on getting, when the content attribute is missing or its value is the empty string, the element’s node document’s URL must be returned instead. The >formenctype content attribute, limited to only known values. The >formmethod content attribute, limited to only known values. The >formnovalidate content attribute. The >formtarget content attribute.

    4.10.18.7 Autofill

    Support: input-autocomplete-onoff Chrome for Android 78+ Chrome (limited) 27+ iOS Safari 5.0+ Firefox (limited) 30+ Samsung Internet 4+ UC Browser for Android 12.12+ Safari (limited) 7+ IE (limited) 11+ Edge (limited) 12+ Opera Mini all+ Opera 9+ Android Browser 2.1+

    4.10.18.7.1 Autofilling form controls: the autocomplete attribute

    User agents sometimes have features for helping users fill forms in, for example prefilling the user’s address based on earlier user input. The content attribute can be used to hint to the user agent how to, or indeed whether to, provide such a feature.

    There are two ways this attribute is used. When wearing the , the autocomplete attribute describes what input is expected from users. When wearing the , the autocomplete attribute describes the meaning of the given value.

    On an input element whose type attribute is in the H >autocomplete attribute wears the autofill anchor mantle. In all other cases, it wears the autofill expectation mantle.

    When wearing the autofill expectation mantle, the autocomplete attribute, if specified, must have a value that is an ordered set of space-separated tokens consisting of either a single token that is an ASCII case-insensitive match for the string » off «, or a single token that is an ASCII case-insensitive match for the string » on «, or autofill detail tokens.

    When wearing the autofill anchor mantle, the autocomplete attribute, if specified, must have a value that is an ordered set of space-separated tokens consisting of just autofill detail tokens (i.e. the » on » and » off » keywords are not allowed).

    are the following, in the order given below:

    Optionally, a token whose first eight characters are an ASCII case-insensitive match for the string «», meaning that the field belongs to the named group.

    For example, if there are two shipping addresses in the form, then they could be marked up as:

    Optionally, a token that is an ASCII case-insensitive match for one of the following strings:

    • «», meaning the field is part of the shipping address or contact information
    • «», meaning the field is part of the billing address or contact information

    Either of the following two options:

    A token that is an ASCII case-insensitive match for one of the following autofill field names, excluding those that are inappropriate for the control:

    (See the table below for descriptions of these values.)

    The following, in the given order:

    Optionally, a token that is an ASCII case-insensitive match for one of the following strings:

    • «», meaning the field is for contacting someone at their residence
    • «», meaning the field is for contacting someone at their workplace
    • «», meaning the field is for contacting someone regardless of location
    • «», meaning the field describes a fax machine’s contact details
    • «», meaning the field describes a pager’s or beeper’s contact details

    A token that is an ASCII case-insensitive match for one of the following autofill field names, excluding those that are inappropriate for the control:

    (See the table below for descriptions of these values.)

    As noted earlier, the meaning of the attribute and its keywords depends on the mantle that the attribute is wearing.

    The «» keyword indicates either that the control’s input data is particularly sensitive (for example the activation code for a nuclear weapon); or that it is a value that will never be reused (for example a one-time-key for a bank login) and the user will therefore have to explicitly enter the data each time, instead of being able to rely on the UA to prefill the value for them; or that the document provides its own autocomplete mechanism and does not want the user agent to provide autocompletion values.

    The «» keyword indicates that the user agent is allowed to provide the user with autocompletion values, but does not provide any further information about what kind of data the user might be expected to enter. User agents would have to use heuristics to decide what autocompletion values to suggest.

    The autofill field listed above indicate that the user agent is allowed to provide the user with autocompletion values, and specifies what kind of value is expected. The meaning of each such keyword is described in the table below.

    If the autocomplete attribute is omitted, the default value corresponding to the state of the element’s form owner’s autocomplete attribute is used instead (either » on » or » off «). If there is no form owner, then the value » on » is used.

    The autofill field listed above indicate that the value of the particular kind of value specified is that value provided for this element. The meaning of each such keyword is described in the table below.

    In this example the page has explicitly specified the currency and amount of the transaction. The form requests a credit card and other billing details. The user agent could use this information to suggest a credit card that it knows has sufficient balance and that supports the relevant currency.

    The keywords relate to each other as described in the table below. Each field name listed on a row of this table corresponds to the meaning given in the cell for that row in the column labeled «Meaning». Some fields correspond to subparts of other fields; for example, a credit card expiry date can be expressed as one field giving both the month and year of expiry (» cc-exp «), or as two fields, one giving the month (» cc-exp-month «) and one the year (» cc-exp-year «). In such cases, the names of the broader fields cover multiple rows, in which the narrower fields are defined.

    Generally, authors are encouraged to use the broader fields rather than the narrower fields, as the narrower fields tend to expose Western biases. For example, while it is common in some Western cultures to have a given name and a family name, in that order (and thus often referred to as a first name and a surname), many cultures put the family name first and the given name second, and many others simply have one name (a mononym). Having a single field is therefore more flexible.

    Some fields are only appropriate for certain form controls. An autofill field name is if the control does not belong to the group listed for that autofill field in the fifth column of the first row describing that autofill field in the table below. What controls fall into each group is described below the table.

    Field name Meaning Canonical Format Canonical Format Example Control group
    «» Full name Free-form text, no newlines Sir Timothy John Berners-Lee, OM, KBE, FRS, FREng, FRSA Text
    «» Prefix or title (e.g. «Mr.», «Ms.», «Dr.», » M lle «) Free-form text, no newlines Sir Text
    «» Given name (in some Western cultures, also known as the first name) Free-form text, no newlines Timothy Text
    «» Additional names (in some Western cultures, also known as middle names, forenames other than the first name) Free-form text, no newlines John Text
    «» Family name (in some Western cultures, also known as the last name or surname) Free-form text, no newlines Berners-Lee Text
    «» Suffix (e.g. «Jr.», «B.Sc.», «MBASW», «II») Free-form text, no newlines OM, KBE, FRS, FREng, FRSA Text
    «» Nickname, screen name, handle: a typically short name used instead of the full name Free-form text, no newlines Tim Text
    «» Job title (e.g. «Software Engineer», «Senior Vice President», «Deputy Managing Director») Free-form text, no newlines Professor Text
    «» A username Free-form text, no newlines timbl Text
    «» A new password (e.g. when creating an account or changing a password) Free-form text, no newlines GUMFXbadyrS3 Password
    «» The current password for the account >username field (e.g. when logging in) Free-form text, no newlines qwerty Password
    «» One-time code used for verifying user identity Free-form text, no newlines 123456 Password
    «» Company name corresponding to the person, address, or contact information in the other fields associated with this field Free-form text, no newlines World Wide Web Consortium Text
    «» Street address (multiple lines, newlines preserved) Free-form text 32 Vassar Street
    MIT Room 32-G524
    Multiline
    «» Street address (one line per field) Free-form text, no newlines 32 Vassar Street Text
    «» Free-form text, no newlines MIT Room 32-G524 Text
    «» Free-form text, no newlines Text
    «» The most fine-grained administrative level, in addresses with four administrative levels Free-form text, no newlines Text
    «» The third administrative level, in addresses with three or more administrative levels Free-form text, no newlines Text
    «» The second administrative level, in addresses with two or more administrative levels; in the countries with two administrative levels, this would typically be the city, town, village, or other locality within which the relevant street address is found Free-form text, no newlines Cambridge Text
    «» The broadest administrative level in the address, i.e. the province within which the locality is found; for example, in the US, this would be the state; in Switzerland it would be the canton; in the UK, the post town Free-form text, no newlines MA Text
    «» Country code Valid ISO 3166-1-alpha-2 country code [ISO3166] US Text
    «» Country name Free-form text, no newlines; derived from country in some cases US Text
    «» Postal code, post code, ZIP code, CEDEX code (if CEDEX, append «CEDEX», and the arrondissement, if relevant, to the address-level2 field) Free-form text, no newlines 02139 Text
    «» Full name as given on the payment instrument Free-form text, no newlines Tim Berners-Lee Text
    «» Given name as given on the payment instrument (in some Western cultures, also known as the first name) Free-form text, no newlines Tim Text
    «» Additional names given on the payment instrument (in some Western cultures, also known as middle names, forenames other than the first name) Free-form text, no newlines Text
    «» Family name given on the payment instrument (in some Western cultures, also known as the last name or surname) Free-form text, no newlines Berners-Lee Text
    «» Code identifying the payment instrument (e.g. the credit card number) ASCII digits 4114360123456785 Text
    «» Expiration date of the payment instrument Valid month string 2014-12 Month
    «» Month component of the expiration date of the payment instrument Valid integer in the range 1..12 12 Numeric
    «» Year component of the expiration date of the payment instrument Valid integer greater than zero 2014 Numeric
    «» Security code for the payment instrument (also known as the card security code (CSC), card validation code (CVC), card verification value (CVV), signature panel code (SPC), credit card ID (CCID), etc) ASCII digits 419 Text
    «» Type of payment instrument Free-form text, no newlines Visa Text
    «» The currency that the user would prefer the transaction to use ISO 4217 currency code [ISO4217] GBP Text
    «» The amount that the user would like for the transaction (e.g. when entering a bid or sale price) Valid floating-point number 401.00 Numeric
    «» Preferred language Valid BCP 47 language tag [BCP47] en Text
    «» Birthday Valid date string 1955-06-08 Date
    «» Day component of birthday Valid integer in the range 1..31 8 Numeric
    «» Month component of birthday Valid integer in the range 1..12 6 Numeric
    «» Year component of birthday Valid integer greater than zero 1955 Numeric
    «» Gender identity (e.g. Female, Fa’afafine) Free-form text, no newlines Male Text
    «» Home page or other Web page corresponding to the company, person, address, or contact information in the other fields associated with this field Valid URL string https://www.w3.org/People/Berners-Lee/ URL
    «» Photograph, icon, or other image corresponding to the company, person, address, or contact information in the other fields associated with this field Valid URL string https://www.w3.org/Press/Stock/Berners-Lee/2001-europaeum-eighth.jpg URL
    «» Full telephone number, including country code ASCII digits and U+0020 SPACE characters, prefixed by a U+002B PLUS SIGN character (+) +1 617 253 5702 Tel
    «» Country code component of the telephone number ASCII digits prefixed by a U+002B PLUS SIGN character (+) +1 Text
    «» Telephone number without the county code component, with a country-internal prefix applied if applicable ASCII digits and U+0020 SPACE characters 617 253 5702 Text
    «» Area code component of the telephone number, with a country-internal prefix applied if applicable ASCII digits 617 Text
    «» Telephone number without the country code and area code components ASCII digits 2535702 Text
    «» First part of the component of the telephone number that follows the area code, when that component is split into two components ASCII digits 253 Text
    «» Second part of the component of the telephone number that follows the area code, when that component is split into two components ASCII digits 5702 Text
    «» Telephone number internal extension code ASCII digits 1000 Text
    «» E-mail address Valid e-mail address timbl@w3.org E-mail
    «» URL representing an instant messaging protocol endpoint (for example, » aim:goim?screenname=example » or » xmpp:fred@example.net «) Valid URL string irc://example.org/timbl,isuser URL

    The groups correspond to controls as follows:

    input elements with a type attribute in the Hidden state input elements with a type attribute in the Text state input elements with a type attribute in the Search state textarea elements select elements input elements with a type attribute in the Hidden state textarea elements select elements input elements with a type attribute in the Hidden state input elements with a type attribute in the Text state input elements with a type attribute in the Search state input elements with a type attribute in the Password state textarea elements select elements input elements with a type attribute in the Hidden state input elements with a type attribute in the Text state input elements with a type attribute in the Search state input elements with a type attribute in the URL state textarea elements select elements input elements with a type attribute in the Hidden state input elements with a type attribute in the Text state input elements with a type attribute in the Search state input elements with a type attribute in the E-mail state textarea elements select elements input elements with a type attribute in the Hidden state input elements with a type attribute in the Text state input elements with a type attribute in the Search state input elements with a type attribute in the Telephone state textarea elements select elements input elements with a type attribute in the Hidden state input elements with a type attribute in the Text state input elements with a type attribute in the Search state input elements with a type attribute in the Number state textarea elements select elements input elements with a type attribute in the Hidden state input elements with a type attribute in the Text state input elements with a type attribute in the Search state input elements with a type attribute in the Month state textarea elements select elements input elements with a type attribute in the Hidden state input elements with a type attribute in the Text state input elements with a type attribute in the Search state input elements with a type attribute in the Date state textarea elements select elements

    Address levels: The » address-level1 » – » address-level4 » fields are used to describe the locality of the street address. Different locales have different numbers of levels. For example, the US uses two levels (state and town), the UK uses one or two depending on the address (the post town, and in some cases the locality), and China can use three (province, city, district). The » address-level1 » field represents the widest administrative division. Different locales order the fields in different ways; for example, in the US the town (level 2) precedes the state (level 1); while in Japan the prefecture (level 1) precedes the city (level 2) which precedes the district (level 3). Authors are encouraged to provide forms that are presented in a way that matches the country’s conventions (hiding, showing, and rearranging fields accordingly as the user changes the country).

    4.10.18.7.2 Processing model

    Each input element to which the autocomplete attribute applies, each select element, and each textarea element, has an , an , an , and an .

    The autofill field name specifies the specific kind of data expected in the field, e.g. » street-address » or » cc-exp «.

    The autofill scope identifies the group of fields whose information concerns the same subject, and consists of the autofill hint set with, if applicable, the » section-* » prefix, e.g. » billing «, » section-parent shipping «, or » section-child shipping home «.

    These values are defined as the result of running the following algorithm:

    If the element has no autocomplete attribute, then jump to the step labeled default.

    If tokens is empty, then jump to the step labeled default.

    Let index be the index of the last token in tokens .

    If the index th token in tokens is not an ASCII case-insensitive match for one of the tokens given in the first column of the following table, or if the number of tokens in tokens is greater than the maximum number given in the cell in the second column of that token’s row, then jump to the step labeled default. Otherwise, let field be the string given in the cell of the first column of the matching row, and let category be the value of the cell in the third column of that same row.

    Token Maximum number of tokens Category
    » off » 1 Off
    » on » 1 Automatic
    » name » 3 Normal
    » honorific-prefix » 3 Normal
    » given-name » 3 Normal
    » additional-name » 3 Normal
    » family-name » 3 Normal
    » honorific-suffix » 3 Normal
    » nickname » 3 Normal
    » organization-title » 3 Normal
    » username » 3 Normal
    » new-password » 3 Normal
    » current-password » 3 Normal
    » one-time-code » 3 Normal
    » organization » 3 Normal
    » street-address » 3 Normal
    » address-line1 » 3 Normal
    » address-line2 » 3 Normal
    » address-line3 » 3 Normal
    » address-level4 » 3 Normal
    » address-level3 » 3 Normal
    » address-level2 » 3 Normal
    » address-level1 » 3 Normal
    » country » 3 Normal
    » country-name » 3 Normal
    » postal-code » 3 Normal
    » cc-name » 3 Normal
    » cc-given-name » 3 Normal
    » cc-additional-name » 3 Normal
    » cc-family-name » 3 Normal
    » cc-number » 3 Normal
    » cc-exp » 3 Normal
    » cc-exp-month » 3 Normal
    » cc-exp-year » 3 Normal
    » cc-csc » 3 Normal
    » cc-type » 3 Normal
    » transaction-currency » 3 Normal
    » transaction-amount » 3 Normal
    » language » 3 Normal
    » bday » 3 Normal
    » bday-day » 3 Normal
    » bday-month » 3 Normal
    » bday-year » 3 Normal
    » sex » 3 Normal
    » url » 3 Normal
    » photo » 3 Normal
    » tel » 4 Contact
    » tel-country-code » 4 Contact
    » tel-national » 4 Contact
    » tel-area-code » 4 Contact
    » tel-local » 4 Contact
    » tel-local-prefix » 4 Contact
    » tel-local-suffix » 4 Contact
    » tel-extension » 4 Contact
    » email » 4 Contact
    » impp » 4 Contact

    If category is Off or Automatic but the element’s autocomplete attribute is wearing the autofill anchor mantle, then jump to the step labeled default.

    If category is Off, let the element’s autofill field name be the string » off «, let its autofill hint set be empty, and let its IDL-exposed autofill value be the string » off «. Then, return.

    If category is Automatic, let the element’s autofill field name be the string » on «, let its autofill hint set be empty, and let its IDL-exposed autofill value be the string » on «. Then, return.

    Let scope tokens be an empty list.

    Let hint tokens be an empty set.

    Let IDL value have the same value as field .

    If the index th token in tokens is the first entry, then skip to the step labeled done.

    Decrement index by one.

    If category is Contact and the index th token in tokens is an ASCII case-insensitive match for one of the strings in the following list, then run the substeps that follow:

    The substeps are:

    Let contact be the matching string from the list above.

    Insert contact at the start of scope tokens .

    Add contact to hint tokens .

    Let IDL value be the concatenation of contact , a U+0020 SPACE character, and the previous value of IDL value (which at this point will always be field ).

    If the index th entry in tokens is the first entry, then skip to the step labeled done.

    Decrement index by one.

    If the index th token in tokens is an ASCII case-insensitive match for one of the strings in the following list, then run the substeps that follow:

    The substeps are:

    Let mode be the matching string from the list above.

    Insert mode at the start of scope tokens .

    Add mode to hint tokens .

    Let IDL value be the concatenation of mode , a U+0020 SPACE character, and the previous value of IDL value (which at this point will either be field or the concatenation of contact , a space, and field ).

    If the index th entry in tokens is the first entry, then skip to the step labeled done.

    Decrement index by one.

    If the index th entry in tokens is not the first entry, then jump to the step labeled default.

    If the first eight characters of the index th token in tokens are not an ASCII case-insensitive match for the string » section- «, then jump to the step labeled default.

    Let section be the index th token in tokens , converted to ASCII lowercase.

    Insert section at the start of scope tokens .

    Let IDL value be the concatenation of section , a U+0020 SPACE character, and the previous value of IDL value .

    Done: Let the element’s autofill hint set be hint tokens .

    Let the element’s autofill scope be scope tokens .

    Let the element’s autofill field name be field .

    Let the element’s IDL-exposed autofill value be IDL value .

    Default: Let the element’s IDL-exposed autofill value be the empty string, and its autofill hint set and autofill scope be empty.

    If the element’s autocomplete attribute is wearing the autofill anchor mantle, then let the element’s autofill field name be the empty string and return.

    Let form be the element’s form owner, if any, or null otherwise.

    If form is not null and form ‘s autocomplete attribute is in the off state, then let the element’s autofill field name be » off «.

    Otherwise, let the element’s autofill field name be » on «.

    For the purposes of autofill, a depends on the kind of control:

    An input element with its type attribute in the E-mail state and with the multiple attribute specified The element’s values. Any other input element A textarea element The element’s value. A select element with its multiple attribute specified The option elements in the select element’s list of options that have their selectedness set to true. Any other select element The option element in the select element’s list of options that has its selectedness set to true.

    How to process the autofill hint set, autofill scope, and autofill field name depends on the mantle that the autocomplete attribute is wearing.

    When an element’s autofill field name is » off «, the user agent should not remember the control’s data, and should not offer past values to the user.

    Banks frequently do not want UAs to prefill login information:

    When an element’s autofill field name is not » off «, the user agent may store the control’s data, and may offer previously stored values to the user.

    For example, suppose a user visits a page with this control:

    This might render as follows:

    Suppose that on the first visit to this page, the user selects «Zambia». On the second visit, the user agent could duplicate the entry for Zambia at the top of the list, so that the interface instead looks like this:

    When the autofill field name is » on «, the user agent should attempt to use heuristics to determine the most appropriate values to offer the user, e.g. based on the element’s name value, the position of the element in its tree, what other fields exist in the form, and so forth.

    When the autofill field name is one of the names of the autofill fields described above, the user agent should provide suggestions that match the meaning of the field name as given in the table earlier in this section. The autofill hint set should be used to select amongst multiple possible suggestions.

    For example, if a user once entered one address into fields that used the » shipping » keyword, and another address into fields that used the » billing » keyword, then in subsequent forms only the first address would be suggested for form controls whose autofill hint set contains the keyword » shipping «. Both addresses might be suggested, however, for address-related form controls whose autofill hint set does not contain either keyword.

    When the autofill field name is not the empty string, then the user agent must act as if the user had specified the control’s data for the given autofill hint set, autofill scope, and autofill field name combination.

    When the user agent , elements with the same form owner and the same autofill scope must use data relating to the same person, address, payment instrument, and contact details. When a user agent autofills » country » and » country-name » fields with the same form owner and autofill scope, and the user agent has a value for the country » field(s), then the » country-name » field(s) must be filled using a human-readable name for the same country. When a user agent fills in multiple fields at once, all fields with the same autofill field name, form owner and autofill scope must be filled with the same value.

    Suppose a user agent knows of two phone numbers, +1 555 123 1234 and +1 555 666 7777. It would not be conforming for the user agent to fill a field with autocomplete=»shipping tel-local-prefix» with the value «123» and another field in the same form with autocomplete=»shipping tel-local-suffix» with the value «7777». The only valid prefilled values given the aforementioned information would be «123» and «1234», or «666» and «7777», respectively.

    Similarly, if a form for some reason contained both a » cc-exp » field and a » cc-exp-month » field, and the user agent prefilled the form, then the month component of the former would have to match the latter.

    This requirement interacts with the autofill anchor mantle also. Consider the following markup snippet:

    The only value that a conforming user agent could suggest in the text control is «TreePlate», the value given by the h >input element.

    The » section-* » tokens in the autofill scope are opaque; user agents must not attempt to derive meaning from the precise values of these tokens.

    For example, it would not be conforming if the user agent decided that it should offer the address it knows to be the user’s daughter’s address for » section-child » and the addresses it knows to be the user’s spouses’ addresses for » section-spouse «.

    The autocompletion mechanism must be implemented by the user agent acting as if the user had modified the control’s data, and must be done at a time where the element is mutable (e.g. just after the element has been inserted into the document, or when the user agent stops parsing). User agents must only prefill controls using values that the user could have entered.

    For example, if a select element only has option elements with values «Steve» and «Rebecca», «Jay», and «Bob», and has an autofill field name » given-name «, but the user agent’s only >select element to the value «Evan», since the user could not have done so themselves.

    A user agent prefilling a form control must not discriminate between form controls that are in a document tree and those that are connected; that is, it is not conforming to make the decision on whether or not to autofill based on whether the element’s root is a shadow root versus a Document .

    A user agent prefilling a form control’s value must not cause that control to suffer from a type mismatch, suffer from being too long, suffer from being too short, suffer from an underflow, suffer from an overflow, or suffer from a step mismatch. A user agent prefilling a form control’s value must not cause that control to suffer from a pattern mismatch either. Where possible given the control’s constraints, user agents must use the format given as canonical in the aforementioned table. Where it’s not possible for the canonical format to be used, user agents should use heuristics to attempt to convert values so that they can be used.

    For example, if the user agent knows that the user’s middle name is «Ines», and attempts to prefill a form control that looks like this:

    . then the user agent could convert «Ines» to «I» and prefill it that way.

    A more elaborate example would be with month values. If the user agent knows that the user’s birthday is the 27th of July 2012, then it might try to prefill all of the following controls with slightly different values, all driven from this information:

    2012-07 The day is dropped since the Month state only accepts a month/year combination. (Note that this example is non-conforming, because the autofill field name bday is not allowed with the Month state.)
    July The user agent picks the month from the listed options, either by noticing there are twelve options and picking the 7th, or by recognizing that one of the strings (three characters «Jul» followed by a newline and a space) is a close match for the name of the month (July) in one of the user agent’s supported languages, or through some other similar mechanism.
    7 User agent converts «July» to a month number in the range 1..12, like the field.
    6 User agent converts «July» to a month number in the range 0..11, like the field.
    User agent doesn’t fill in the field, since it can’t make a good guess as to what the form expects.

    A user agent may allow the user to overr >off » to » on » to allow values to be remembered and prefilled despite the page author’s objections, or to always » off «, never remembering values.

    More specifically, user agents may in particular cons >on » or » off «, with the value given in the second cell of that row. If this table is used, the replacements must be done in tree order, since all but the first row references the autofill field name of earlier elements. When the descriptions below refer to form controls being preceded or followed by others, they mean in the list of listed elements that share the same form owner.

    Form control New autofill field name
    an input element whose type attribute is in the Text state that is followed by an input element whose type attribute is in the Password state » username »
    an input element whose type attribute is in the Password state that is preceded by an input element whose autofill field name is » username » » current-password »
    an input element whose type attribute is in the Password state that is preceded by an input element whose autofill field name is » current-password » » new-password »
    an input element whose type attribute is in the Password state that is preceded by an input element whose autofill field name is » new-password » » new-password «

    The IDL attribute, on getting, must return the element’s IDL-exposed autofill value, and on setting, must reflect the content attribute of the same name.

    4.10.19 APIs for the text control selections

    The input and textarea elements define several attributes and methods for handling their selection. Their shared algorithms are defined here.

    Selects everything in the text control.

    Returns the offset to the start of the selection.

    Can be set, to change the start of the selection.

    Returns the offset to the end of the selection.

    Can be set, to change the end of the selection.

    Returns the current direction of the selection.

    Can be set, to change the direction of the selection.

    The possible values are » forward «, » backward «, and » none «.

    element . setSelectionRange ( start , end [, direction ] )

    Changes the selection to cover the given substring in the given direction. If the direction is omitted, it will be reset to be the platform default (none or forward).

    element . setRangeText ( replacement [, start , end [, selectionMode ] ] )

    Replaces a range of text with the new text. If the start and end arguments are not provided, the range is assumed to be the selection.

    The final argument determines how the selection will be set after the text has been replaced. The possible values are:

    » select » Selects the newly inserted text. » start » Moves the selection to just before the inserted text. » end » Moves the selection to just after the selected text. » preserve » Attempts to preserve the selection. This is the default.

    All input elements to which these APIs apply, and all textarea elements, have either a or a at all times (even for elements that are not being rendered). The initial state must consist of a text entry cursor at the beginning of the control.

    For input elements, these APIs must operate on the element’s value. For textarea elements, these APIs must operate on the element’s API value. In the below algorithms, we call the value string being operated on the .

    The use of API value instead of raw value for textarea elements means that U+000D (CR) characters are normalized away. For example,

    If we had operated on the raw value of » A\r\nB «, then we would have replaced the characters » A\r «, ending up with a result of » replaced\nB «. But since we used the API value of » A\nB «, we replaced the characters » A\n «, giving » replacedB «.

    Whenever the relevant value changes for an element to which these APIs apply, run these steps:

    If the element has a selection:

    If the start of the selection is now past the end of the relevant value, set it to the end of the relevant value.

    If the end of the selection is now past the end of the relevant value, set it to the end of the relevant value.

    If the user agent does not support empty selection, and both the start and end of the selection are now pointing to the end of the relevant value, then instead set the element’s text entry cursor position to the end of the relevant value, removing any selection.

    Otherwise, the element must have a text entry cursor position position. If it is now past the end of the relevant value, set it to the end of the relevant value.

    In some cases where the relevant value changes, other parts of the specification will also modify the text entry cursor position, beyond just the clamping steps above. For example, see the value setter for textarea .

    Characters with no visible rendering, such as U+200D ZERO WIDTH JOINER, still count as characters. Thus, for instance, the selection can include just an invisible character, and the text insertion cursor can be placed to one side or another of such a character.

    Where possible, user interface features for changing the text selection in input and textarea elements must be implemented using the set the selection range algorithm so that, e.g., all the same events fire.

    The selections of input and textarea elements have a , which is either » forward «, » backward «, or » none «. The exact meaning of the selection direction depends on the platform. This direction is set when the user manipulates the selection. The initial selection direction must be » none » if the platform supports that direction, or » forward » otherwise.

    To of an element to a given direction, update the element’s selection direction to the given direction, unless the direction is » none » and the platform does not support that direction; in that case, update the element’s selection direction to » forward «.

    On Windows, the direction indicates the position of the caret relative to the selection: a » forward » selection has the caret at the end of the selection and a » backward » selection has the caret at the start of the selection. Windows has no » none » direction.

    On Mac, the direction indicates which end of the selection is affected when the user adjusts the size of the selection using the arrow keys with the Shift modifier: the » forward » direction means the end of the selection is modified, and the » backward » direction means the start of the selection is modified. The » none » direction is the default on Mac, it indicates that no particular direction has yet been selected. The user sets the direction implicitly when first adjusting the selection, based on which directional arrow key was used.

    Chrome ? Chrome Android ? Edge ? Edge Mobile ? Firefox ? Firefox Android ? Internet Explorer ? Opera ? Opera Android ? Safari ? Safari iOS ? Samsung Internet ? WebView Android ?

    The method, when invoked, must run the following steps:

    If this element is an input element, and either select() does not apply to this element or the corresponding control has no selectable text, return.

    For instance, in a user agent where is rendered as a color well with a picker, as opposed to a text control accepting a hexadecimal color code, there would be no selectable text, and thus calls to the method are ignored.

    The attribute’s getter must run the following steps:

    If this element is an input element, and selectionStart does not apply to this element, return null.

    If there is no selection, return the offset (in logical order) within the relevant value to the character that immediately follows the text entry cursor.

    Return the offset (in logical order) within the relevant value to the character that immediately follows the start of the selection.

    The selectionStart attribute’s setter must run the following steps:

    If this element is an input element, and selectionStart does not apply to this element, throw an » InvalidStateError » DOMException .

    Let end be the value of this element’s selectionEnd attribute.

    If end is less than the given value, set end to the given value.

    Set the selection range with the given value, end , and the value of this element’s selectionDirection attribute.

    The attribute’s getter must run the following steps:

    If this element is an input element, and selectionEnd does not apply to this element, return null.

    If there is no selection, return the offset (in logical order) within the relevant value to the character that immediately follows the text entry cursor.

    Return the offset (in logical order) within the relevant value to the character that immediately follows the end of the selection.

    The selectionEnd attribute’s setter must run the following steps:

    If this element is an input element, and selectionEnd does not apply to this element, throw an » InvalidStateError » DOMException .

    Set the selection range with the value of this element’s selectionStart attribute, the given value, and the value of this element’s selectionDirection attribute.

    The attribute’s getter must run the following steps:

    If this element is an input element, and selectionDirection does not apply to this element, return null.

    The selectionDirection attribute’s setter must run the following steps:

    Set the selection range with the value of this element’s selectionStart attribute, the value of this element’s selectionEnd attribute, and the given value.

    Chrome 1+ Chrome Android Yes Edge 12+ Edge Mobile ? Firefox 1+ Firefox Android Yes Internet Explorer 9+ Opera 8+ Opera Android Yes Safari Yes Safari iOS Yes Samsung Internet Yes WebView Android Yes

    The method, when invoked, must run the following steps:

    Support: input-selection Chrome for Android 78+ Chrome 4+ iOS Safari 4.0+ Firefox 2+ Samsung Internet 4+ UC Browser for Android 12.12+ Safari 4+ IE 9+ Edge 12+ Opera Mini None Opera 10.6+ Android Browser 2.1+

    Set the selection range with start , end , and direction .

    To with an integer or null start , an integer or null or the special value infinity end , and optionally a string direction , run the following steps:

    If start is null, let start be zero.

    If end is null, let end be zero.

    Set the selection of the text control to the sequence of characters within the relevant value starting with the character at the start th position (in logical order) and ending with the character at the ( end -1) th position. Arguments greater than the length of the relevant value of the text control (including the special value infinity) must be treated as pointing at the end of the text control. If end is less than or equal to start then the start of the selection and the end of the selection must both be placed immediately before the character with offset end . In UAs where there is no concept of an empty selection, this must set the cursor to be just before the character with offset end .

    If direction is not a case-sensitive match for either the string » backward » or » forward «, or if the direction argument was omitted, set direction to » none «.

    Set the selection direction of the text control to direction .

    If the previous steps caused the selection of the text control to be modified (in either extent or direction), then queue a task, using the user interaction task source, to fire an event named select at the element, with the bubbles attribute initialized to true.

    The method, when invoked, must run the following steps:

    If this element is an input element, and setRangeText() does not apply to this element, throw an » InvalidStateError » DOMException .

    Set this element’s dirty value flag to true.

    If the method has only one argument, then let start and end have the values of the selectionStart attribute and the selectionEnd attribute respectively.

    Otherwise, let start , end have the values of the second and third arguments respectively.

    If start is greater than end , then throw an » IndexSizeError » DOMException .

    If start is greater than the length of the relevant value of the text control, then set it to the length of the relevant value of the text control.

    If end is greater than the length of the relevant value of the text control, then set it to the length of the relevant value of the text control.

    Let selection start be the current value of the selectionStart attribute.

    Let selection end be the current value of the selectionEnd attribute.

    If start is less than end , delete the sequence of characters within the element’s relevant value starting with the character at the start th position (in logical order) and ending with the character at the ( end -1) th position.

    Insert the value of the first argument into the text of the relevant value of the text control, immediately before the start th character.

    Let new length be the length of the value of the first argument.

    Let new end be the sum of start and new length .

    Run the appropriate set of substeps from the following list:

    If the fourth argument’s value is «»

    Let selection start be start .

    Let selection end be new end .

    If the fourth argument’s value is «»

    Let selection start and selection end be start .

    If the fourth argument’s value is «»

    Let selection start and selection end be new end .

    If the fourth argument’s value is «» If the method has only one argument

    Let old length be end minus start .

    Let delta be new length minus old length .

    If selection start is greater than end , then increment it by delta . (If delta is negative, i.e. the new text is shorter than the old text, then this will decrease the value of selection start .)

    Otherwise: if selection start is greater than start , then set it to start . (This snaps the start of the selection to the start of the new text if it was in the middle of the text that it replaced.)

    If selection end is greater than end , then increment it by delta in the same way.

    Otherwise: if selection end is greater than start , then set it to new end . (This snaps the end of the selection to the end of the new text if it was in the middle of the text that it replaced.)

    Set the selection range with selection start and selection end .

    The setRangeText() method uses the following enumeration:

    To obtain the currently selected text, the following JavaScript suffices:

    . where control is the input or textarea element.

    To add some text at the start of a text control, while maintaining the text selection, the three attributes must be preserved:

    . where control is the input or textarea element.

    4.10.20 Constraints

    4.10.20.1 Definitions

    A submittable element is a except when a condition has . (For example, an element is barred from constraint val >object element.)

    An element can have a defined. Initially, an element must have its custom val >setCustomValidity() method, except for form-associated custom elements. Form-associated custom elements can have a custom val >ElementInternals object’s setValidity() method. The user agent should use the custom validity error message when alerting the user to the problem with the control.

    An element can be constrained in various ways. The following is the list of that a form control can be in, making the control invalid for the purposes of constraint validation. (The definitions below are non-normative; other parts of this specification define more precisely when each state applies or does not.)

    When a control has no value but has a required attribute ( input required , textarea required ); or, more complicated rules for select elements and controls in radio button groups, as specified in their sections.

    When the setValidity() method sets valueMissing flag to true for a form-associated custom element.

    When a control that allows arbitrary user input has a value that is not in the correct syntax (E-mail, URL).

    When the setValidity() method sets typeMismatch flag to true for a form-associated custom element.

    When a control has a value that doesn’t satisfy the pattern attribute.

    When the setValidity() method sets patternMismatch flag to true for a form-associated custom element.

    When the setValidity() method sets tooLong flag to true for a form-associated custom element.

    When the setValidity() method sets tooShort flag to true for a form-associated custom element.

    When a control has a value that is not the empty string and is too low for the min attribute.

    When the setValidity() method sets rangeUnderflow flag to true for a form-associated custom element.

    When a control has a value that is not the empty string and is too high for the max attribute.

    When the setValidity() method sets rangeOverflow flag to true for a form-associated custom element.

    When a control has a value that doesn’t fit the rules given by the step attribute.

    When the setValidity() method sets stepMismatch flag to true for a form-associated custom element.

    When a control has incomplete input and the user agent does not think the user ought to be able to submit the form in its current state.

    When the setValidity() method sets badInput flag to true for a form-associated custom element.

    When a control’s custom val >setCustomValidity() method or ElementInternals ‘s setValidity() method) is not the empty string.

    An element can still suffer from these states even when the element is disabled; thus these states can be represented in the DOM even if validating the form during submission wouldn’t indicate a problem to the user.

    An element if it is not suffering from any of the above validity states.

    4.10.20.2 Constraint validation

    When the user agent is required to of form element form , it must run the following steps, which return either a positive result (all the controls in the form are valid) or a negative result (there are invalid controls) along with a (possibly empty) list of elements that are invalid and for which no script has claimed responsibility:

    Let controls be a list of all the submittable elements whose form owner is form , in tree order.

    Let invalid controls be an initially empty list of elements.

    For each element field in controls , in tree order:

    If field is not a candidate for constraint validation, then move on to the next element.

    Otherwise, if field satisfies its constraints, then move on to the next element.

    Otherwise, add field to invalid controls .

    If invalid controls is empty, then return a positive result.

    Let unhandled invalid controls be an initially empty list of elements.

    For each element field in invalid controls , if any, in tree order:

    Let notCanceled be the result of firing an event named invalid at field , with the cancelable attribute initialized to true.

    If notCanceled is true, then add field to unhandled invalid controls .

    Return a negative result with the list of elements in the unhandled invalid controls list.

    If a user agent is to of form element form , then the user agent must run the following steps:

    Statically validate the constraints of form , and let unhandled invalid controls be the list of elements returned if the result was negative.

    If the result was positive, then return that result.

    Report the problems with the constraints of at least one of the elements given in unhandled invalid controls to the user.

    User agents may focus one of those elements in the process, by running the focusing steps for that element, and may change the scrolling position of the document, or perform some other action that brings the element to the user’s attention. For elements that are form-associated custom elements, user agents should use their validation anchor instead, for the purposes of these actions.

    User agents may report more than one constraint violation.

    User agents may coalesce related constraint violation reports if appropriate (e.g. if multiple radio buttons in a group are marked as required, only one error need be reported).

    If one of the controls is not being rendered (e.g. it has the hidden attribute set) then user agents may report a script error.

    Return a negative result.

    Chrome 10+ Chrome Android 18+ Edge 12+ Edge Mobile ? Firefox 4+ Firefox Android 64+ Internet Explorer 10+ Opera 10+ Opera Android 12+ Safari 5+ Safari iOS 5+ Samsung Internet 4.0+ WebView Android 4+

    4.10.20.3 The

    Support: constraint-val > Chrome for Android 78+ Chrome 40+ iOS Safari 10.0+ Firefox 51+ Samsung Internet 4+ UC Browser for Android 12.12+ Safari 10+ IE (limited) 10+ Edge 17+ Opera Mini None Opera 27+ Android Browser 76+

    Returns true if the element will be validated when the form is submitted; false otherwise.

    Sets a custom error, so that the element would fail to validate. The given message is the message to be shown to the user when reporting the problem to the user.

    If the argument is the empty string, clears the custom error.

    Returns true if the element has no value but is a required field; false otherwise.

    Returns true if the element’s value is not in the correct syntax; false otherwise.

    Returns true if the element’s value doesn’t match the provided pattern; false otherwise.

    Returns true if the element’s value is longer than the provided maximum length; false otherwise.

    Returns true if the element’s value, if it is not the empty string, is shorter than the provided minimum length; false otherwise.

    Returns true if the element’s value is lower than the provided minimum; false otherwise.

    Returns true if the element’s value is higher than the provided maximum; false otherwise.

    Returns true if the element’s value doesn’t fit the rules given by the step attribute; false otherwise.

    Returns true if the user has provided input in the user interface that the user agent is unable to convert to a value; false otherwise.

    Returns true if the element has a custom error; false otherwise.

    Returns true if the element’s value has no validity problems; false otherwise.

    Returns true if the element’s value has no val >invalid event at the element in the latter case.

    Returns true if the element’s value has no val >invalid event at the element, and (if the event isn’t canceled) reports the problem to the user.

    Returns the error message that would be shown to the user if the element was to be checked for validity.

    Chrome 46+ Chrome Android 46+ Edge 12+ Edge Mobile ? Firefox 1+ Firefox Android 4+ Internet Explorer Yes Opera Yes Opera Android Yes Safari 6+ Safari iOS Yes Samsung Internet ? WebView Android 46+

    The attribute’s getter must return true, if this element is a candidate for constraint validation, and false otherwise (i.e., false if any conditions are barring it from constraint validation).

    The attribute of ElementInternals interface, on getting, must throw a » NotSupportedError » DOMException if the target element is not a form-associated custom element. Otherwise, it must return true if the target element is a candidate for constraint validation, and false otherwise.

    Chrome Yes Chrome Android Yes Edge 12+ Edge Mobile ? Firefox 1+ Firefox Android 4+ Internet Explorer Yes Opera Yes Opera Android Yes Safari 6+ Safari iOS Yes Samsung Internet ? WebView Android Yes

    Chrome Yes Chrome Android Yes Edge 12+ Edge Mobile ? Firefox 4+ Firefox Android 4+ Internet Explorer Yes Opera Yes Opera Android Yes Safari Yes Safari iOS Yes Samsung Internet ? WebView Android Yes

    The method, when invoked, must set the custom validity error message to message .

    In the following example, a script checks the value of a form control each time it is edited, and whenever it is not a val >setCustomValidity() method to set an appropriate message.

    The attribute’s getter must return a ValidityState object that represents the validity states of this element. This object is live.

    The attribute of ElementInternals interface, on getting, must throw a » NotSupportedError » DOMException if the target element is not a form-associated custom element. Otherwise, it must return a ValidityState object that represents the validity states of the target element. This object is live.

    Chrome 15+ Chrome Android Yes Edge 12+ Edge Mobile ? Firefox 4+ Firefox Android 64+ Internet Explorer 10+ Opera 12.1+ Opera Android 12.1+ Safari 11+ Safari iOS 5+ Samsung Internet 4.0+ WebView Android 4+

    A ValidityState object has the following attributes. On getting, they must return true if the corresponding condition given in the following list is true, and false otherwise.

    Chrome 15+ Chrome Android Yes Edge 12+ Edge Mobile ? Firefox 4+ Firefox Android 64+ Internet Explorer 10+ Opera 15+ Opera Android 14+ Safari 11+ Safari iOS 5+ Samsung Internet 4.0+ WebView Android 4+

    Chrome 40+ Chrome Android Yes Edge 17+ Edge Mobile ? Firefox 51+ Firefox Android 64+ Internet Explorer No Opera 27+ Opera Android 27+ Safari 11+ Safari iOS 10+ Samsung Internet 4.0+ WebView Android 67+

    Chrome 25+ Chrome Android Yes Edge 14+ Edge Mobile ? Firefox 29+ Firefox Android 64+ Internet Explorer No Opera 15+ Opera Android 14+ Safari 11+ Safari iOS 7+ Samsung Internet 4.0+ WebView Android 4.4+

    Где разместить атрибут aria-controls в моей разметке вкладок

    Я настраиваю раздел содержимого с вкладками на моей странице с помощью script, который следует за следующим синтаксисом:

    Я буду устанавливать различные роли ARIA ( role=»tablist» , role=»tab» , role=»tabpanel» и т.д.) на этой структурной разметке через javascript (так как если нет сценариев, то нет вкладок), но я не уверен, где именно для размещения моих атрибутов «ария-контроль». Должны ли они перейти к элементу
    или к его дочернему элементу ? Или это не имеет значения? В самом деле, тот же вопрос можно задать о role=»tab» и tabindex=»0″ — должны ли эти вещи перейти к элементу списка или привязке?

    Поместите aria-controls на элемент, который получает role=»tab» .

    aria-controls — это то, что создает связь между вкладкой и ее панелью. См. Третью пулю в описании для aria-controls из спецификации: https://www.w3.org/TR/wai-aria/states_and_properties#aria-controls

    Считайте также, что role=»presentation» для элементов
    и role=»tablist» на

      (особенно потому, что вы показываете
      инертный с role=»presentation» ).

    Будьте готовы также управлять навигацией по клавишам со стрелками, так как, используя роли табуляции, вы, по сути, говорите эксперту, что эти вкладки будут вести себя как вкладки в ОС, которые помечают клавиши со стрелками для переключения между вкладками.

    Дополнительные ресурсы, которые стоит проверить:

    • https://www.marcozehe.de/2013/02/02/advanced-aria-tip-1-tabs-in-web-apps/ (от парня, который работает над доступом в Mozilla и является пользователем программы для чтения с экрана).
    • http://heydonworks.com/practical_aria_examples/#tab-interface (от парня, который консультируется по вопросам доступности и исправления)

    После всего этого, пожалуйста, проверьте его на экране, чтобы убедиться, что он ведет себя так, как вы ожидаете.

    В этом демонстрационном примере показан экранный ридер с помощью вкладки с ARIA. Считыватель экрана Jaws предоставляет ярлык для перехода от вкладки к соответствующей вкладке на основе отношения, созданного атрибутом aria-controls.

    Если вам интересно, эта демонстрация показывает экранный ридер с помощью tabpanels без ARIA.

    При создании набора вкладок вы хотите, чтобы виджет представлял одну вкладку в порядке клавиатуры. Когда кто-то использует клавишу табуляции, чтобы перейти к набору вкладок, фокус должен перейти на текущую выбранную вкладку, а следующее нажатие клавиши табуляции снова должно вернуться к содержимому.

    Вы можете использовать roving tabindex для этого. Только текущая выбранная вкладка должна быть настраиваемой. Все остальные вкладки (в частности, элементы , которые их представляют) должны иметь tabindex = «- 1». Это предотвращает их включение в последовательность вкладок клавиатуры.

    Сценарии, позволяющие кому-либо перемещаться по вкладкам с помощью клавиш со стрелками влево/вправо, также должны обновлять значения атрибута tabindex на каждой вкладке, так что для всех, кроме текущей вкладки, значение tabindex равно -1. Здесь представлена ​​рабочая вкладка табуляций.

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL