<form> элемент HTML form

Элемент <form> HTML представляет собой раздел документа, содержащий интерактивные элементы управления для отправки информации.

Попробуйте

<form action="" method="get" class="form-example">
  <div class="form-example">
    <label for="name">Enter your name: </label>
    <input type="text" name="name" id="name" required />
  </div>
  <div class="form-example">
    <label for="email">Enter your email: </label>
    <input type="email" name="email" id="email" required />
  </div>
  <div class="form-example">
    <input type="submit" value="Subscribe!" />
  </div>
</form>

form.form-example {
  display: table;
}

div.form-example {
  display: table-row;
}

label,
input {
  display: table-cell;
  margin-bottom: 10px;
}

label {
  padding-right: 10px;
}

Для стилизации элемента <form> в зависимости от того, допустимы ли элементы elements внутри формы, можно использовать псевдоклассы CSS :valid и :invalid.

Атрибуты

Этот элемент включает глобальные атрибуты.

accept

Разделённые запятыми типы содержимого, которые принимает сервер.

Примечание: Этот атрибут устарел, и его не следует использовать. Вместо него используйте атрибут accept у элементов <input type=file>.

accept-charset

Кодировка символов, принимаемая сервером. Спецификация допускает одно значение без учёта регистра — "UTF-8", что отражает повсеместное распространение этой кодировки (исторически можно было указать несколько кодировок символов в виде списка, разделённого запятыми или пробелами).

autocapitalize

Определяет, преобразуется ли введённый текст автоматически в заглавные буквы и, если преобразуется, каким образом. Подробнее см. на странице глобального атрибута autocapitalize.

autocomplete

Указывает, может ли браузер по умолчанию автоматически заполнять значения элементов ввода. Атрибуты autocomplete элементов формы переопределяют этот атрибут у <form>. Возможные значения:

• off: браузер не может автоматически заполнять поля. (Браузеры обычно игнорируют это значение для форм, которые, предположительно, используются для входа в систему; см. раздел Управление автозаполнением полей для входа.)
• on: браузер может автоматически заполнять поля.

name

Имя формы. Значение не должно быть пустой строкой и должно быть уникальным среди элементов form в коллекции форм, к которой он относится, если таковая имеется. Имя становится свойством объектов Window, Document и document.forms и содержит ссылку на элемент формы.

rel

Определяет аннотации и типы ссылок, создаваемых формой. Аннотации включают external, nofollow, opener, noopener и noreferrer. Типы ссылок включают help, prev, next, search и license. Значение rel представляет собой список этих перечисленных значений, разделённых пробелами.

Атрибуты отправки формы

Следующие атрибуты определяют поведение при отправке формы.

action

URL-адрес, обрабатывающий отправку формы. Это значение можно переопределить атрибутом formaction элемента <button>, <input type="submit"> или <input type="image">. Этот атрибут игнорируется, если задано method="dialog".

enctype

Если значение атрибута method равно post, то enctype — это тип MIME отправляемой формы. Возможные значения:

• application/x-www-form-urlencoded: значение по умолчанию.
• multipart/form-data: используйте это значение, если форма содержит элементы <input> с атрибутом type=file.
• text/plain: полезно для отладки.

Это значение можно переопределить атрибутами formenctype элементов <button>, <input type="submit"> или <input type="image">.

method

Метод HTTP, используемый для отправки формы. Допустимы только следующие методы/значения (без учёта регистра):

• post: метод POST; данные формы отправляются в виде тела запроса.
• get (по умолчанию): метод GET; данные формы добавляются к URL-адресу action с разделителем ?. Используйте этот метод, если форма не имеет побочных эффектов.
• dialog: если форма находится внутри элемента <dialog>, закрывает диалоговое окно и вызывает событие submit при отправке, не отправляя данные и не очищая форму.

Это значение переопределяется атрибутами formmethod элементов <button>, <input type="submit"> или <input type="image">.

novalidate

Этот логический атрибут указывает, что при отправке формы не следует выполнять проверку. Если атрибут не задан (и, следовательно, форма проверяется), его можно переопределить атрибутом formnovalidate элемента <button>, <input type="submit"> или <input type="image">, принадлежащего этой форме.

target

Указывает, где отображать ответ после отправки формы. Это имя или ключевое слово для контекста просмотра (например, вкладки, окна или iframe). Следующие ключевые слова имеют специальное значение:

• _self (по умолчанию): загрузить в тот же контекст просмотра, что и текущий.
• _blank: загрузить в новый контекст просмотра без имени. Это соответствует поведению при задании rel="noopener", при котором window.opener не задаётся.
• _parent: загрузить в родительский контекст просмотра текущего. Если родительского контекста нет, действует так же, как _self.
• _top: загрузить в контекст просмотра верхнего уровня (то есть контекст просмотра, который является предком текущего и не имеет родителя). Если родительского контекста нет, действует так же, как _self.
• _unfencedTop: загрузить ответ формы, находящейся во встроенном изолированном фрейме, в кадр верхнего уровня (то есть за пределы корня изолированного фрейма, в отличие от других зарезервированных мест назначения). Доступно только внутри изолированных фреймов.

Это значение можно переопределить атрибутом formtarget элемента <button>, <input type="submit"> или <input type="image">.

Примеры

<!-- Form which will send a GET request to the current URL -->
<form method="get">
  <label>
    Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- Form which will send a POST request to the current URL -->
<form method="post">
  <label>
    Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- Form with fieldset, legend, and label -->
<form method="post">
  <fieldset>
    <legend>Do you agree to the terms?</legend>
    <label><input type="radio" name="radio" value="yes" /> Yes</label>
    <label><input type="radio" name="radio" value="no" /> No</label>
  </fieldset>
</form>

Результат

Техническая сводка

Спецификации

Совместимость с браузерами

См. также

• Руководство по HTML-формам
• Другие элементы, используемые при создании форм: <button>, <datalist>, <fieldset>, <input>, <label>, <legend>, <meter>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea>.
• Получение списка элементов формы: HTMLFormElement.elements
• ARIA: роль form
• ARIA: роль search