Forms html: HTMLFormElement — Web APIs | MDN

Содержание

Элементы формы — Учебник HTML


❮ Назад Далее ❯


В этой главе описаны все различные элементы HTML форм.

Элемент <input>

Одним из наиболее часто используемых элементов формы является элемент <input>.

Элемент <input> может быть отображен несколькими способами, в зависимости от атрибута type.

Пример

<input type=»text» name=»firstname»>

Попробуйте сами »

Если атрибут type опущен, поле ввода получает значение по умолчанию тип: "text".

Все различные типы входных данных рассматриваются в следующей главе: HTML Типы ввода.


Элемент <select>

Элемент <select> определяет раскрывающийся список:

Пример

<select name=»cars»>
 <option value=»volvo»>Вольво</option>
 <option value=»saab»>Сааб</option>
 <option value=»fiat»>Фиат</option>
 <option value=»audi»>Ауди</option>
</select>

Попробуйте сами »

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

По умолчанию выбирается первый элемент в раскрывающемся списке.

Чтобы определить предварительно выбранный параметр, добавьте атрибут selected с параметром <option>:

Пример

<option value=»fiat» selected>Фиат</option>

Попробуйте сами »

Видимые значения:

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

Пример

<select name=»cars» size=»3″>
 <option value=»volvo»>Вольво</option>
 <option value=»saab»>Сааб</option>
 <option value=»fiat»>Фиат</option>
 <option value=»audi»>Ауди</option>
</select>

Попробуйте сами »

Разрешить выбор:

Используйте атрибут multiple, позволяющий пользователю выбрать более одного значения:

Пример

<select name=»cars» size=»4″ multiple>

 <option value=»volvo»>Вольво</option>
 <option value=»saab»>Сааб</option>
 <option value=»fiat»>Фиат</option>
 <option value=»audi»>Ауди</option>
</select>

Попробуйте сами »


Элемент <textarea>

Элемент <textarea> элемент определяет многострочное поле ввода (текстовой области):

Пример

<textarea name=»message» rows=»10″ cols=»30″>
 Кот играл в саду.
</textarea>

Попробуйте сами »

Атрибут rows указывает видимое количество строк в текстовой области.

Атрибут cols определяет видимую ширину текстовой области.

Именно так приведенный выше HTML код будет отображаться в браузере:

Кот играл в саду.

Вы также можете определить размер текстовой области с помощью CSS:

Пример

<textarea name=»message»>
 Кот играл в саду.
</textarea>

Попробуйте сами »



Элемент <button>

Элемент <button> определяет кликабельность button:

Пример

<button type=»button»>Нажмите на меня!</button>

Попробуйте сами »

Именно так приведенный выше HTML код будет отображаться в браузере:

Примечание: Всегда указывайте атрибут type для элемента button. Различные браузеры могут использовать различные типы по умолчанию для элемента

button.


Элементы <fieldset> и <legend>

Элемент <fieldset> используется для группировки связанных данных в форме.

Элемент <legend> определяет заголовок для элемента <fieldset>.

Пример

<form action=»/action_page.php»>
 <fieldset>
   <legend>Персональная информация:</legend>
   <label for=»fname»>Имя:</label><br>
   <input type=»text» name=»fname» value=»Андрей»><br>
   <label for=»lname»>Фамилия:</label><br>
   <input type=»text» name=»lname» value=»Щипунов»><br><br>
   <input type=»submit» value=»Отправить»>
 </fieldset>
</form>

Попробуйте сами »

Именно так приведенный выше HTML код будет отображаться в браузере:

Персональная информация: Имя:

Фамилия:

Элемент <datalist>

Элемент <datalist> задает список предопределенных параметров для элемента <input>.

При вводе данных пользователи будут видеть раскрывающийся список предопределенных параметров.

Атрибут list элемента <input>, обращается к атрибуту id элемента <datalist>.

Пример

<form action=»/action_page.php»>
 <input list=»browsers»>
 <datalist>
   <option value=»Internet Explorer»>
   <option value=»Firefox»>
   <option value=»Chrome»>
   <option value=»Opera»>
    <option value=»Safari»>
 </datalist>
</form>

Попробуйте сами »


Элемент <output>

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

Пример

Выполните расчет и покажите результат в виде элемента <output>:

<form action=»/action_page. php»
  oninput=»x.value=parseInt(a.value)+parseInt(b.value)»>
  0
 <input type=»range»  name=»a» value=»50″>
  100 +
 <input type=»number» name=»b» value=»50″>
  =
 <output name=»x» for=»a b»></output>
  <br><br>
  <input type=»submit»>
</form>

Попробуйте сами »


HTML Упражнения

Проверьте себя с помощью упражнений

Упражнение:

В приведенной ниже форме добавьте пустой выпадающий список с именем «cars».

<form action=»/action_page.php»>
 <>
 </>
</form>



HTML Элементы формы

Тег Описание
<form> Определяет HTML форму для пользовательского ввода
<input> Определяет входной элемент управления
<textarea> Определяет многострочный элемент управления вводом (текстовая область)
<label> Определяет метку для элемента <input>
<fieldset> Группы связанных элементов в форме
<legend> Определяет заголовок для элемента <fieldset>
<select> Определяет раскрывающий список
<optgroup> Определяет группу связанных параметров в раскрывающемся списке
<option> Определяет параметр в раскрывающемся списке
<button> Определяет кликабельную кнопку
<datalist> Задает список предопределенных параметров для элементов управления вводом
<output> Определяет результат вычисления

Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.


❮ Назад Далее ❯


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

Нет,спецификация HTML гласит,что ни один элемент FORM не должен содержать другой элемент FORM.

HTML-элемент <input> используется для создания интерактивных элементов управления для веб-форм, чтобы принимать данные от пользователя; доступно большое разнообразие типов входных данных и виджетов управления, в зависимости от устройства и пользовательского агента.

Существуют различные элементы формы, которые мы можем использовать, такие как текстовые поля, текстовая область, раскрывающийся список, выбор, флажки, радио и т. д. Тег, который мы использовали для создания этой формы, — это тег <form>, и он имеет следующий синтаксис. которому мы должны следовать: <form action=»form-url» method=»form-method»> // различные элементы формы </form>

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

Атрибут action определяет действие, которое должно быть выполнено при отправке формы. Обычно данные формы отправляются в файл на сервере, когда пользователь нажимает кнопку отправки. В приведенном ниже примере данные формы отправляются в файл с именем «action_page.php».

Предварительные требования: базовые концепции HTML и CSS, такие как теги, идентификатор, цвет, поля, отступы, шрифт, текстовое поле, флажок, переключатель и т. д. Подход: элемент <form> используется для создания HTML-формы для пользовательского ввода. Внутри элемента формы предоставьте пользователю различные параметры, такие как имя, адрес электронной почты, возраст и т. д.

Элементы HTML Атрибут method определяет метод HTTP,который браузер должен использовать для отправки формы,например POST или GET.

Формы не могут быть вложены одна в другую.


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

Try it

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

Content categories Текущее содержимое , осязаемое содержимое
Permitted content Содержимое потока , но не содержащее элементов <form>
Tag omissionНет,и начальная и конечная метки обязательны.
Permitted parentsЛюбой элемент, который принимает потоковое содержимое
Неявная роль ARIA form , если у формы есть доступное имя , в противном случае нет соответствующей роли
Разрешенные роли АРИА search , none или presentation
DOM interfaceHTMLFormElement

Attributes

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

accept Deprecated

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

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

accept-charset

Кодировки символов , разделенные пробелами , которые принимает сервер. Браузер использует их в том порядке, в котором они перечислены. Значение по умолчанию означает ту же кодировку, что и страница . (В предыдущих версиях HTML кодировки символов также могли быть разделены запятыми.)

autocapitalize Non-standard

Нестандартный атрибут, используемый iOS Safari, который определяет, как элементы текстовой формы должны быть автоматически написаны с заглавной буквы. autocapitalize в элементах формы переопределяют его в <form> . Возможные значения:

  • none : без автоматического использования заглавных букв.
  • sentences (по умолчанию): начинайте каждое предложение с заглавной буквы.
  • words : начинайте каждое слово с заглавной буквы.
  • characters : Делайте все символы заглавными, т. е. в верхнем регистре.
autocomplete

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

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

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

rel

Создает гиперссылку или аннотацию в зависимости от значения, подробности см. В атрибуте rel .

Атрибуты для заполнения формы

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

action

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

enctype

Если значение атрибута methodpost , 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> , закрывает диалог и вызывает событие отправки при отправке без отправки данных или очистки формы.

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

novalidate

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

target

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

  • _self (по умолчанию): загрузить в тот же контекст просмотра, что и текущий.
  • _blank : загрузить в новый безымянный контекст просмотра.
  • _parent : загрузить в родительский контекст просмотра текущего. Если нет родителя, ведет себя так же, как _self .
  • _top : загрузка в контекст просмотра верхнего уровня (т. е. контекст просмотра, который является предком текущего и не имеет родителя). Если нет родителя, ведет себя так же, как _self .

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

Примечание. Установка target="_blank" в элементах <form> неявно обеспечивает то же поведение rel , что и установка rel="noopener" , которая не устанавливает window.opener .

Examples

HTML

<! - Форма, которая отправит запрос GET на текущий URL ->
<form method="get">
  <label>Name:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Save</button>
</form>
<! - Форма, которая отправит POST-запрос на текущий URL ->
<form method="post">
  <label>Name:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Save</button>
</form>
<! - Форма с набором полей, легендой и меткой ->
<form method="post">
  <fieldset>
    <legend>Title</legend>
    <label><input type="radio" name="radio"> Select me</label>
  </fieldset>
</form>

Specifications

Specification
Стандарт HTML
# элемент формы

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox для AndroidOpera AndroidSafari на IOSSamsung Internet
form

Yes

12

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

accept

Yes

12

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

accept-charset

Yes

12

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

action

Yes

12

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

autocapitalize

No

No

No

No

No

No

No

No

No

No

Yes

No

autocomplete

Yes

Google Chrome пользовательский интерфейс для автозаполнения запроса варьируется, в зависимости от того , autocomplete установлен в положении off на <input> элементов, а также их форме. В частности, когда форма имеет autocomplete набор для off и его <input> элемента autocomplete атрибут не установлен, то , если пользователь запрашивает автозаполнения предложения для <input> элемент, Chrome может отображать сообщение о том , «автозаполнения отключена для этого образуют. С другой стороны, если обе формы и входной элемент имеет autocomplete набор для off , браузер не будет отображать это сообщение. По этой причине вам следует установить autocomplete для off для каждого <input> , который имеет пользовательское автозавершение.

12

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

enctype

Yes

12

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

method

Yes

12

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

name

Yes

12

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

novalidate

10

12

4

10

15

10. 1

37

18

4

14

10.3

1.0

target

Yes

12

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

See also

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

  • 1
  • 76
  • 77
  • 78
  • 79
  • 80
  • 266
  • Next

<frame>


HTML-формы — бесплатное руководство по изучению HTML и CSS

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

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

  • регистрация и вход на веб-сайты
  • ввод личной информации (имя, адрес, данные кредитной карты…)
  • фильтрация содержимого (используя выпадающие списки, флажки…)
  • выполнение поиска
  • загрузка файлов

Чтобы удовлетворить эти потребности, HTML предоставляет интерактивные элементы управления формой :

.
  • ввод текста (для одной или нескольких строк)
  • радиокнопки
  • флажки
  • раскрывающихся списков
  • загружать виджеты
  • кнопки отправки

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

 
<тип ввода="текст">

<тип ввода="флажок">

 

Элемент формы

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