MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Элементы и атрибуты форм в HTML5 предоставляют большие возможности семантической верстки, чем HTML4, а также позволяет отказаться от использования JavaScript и CSS, которое было ранее необходимо для HTML4. Большие возможности в формах HTML5 делают удобным для пользователей отправление информации с различных веб-сайтов. Они также предоставляют эти возможности для тех пользователей, у которых отключена поддержка JavaScript.

Эта статья описывает изменения в HTML-формах, представленных в HTML5. Для более подробного руководства по использованию формами, просмотрите наше обширное руководство по HTML-формам.

Элемент <input>

В элементе <input> появились новые значения для атрибута type. (Просмотрите справочник <input> для получения полного списка атрибутов, значений и их использования для этого элемента.)

  • search: Элемент представляет из себя поле для поиска. Переходы строк автоматически удаляются из значения value.
  • tel: Элемент представляет из себя поле для редактирования номера телефона. Переходы строк автоматически удаляются из значения value. Вы можете использовать атрибуты, такие как: pattern и maxlength, чтобы запретить ввод неподходящих символов.
  • url: Элемент представляет из себя поле для редактирования URL. Переходы строк и пробелы автоматически удаляются из значения value.
  • email: Элемент представляет из себя поле для ввода одного адреса электронной почты. Переходы строк автоматически удаляются из значения value. Может быть предоставлен недействительный адрес эл. почты, но поле ввода запретит отправку формы, если эл. адрес почты не будет соответствовать нормам ABNF.

    Заметьте: Если установлен атрибут multiple, то может быть введено несколько адресов электронной почты, разделенных запятой, но, в данный момент, такая возможность не реализована в Firefox.

Также, элемент <input> получил новые атрибуты:

  • list: ID элемента <datalist>, в котором элементы <option> используются как подсказки для текстового поля.
  • pattern: Регулярное выражение, по которому поверяются вводимые данные. Может использоваться в элементе type со значениями text, tel, search, url, и email.
  • form: Строка, указывающая, к какому элементу <form> принадлежит элемент. Элемент может быть частью только одной формы.
  • formmethod: Строка, указывающая метод передачи данных  (GET or POST), когда форма отправляется на сервер. Он перекрывает значение атрибута method элемента <form>, если установлен. Работает только, если type является image или submit, и если установлен атрибут form.
  • x-moz-errormessage : Строка, указывающая на сообщение об ошибке, которое будет показано, если это поле не пройдет валидацию. Этот атрибут - расширение Mozilla и не является стандартом.

Текстовое поле

<input> с атрибутом type="text" определяет однострочное поле для ввода.

<form>
  Введите свое имя: <input type="text" name="name">
</form>

Флажок

<input> с атрибутом type="checkbox" определяет флажок.

<input type="checkbox" name="chk" value="" checked> Подписаться на рассылку

Переключатель

<input> с атрибутом type="radio" определяет радио кнопку.

<form>
  <input type="radio" name="animal" value="monkey">Обезьяна<br>
  <input type="radio" name="animal" value="cat">Кот<br>
  <input type="radio" name="animal" value="other">Другое
</form>

Элемент <form>

Элемент <form> получил новый атрибут:

  • novalidate: Этот атрибут предотвращает валидацию формы перед отправкой.

Элемент <datalist>

Элемент <datalist> представляет собой список элементов <option>, который необходимо предложить при вводе поля <input>.

Вы можете использовать атрибут list в элементе <input>, чтобы связать текстовое поле с элементом <datalist>.

Элемент <output>

Элемент <output> представляет собой результат каких-либо вычислений.

Вы можете использовать атрибут for для указания связи между элементом <output> и другими элементами в документе, которые повлияли на расчет (к примеру, поля для ввода параметров). Значением атрибута for является список ID других элементов, разделенный пробелами.

Gecko 2.0 (but not necessarily other browser engines) supports defining custom validity constraints and error messages for <output> elements, and therefore applies the :invalid, :valid, :-moz-ui-invalid, and :-moz-ui-valid CSS pseudo-classes to them. This can be helpful in situations where the calculated result violates a business rule, but no specific input value does (for example, "The total of percentages must not exceed 100").

Атрибут placeholder

Атрибут placeholder в элементах <input> и <textarea> отображает подсказки для пользователей, которые показывают, что можно ввести в эти поля. Текст в placeholder не должен содержать символов перевода строки или возврата каретки.

Атрибут autofocus

Атрибут autofocus позволяет указать для элемента формы автоматическое получение фокуса после полной загрузки страницы, если пользователь сам не переместит фокус на другой элемент, например, этот атрибут можно указать для различных полей ввода. Только один элемент в документе должен иметь этот атрибут, который содержит Boolean значение. Этот атрибут может быть установлен в <input>, <button>, <select> и <textarea> элементах.  autofocus нельзя установить в элементах input c атрибутом type установленным в значение hidden (это означает, что ты не можешь автоматически устанавливать фокус в скрытых полях).

The label.control DOM property

The HTMLLabelElement DOM interface provides an extra property, in addition to the properties that correspond to the HTML <label> element attributes. The control property returns the labeled control, that is, the control that the label is for, which is determined by the for attribute (if it is defined) or by the first descendant control element.

Constraint Validation

HTML5 provides syntax and API items to support client-side validation of forms. While this functionality does not replace server-side validation, which is still necessary for security and data integrity, client-side validation can support a better user experience by giving the user immediate feedback about the input data.

If the title attribute is set on the <input> element, its value is used as tooltip. However, if the validation fails, this tooltip text will be replaced with the associated error message. It is possible to customize this error message using the non-standard x-moz-errormessage attribute or when calling the setCustomValidity() method.

<input type="email" title="Please, provide an e-mail" x-moz-errormessage="This is not a valid e-mail">
Note: Constraint validation is not supported on <button> elements in a form; to style a button based on the validity of the associated form, use the :-moz-submit-invalid pseudo-class.

HTML Syntax for Constraint Validation

The following items in HTML5 syntax can be used to specify constraints on form data.

  • The required attribute on the <input>, <select>, and <textarea> elements indicates that a value must be supplied. (On the <input> element, required applies only in conjunction with certain values of the type attribute.)
  • The pattern attribute on the <input> element constrains the value to match a specific regular expression.
  • The min and max attributes of the <input> element constrain the minimum and maximum values that can be entered.
  • The step attribute of the <input> element (when used in combination with the min and max attributes) constrains the granularity of values that can be entered. A value that does not correspond an allowed value step does not validate.
  • The maxlength attribute of the <input> and <textarea> elements constrains the maximum number of characters (in Unicode code points) that the user can enter.
  • The values url and email for the type constrain the value to being a valid URL or e-mail address, respectively.

In addition, you can prevent constraint validation by specifying the novalidate attribute on the <form>, or the formnovalidate attribute on the <button> element and on the <input> element (when type is submit or image). These attributes indicate that the form is not to be validated when it is submitted.

Constraint Validation API

The following DOM properties and methods related to constraint validation are available to client-side scripts:

  • On HTMLFormElement objects, the checkValidity() method, which returns true if all of this form element's associated elements that are subject to constraint validation satisfy their constraints, and false if any do not.
  • On form-associated elements:
    • willValidate property, which is false if the element has constraints that are not satisfied.
    • validity property, which is a ValidityState object representing the validity states that the element is in (i.e., constraint failure or success conditions).
    • validationMessage property, which is a message describing any constraint failures that pertain to the element.
    • checkValidity() method, which returns false if the element fails to satisfy any of its constraints, or true otherwise.
    • setCustomValidity() method, which sets a custom validation message, allowing for constraints to be imposed and validated beyond those that are predefined.

See also

Метки документа и участники

 Внесли вклад в эту страницу: AgRuN1, ruslan_g02
 Обновлялась последний раз: AgRuN1,