Данное руководство представляет собой серию статей, которые помогут Вам освоить HTML-формы. HTML формы являются очень мощным инструментом для взаимодействия с пользователями; однако, в силу исторических и технических причин, не всегда очевидно, как использовать их потенциал. В этом руководстве мы рассмотрим все аспекты HTML-форм, от структуры к стилизации, от обработки данных до пользовательских виджетов. Вы научитесь пользоваться Великой силой, которую они предлагают!

Содержание

  1. Моя первая HTML форма
  2. Как структурировать HTML форму
  3. The native form widgets
  4. CSS with HTML forms
    1. Styling HTML forms
    2. Advanced styling for HTML forms
    3. Property compatibility table for form widgets
  5. Sending and retrieving form data
  6. Data form validation
  7. How to build custom form widgets
  8. Sending forms through JavaScript
    1. Using the FormData object
  9. HTML forms in legacy browsers

Документация HTML

Элементы HTML

Элемент Related DOM interface Описание
<button> HTMLButtonElement Тег button создаёт обычную кнопку.
<datalist> HTMLDataListElement The datalist element contains a set of <option> elements that represent the possible options for the value of other form elements.
<fieldset> HTMLFieldSetElement The fieldset is used to group several form elements within a form.
<form> HTMLFormElement Тег form ограничивает  часть web-страницы, где есть элементы, заполняемые пользователем, для отправки на сервер.
<input> HTMLInputElement Тег  input используется для создания интерактивных элементов формы.
<keygen> HTMLKeygenElement The keygen element exists to facilitate generation of key material, and submission of the public key as part of an HTML form
<label> HTMLLabelElement Тег label используют для описания элементов интерфейса пользователя.
<legend> HTMLLegendElement The legend element represents a caption for the content of its parent <fieldset>.
<meter> HTMLMeterElement The meter element  represents either a scalar value within a known range or a fractional value.
<optgroup> HTMLOptGroupElement the optgroup element creates a group of options within a <select> element.
<option> HTMLOptionElement the HTML option element is used to create a control representing an item within a <select>, an <optgroup> or a <datalist> element.
<output> HTMLOutputElement The output element represents the result of a calculation.
<progress> HTMLProgressElement The progress element is used to view the completion progress of a task.
<select> HTMLSelectElement The select element represents a control that presents a menu of options.
<textarea> HTMLTextAreaElement Тег textarea используется для ввода многострочного текста.

Note: All form elements, as all HTML elements, support the HTMLElement DOM interface.

Атрибуты HTML

Название атрибута Элементы Описание
accept <form>, <input> List of types the server accepts, typically a file type.
accept-charset <form> List of supported charsets.
action <form> URI-адрес файла со скриптом, который должен обрабатывать отправляемые из формы данные. Если сам скрипт находится в одном файле с формой, то атрибут action нужно оставить пустым.
autocomplete <form>, <input> Indicates whether controls in this form can by default have their values automatically completed by the browser.
autofocus <button>, <input>, <keygen>, <select>, <textarea> После загрузки страницы элемент получит автофокус.
challenge <keygen> A challenge string that is submitted along with the public key.
checked <input> Indicates whether the element should be checked on page load.
cols <textarea> Defines the number of columns in a textarea.
data <object> Specifies the URL of the resource.
dirname <input>, <textarea>  
disabled <button>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea> Отменяет возможность взаимодействия пользователя с элементом.
enctype <form> Defines the content type of the form data when the method is POST.
for <label>, <output> Describes elements which belong to this one.
form <button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea> Indicates the form that is the owner of the element.
high <meter> Indicates the lower bound of the upper range.
keytype <keygen> Specifies the type of key generated.
list <input> Identifies a list of pre-defined options to suggest to the user.
low <meter> Indicates the upper bound of the lower range.
max <input>, <meter>, <progress> Indicates the maximum value allowed.
maxlength <input>, <textarea> Ограничение максимального количества введёных знаков.
method <form> Указываем каким HTTP-методом должна быть отправлена на сервер форма: POST или GET (по-умолчанию).
min <input>, <meter> Indicates the minimum value allowed.
multiple <input>, <select> Indicates whether multiple values can be entered in an input of the type email or file.
name <button>, <form>, <fieldset>, <input>, <keygen>, <output>, <select>, <textarea> Имя, используемое серверным скриптом для идентификации конкретного элемента формы.
novalidate <form> This attribute indicates that the form shouldn't be validated when submitted.
optimum <meter> Indicates the optimal numeric value.
pattern <input> Defines a regular expression which the element's value will be validated against.
placeholder <input>, <textarea> Отображает для пользователя пример вводимого значения.
readonly <input>, <textarea> Indicates whether the element can be edited or not.
required <input>, <select>, <textarea> .Указывает на обязательные для заполнения элементы формы.
rows <textarea> Задаёт количество строк.
selected <option> Defines a value which will be selected on page load.
size <input>, <select> Defines the width of the element (in pixels). If the element's type attribute is text or password then it's the number of characters.
src <input> The URL of the embeddable content.
step <input>  
target <form>  
type <button>, <input> Описывает тип элемента.
usemap <input>  
value <button>, <option>, <input>, <meter>, <progress> Стандартное значение элемента, которое будет получено при загрузке страницы.
wrap <textarea> Indicates whether the text should be wrapped or not.

Нормативные ссылки

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

Внесли вклад в эту страницу: mdnwebdocs-bot, neizerth, PWasiliy, SeryiMysh, chrisdavidmills, GaidaiAndrii, bracket, Dmitrij
Обновлялась последний раз: mdnwebdocs-bot,