Forms html: HTMLFormElement — Web APIs | MDN — Вебджем.рф | Создание и продвижение сайтов

Содержание

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

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

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

Элемент <input>

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

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

Пример

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

Если атрибут 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>:

Пример

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

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

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

Пример

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

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

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

Используйте атрибут 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>.

Пример

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

Элемент <output>

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

Пример

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

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

HTML Упражнения

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

Упражнение:

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

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 interface	`HTMLFormElement`

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

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

Это значение переопределяется атрибутами 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

	Desktop	Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung 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

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

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

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

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

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

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

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

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

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

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

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

В результате все элементы управления формы (такие как ,

 </code> или <code> <button> </code> ) должны отображаться <em> внутри </em> элемента <code> <form> </code> . </p>
 <p> Требуются два атрибута HTML <strong> </strong> : </p>
 <ul> <li> <code> действие </code> содержит адрес, который определяет <em> куда </em> будет отправлена информация формы </li>
   <li> <code> метод </code> может быть GET или POST и определяет <em> как </em> информация формы будет отправлена </li>
 </ul> <p> Обычно информация формы отправляется на сервер <strong> </strong> . <em> То, как будут обрабатываться эти данные, выходит за рамки данного руководства. </p>
 <p> Думайте о форме как о наборе элементов управления вводом, которые работают вместе для выполнения <strong> одной операции </strong>. Если вы написали форму входа, у вас может быть <strong> 3 </strong> элемента управления: </p>
 <ul> <li> ввод электронной почты <code> <input type="email"> </code> </li>
   <li> ввод пароля <code> <тип ввода="пароль"> </code> </li>
   <li> кнопка отправки <code> <input type="submit"> </code> </li>
 </ul> <p> Эти 3 элемента HTML будут заключены в один <code> <form action="/login" method="POST"> </code> .<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.slideplayer.com/24/7231192/slides/slide_11.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.slideplayer.com/24/7231192/slides/slide_11.jpg' /></noscript>  </p>
 <p> Аналогичным образом вы можете добавить форму регистрации на ту же HTML-страницу в отдельном элементе <code> <form> </code>. </p>
  <h4><span class="ez-toc-section" id="i-25"> Ввод текста </span></h4> 
 <p> Почти все формы требуют <strong> текстового ввода </strong> от пользователей, чтобы они могли ввести свое имя, адрес электронной почты, пароль, адрес… Элементы управления текстовыми формами бывают разных вариаций: </p>
 <table> <tr> <th> Текст </th>
       <td> <code> <тип ввода="текст"> </code> </td>
       <td/>
       <td> Позволяет использовать любой тип символов </td>
     </tr> <tr> <th> Электронная почта </th>
       <td> <code> <input type="email"> </code> </td>
       <td/>
       <td> Может отображать предупреждение, если введен неверный адрес электронной почты </td>
     </tr> <tr> <th> Пароль </th>
       <td> <code> <тип ввода="пароль"> </code> </td>
       <td/>
       <td> Показывает точки как символы </td>
     </tr> <tr> <th> Номер </th>
       <td> <code> <тип ввода="число"> </code> </td>
       <td/>
       <td> Клавиши вверх/вниз можно использовать </td>
     </tr> <tr> <th> Телефон </th>
       <td> <code> <тип ввода="тел"> </code> </td>
       <td/>
       <td> Может запускать автозаполнение </td>
     </tr> <tr> <th> Многострочный текст </th>
       <td> <code> <текстовое поле></текстовое поле> </code> </td>
       <td> </td>
       <td> Можно изменить размер </td>
     </tr> </table>
 <p> Хотя эти входы выглядят очень похожими и позволяют пользователям вводить <em> любой </em> тип текста (даже неправильный ввод), их <em> тип </em> обеспечивает специфическую <strong> семантику </strong> ввода, определяя, какую информацию он должен содержать <strong> </strong> </strong> .<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fuzeservers.ru/wp-content/uploads/3/8/7/387c8bf488ff7a929948d84428571035.jpeg' /><noscript><img loading='lazy' src='/800/600/http/fuzeservers.ru/wp-content/uploads/3/8/7/387c8bf488ff7a929948d84428571035.jpeg' /></noscript>  </p>
 <p> Браузеры впоследствии могут немного изменить интерфейс элемента управления, <em> увеличив его интерактивность </em> или подсказав, какой <em> контент ожидается </em> . </p>
 <p> Например, при вводе пароля вместо символов отображаются точки. </p>
 <p> И числовые входы позволяют увеличивать/уменьшать их значение с помощью клавиш вверх и вниз. </p>
  <h4><span class="ez-toc-section" id="i-26"> Заполнители </span></h4> 
 <p> Ввод текста может отображать <strong> текст-заполнитель </strong>, который исчезнет, как только будет введен какой-либо текст. </p><pre data-lang="html"> <input type="text" placeholder="Введите ваше имя"> </pre><p> Если вы начнете что-то вводить, текст <em> «Введите ваше имя» </em> исчезнет. </p>
  <h4><span class="ez-toc-section" id="i-27"> Этикетки </span></h4> 
 <p> Поскольку элементы формы сами по себе не очень информативны, им обычно предшествует текст <strong> этикетка </strong> . </p><pre data-lang="html"> <label>Электронная почта</label>
<input type="email"> </pre><p> Электронная почта
   </p>
 <p> Хотя заполнители уже дают некоторое представление об ожидаемом содержимом, метки имеют то преимущество, что они всегда остаются видимыми, и их можно использовать вместе с другими типами элементов управления формы, такими как флажки или переключатели.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/alfintechcomputer.com/wp-content/uploads/2020/11/html-form.png' /><noscript><img loading='lazy' src='/800/600/http/alfintechcomputer.com/wp-content/uploads/2020/11/html-form.png' /></noscript>  </p>
 <p> Хотя вы можете использовать короткие абзацы для описания элементов формы, использование <code> <label> </code> семантически более правильно, поскольку они существуют только внутри форм и могут быть соединены с конкретным элементом управления формы с помощью <code> для атрибута </code> и сопоставление его значения с входным идентификатором <code> </code> . </p><pre data-lang="html"> <label for="first_name">Имя</label>
<input type="text"> </pre><p> Имя
   </p>
 <p> Щелчок по метке сфокусирует ввод текста и поместит текстовый курсор внутрь. Хотя это сопряжение кажется бесполезным, оно пригодится с флажками и переключателями. </p>
  <h4><span class="ez-toc-section" id="i-28"> Флажки </span></h4> 
 <p> <strong> Флажки </strong> — это элементы управления формы, которые имеют только 2 состояния: установлен или снят. Они в основном позволяют пользователю сказать «Да» или «Нет» чему-либо. </p><pre data-lang="html"> <input type="checkbox"> Запомнить меня </pre><p> Запомнить меня </p>
 <p> Поскольку щелкнуть по маленькому флажку может быть сложно, рекомендуется обернуть <code> <label> </code> вокруг флажка <strong> и </strong> его описания.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/slideplayer.com/slide/12415443/74/images/85/HTML+Forms+%E2%80%93+Example+%282%29+form.html+%28continued%29+%3Cbr+%2F%3E+Gender%3A.jpg' /><noscript><img loading='lazy' src='/800/600/http/slideplayer.com/slide/12415443/74/images/85/HTML+Forms+%E2%80%93+Example+%282%29+form.html+%28continued%29+%3Cbr+%2F%3E+Gender%3A.jpg' /></noscript>  </p><pre data-lang="html"> <метка>
  <input type="checkbox"> Я согласен с условиями
</метка> </pre><p>
     Я согласен с условиями
   </p>
 <p> Вы можете нажать <em> «Я согласен с условиями» </em>, чтобы переключить флажок. </p>
 <p> По умолчанию флажок для ввода не установлен. Вы можете пометить его как проверенный, используя просто вызываемый <code> проверенный атрибут </code>. </p><pre data-lang="html"> <метка>
  <input type="checkbox" checked> Использовать в качестве платежного адреса
</метка> </pre><p>
     Использовать в качестве моего платежного адреса
   </p>
  <h4><span class="ez-toc-section" id="i-29"> Радиокнопки </span></h4> 
 <p> Вы можете предоставить пользователю <strong> список опций </strong> для выбора с помощью переключателей. </p>
 <p> Чтобы этот элемент управления формы работал, ваш HTML-код должен <strong> сгруппировать </strong> список переключателей вместе. Это достигается использованием <em> того же значения </em> для <code> имя </code> атрибут: </p><pre data-lang="html"> <label>Семейное положение</label>
<метка>
  <input type="радио" name="статус">
  Одинокий
</метка>
<метка>
  <input type="радио" name="статус">
  замужем
</метка>
<метка>
  <input type="радио" name="статус">
  В разводе
</метка>
<метка>
  <input type="радио" name="статус">
  Овдовела
</label> </pre><p> Семейное положение
   <br/>
    
    Одинокий
  
   <br/>
    
    замужем
  
   <br/>
    
    В разводе
  
   <br/>
    
    Овдовела
   </p>
 <p> Поскольку все переключатели используют одно и то же значение <em> </em> для атрибута <code> имени </code> (в данном случае значение <code> «статус» </code> ), выбор одного параметра приведет к отмене выбора всех остальных.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fuzeservers.ru/wp-content/uploads/5/c/6/5c6e6fb510e6956e99676d009aec16d6.png' /><noscript><img loading='lazy' src='/800/600/http/fuzeservers.ru/wp-content/uploads/5/c/6/5c6e6fb510e6956e99676d009aec16d6.png' /></noscript>  Радиокнопки называются <strong> взаимоисключающими </strong> . </p>
  <h5><span class="ez-toc-section" id="i-30"> Разница между переключателями и флажками </span></h5> 
 <p> Пока флажок существует <strong> сам по себе </strong> , переключатели могут отображаться только в виде списка <strong> </strong> (что означает наличие как минимум <em> 2 </em> опций). </p>
 <p> Кроме того, установка флажка является <strong> необязательным </strong> , а выбор одной из радиокнопок <strong> обязательным </strong> . Вот почему невозможно снять флажок с переключателя, если не выбран вариант родственного элемента. Но, в конце концов, всегда выбран один из переключателей. </p>
 <p> Если количество вариантов для выбора занимает слишком много места, вы можете использовать <code> <select> </code> выпадающие меню. </p>
 <p> Они работают как переключатели. Только схема у них разная. </p><pre data-lang="html"> <выбрать>
  <option>Январь</option>
  <option>Февраль</option>
  <option>март</option>
  <option>Апрель</option>
  <option>Май</option>
  <option>Июнь</option>
  <option>июль</option>
  <option>Август</option>
  <option>Сентябрь</option>
  <option>октябрь</option>
  <option>ноябрь</option>
  <option>декабрь</option>
</выбрать> </pre><p> ЯнварьФевральМартАпрельМайИюньИюльАвгустСентябрьОктябрьНоябрьДекабрь </p>
 <p> Если вы добавите атрибут <code> Multiple </code>, вы можете предоставить возможность выбора нескольких вариантов.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/jqueryform.github.io/posts/video/form-html.jpg' /><noscript><img loading='lazy' src='/800/600/http/jqueryform.github.io/posts/video/form-html.jpg' /></noscript>  </p><pre data-lang="html"> <label>Какие у вас браузеры?</label>
<выбрать несколько>
  <option>Google Chrome</option>
  <option>Интернет-обозреватель</option>
  <option>Mozilla Firefox</option>
  <option>Опера</option>
  <option>Сафари</option>
</выбрать> </pre><p> Какие у вас браузеры?
   <br/> Google ChromeInternet ExplorerMozilla FirefoxOperaSafari </p>
 <p> Выберите несколько вариантов, удерживая клавишу Ctrl (или ⌘) и щелкая. Это может быть хорошей альтернативой использованию нескольких флажков подряд. </p>
  <h4><span class="ez-toc-section" id="i-31"> Пример: полная форма регистрации </span></h4><pre data-lang="html"> <form action="/signup" method="POST">
  <p>
    <label>Заголовок</label>
    <метка>
      <input type="radio" name="title" value="mr">
      г-н
    </метка>
    <метка>
      <input type="радио" name="title" value="госпожа">
      Миссис
    </метка>
    <метка>
      <input type="radio" name="title" value="miss">
      Скучать
    </метка>
  </p>
  <p>
    <label>Имя</label>
    <input type="text" value="first_name">
  </p>
  <p>
    <label>Фамилия</label>
    <input type="text" value="last_name">
  </p>
  <p>
    <label>Электронная почта</label>
    <input type="электронная почта" value="электронная почта">
  </p>
  <p>
    <label>Номер телефона</label>
    <тип ввода="тел" значение="телефон">
  </p>
  <p>
    <label>Пароль</label>
    <тип ввода="пароль" значение="пароль">
  </p>
  <р>
    <label>Подтвердите свой пароль</label>
    <input type="password" value="password_confirm">
  </p>
  <p>
    <label>Страна</label>
    <выбрать>
      <option>Канада</option>
      <option>Франция</option>
      <option>Германия</option>
      <option>Италия</option>
      <option>Япония</option>
      <option>Россия</option>
      <option>Великобритания</option>
      <option>США</option>
    </выбрать>
  </p>
  <р>
    <метка>
      <input type="checkbox" value="terms">
      Я согласен с <a href="/terms">условиями и положениями</a>
    </метка>
  </p>
  <р>
    <кнопка>
      Подписаться
    </кнопка>
  </p>
</форма> </pre><p>
      Заголовок
      
        
        г-н
      
      
        
        Миссис
      
      
        
        Скучать
      
     </p>
     <p>
      Имя
       </p>
     <p>
      Фамилия
       </p>
     <p>
      Электронное письмо
       </p>
     <p>
      Телефонный номер
       </p>
     <p>
      Пароль
       </p>
     <p>
      Подтвердите ваш пароль
       </p>
     <p>
      Страна
      КанадаФранцияГерманияИталияЯпонияРоссияВеликобританияСША </p>
     <p>
      
        
        Я согласен с Условиями использования
      
     </p>
    
  
 <p> Существуют и другие элементы управления формой, но мы рассмотрели те, которые в основном будут использоваться.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf.ppt-online.org/files1/slide/e/EWbQXhFH9oMpJ7R4I8au0dzBNUsqGZrKAc3C5gkjVO/slide-37.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files1/slide/e/EWbQXhFH9oMpJ7R4I8au0dzBNUsqGZrKAc3C5gkjVO/slide-37.jpg' /></noscript>  </p>
 <p> Пришло время начать <strong> оформление </strong> нашей страницы. </p>  <h2><span class="ez-toc-section" id="HTML-4"> HTML: тег </span></h2> <hr/> <p> В этом руководстве по HTML объясняется, как использовать элемент HTML, называемый тегом <strong> <form> </strong>, с синтаксисом и примерами. </p> <h3><span class="ez-toc-section" id="i-32"> Описание </span></h3> <p> Тег HTML <strong> <form> </strong> используется для создания формы на веб-странице с интерактивными элементами управления для пользовательского ввода. Этот тег также часто называют элементом <form>. </p> <h3><span class="ez-toc-section" id="i-33"> Синтаксис </span></h3>  <p> В HTML синтаксис тега <strong> <form> </strong>: </p><pre> <body>
  <форма action="" метод="получить">
    Компания: <input type="text" name="company"><br>
    Адрес: <input type="text" name="address"><br>
    <input type="submit" value="Отправить">
  </форма>
</тело> </pre><h4><span class="ez-toc-section" id="i-34"> Пример вывода </span></h4><pre>
 </pre><h3><span class="ez-toc-section" id="i-35"> Атрибуты </span></h3>  <p> Помимо глобальных атрибутов, ниже приведен список атрибутов, специфичных для тега <form>: </p> <table> <thead> <tr> <th> Атрибут </th>
       <th> Описание </th>
       <th> HTML-совместимость </th>
     </tr> </thead> <tbody> <tr> <td> принять </td>
       <td> Список типов содержимого (через запятую), которые сервер принимает в качестве типов файлов </td>
       <td> HTML 4.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.stack.imgur.com/M3GlX.png' /><noscript><img loading='lazy' src='/800/600/http/i.stack.imgur.com/M3GlX.png' /></noscript> 01, устарело в HTML5 </td>
     </tr> <tr> <td> принять кодировку </td>
       <td> Список наборов символов (разделенных запятыми или пробелами), которые принимает сервер </td>
       <td> HTML 4.01, HTML5 </td>
     </tr> <tr> <td> действие </td>
       <td> URL страницы, на которой обрабатывается информация, представленная формой </td>
       <td> HTML 4.01, HTML5 </td>
     </tr> <tr> <td> автозаполнение </td>
       <td> Значение либо <code> на </code>, либо <code> на </code>, чтобы указать, может ли браузер автоматически заполнять значения в элементах ввода на основе значений, ранее введенных в форму </td>
       <td> HTML5 </td>
     </tr> <tr> <td> enctype </td>
       <td> Если метод для формы <code> post </code> , указывает тип MIME для кодирования данных формы. /обычная </em> </p> </td>
       <td> HTML 4.01, HTML5 </td>
     </tr> <tr> <td> метод </td>
       <td> Метод HTTP, используемый для отправки формы. Это может быть либо <code> пост </code> или <code> получить </code> </td>
       <td> HTML 4.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/d/b/a/dba2cdfd1547129fc5bc6c19494c418b.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/d/b/a/dba2cdfd1547129fc5bc6c19494c418b.jpeg' /></noscript> 01, HTML5 </td>
     </tr> <tr> <td> имя </td>
       <td> Наименование формы </td>
       <td> HTML 4.01, HTML5 </td>
     </tr> <tr> <td> повторная проверка </td>
       <td> Логическое значение, указывающее, следует ли проверять форму при ее отправке </td>
       <td> HTML5 </td>
     </tr> <tr> <td> цель </td>
       <td> Указывает, где отображать ответ после отправки формы. Это может быть одно из следующих значений: _self, _blank, _parent, _top <p> _self — означает, что ресурс загружается в текущий фрейм или контекст <br/> _blank — означает, что ресурс загружается в новое окно или контекст <br/> _parent — означает, что ресурс загружается в родительский фрейм или контекст <br/> _top — означает, что ресурс загружается в полное оригинальное окно </p> </td>
       <td> HTML 4.01, HTML5 </td>
     </tr> </tbody> </table>  <h3><span class="ez-toc-section" id="i-36"> Примечание </span></h3>  <ul> <li> HTML-элемент <form> находится внутри тега <body>. </li>
 <li> HTML-формы могут содержать такие элементы, как: <button>, <datalist>, <fieldset>, <input>, <keygen>, <label>, <legend>, <meter>, <optgroup>, <option>, < теги output>, <progress>, <select> и <textarea> </li>
   </ul>  <h3><span class="ez-toc-section" id="i-37"> Совместимость с браузерами </span></h3>  <p> Тег <form> имеет базовую поддержку со следующими браузерами: </p> <ul> <li> Chrome </li>
     <li> Андроид </li>
     <li> Firefox (Геккон) </li>
     <li> Firefox Mobile (Геккон) </li>
     <li> Internet Explorer (IE) </li>
     <li> Пограничный мобильный </li>
     <li> Опера </li>
     <li> Опера Мобайл </li>
     <li> Сафари (веб-кит) </li>
     <li> Сафари Мобильный </li>
   </ul>  <h3><span class="ez-toc-section" id="i-38"> Пример </span></h3>  <p> Мы обсудим тег <form> ниже, исследуя примеры использования тега <form> в HTML5, HTML 4.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/einigen-art.com/eafwst/PbTS8LTUOHD8ykPoB8r8IQHaEK.jpg' /><noscript><img loading='lazy' src='/800/600/http/einigen-art.com/eafwst/PbTS8LTUOHD8ykPoB8r8IQHaEK.jpg' /></noscript> 01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict и XHTML 1.1. </p> <ul> <li data-tab="1"> HTML5 </li>
 <li data-tab="2"> HTML4 </li>
 <li data-tab="3"> XHTML </li>
 </ul>  <h4><span class="ez-toc-section" id="_HTML5"> Документ HTML5 </span></h4>  <p> Если вы создали новую веб-страницу в HTML5, ваш тег <form> может выглядеть следующим образом: </p><pre> <!doctype html>
<html>
<голова>
<мета-кодировка="UTF-8">
<title>Пример HTML5 от www.techonthenet.com</title>
</голова>
<тело>
 <h2><span class="ez-toc-section" id="_1">Заголовок 1</span></h2> 
<форма action="" метод="получить">
  Компания: <input type="text" name="company"><br>
  Адрес: <input type="text" name="address"><br>
  <input type="submit" value="Отправить">
</форма>
</тело>
</html> </pre><p> В этом примере документа HTML5 мы использовали тег <form> для создания HTML-формы. Эта форма содержит два элемента управления <input> для компании и адреса, а также кнопку отправки. </p>  <h4><span class="ez-toc-section" id="HTML_401_Transitional_Document"> HTML 4.01 Transitional Document </span></h4>  <p> Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег <form> может выглядеть следующим образом: </p><pre> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/8/a/2/8a2d1e702ed0903b325035a80865d8c9.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/8/a/2/8a2d1e702ed0903b325035a80865d8c9.jpeg' /></noscript> 01 Transitional// RU" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<голова>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Переходный пример HTML 4.01 от www.techonthenet.com</title>
</голова>
<тело>
 <h2><span class="ez-toc-section" id="_1-2">Заголовок 1</span></h2> 
<форма action="" метод="получить">
  Компания: <input type="text" name="company"><br>
  Адрес: <input type="text" name="address"><br>
  <input type="submit" value="Отправить">
</форма>
</тело>
</html> </pre><p> В этом примере переходного документа HTML 4.01 мы использовали тег <form> для создания HTML-формы. Эта форма содержит два элемента управления <input> для компании и адреса, а также кнопку отправки. </p>  <h4><span class="ez-toc-section" id="_XHTML_10_Transitional"> Документ XHTML 1.0 Transitional </span></h4>  <p> Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег <form> может выглядеть следующим образом: </p><pre> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// RU" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<голова>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Переходный пример XHMTL 1.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fiverr-res.cloudinary.com/images/t_main1,q_auto,f_auto,q_auto,f_auto/gigs/115527562/original/ef8b0baf15b855812cbd176e524d89e6cd589ef0/create-responsive-html-form-and-integrate-with-database.jpg' /><noscript><img loading='lazy' src='/800/600/http/fiverr-res.cloudinary.com/images/t_main1,q_auto,f_auto,q_auto,f_auto/gigs/115527562/original/ef8b0baf15b855812cbd176e524d89e6cd589ef0/create-responsive-html-form-and-integrate-with-database.jpg' /></noscript> 0 от www.techonthenet.com</title>
</голова>
<тело>
 <h2><span class="ez-toc-section" id="_1-3">Заголовок 1</span></h2> 
<форма action="" метод="получить">
  Компания: <input type="text" name="company" /><br />
  Адрес: <input type="text" name="address" /><br />
  <input type="submit" value="Отправить" />
</форма>
</тело>
</html> </pre><p> В этом примере переходного документа XHTML 1.0 мы использовали тег <form> для создания HTML-формы. Эта форма содержит два элемента управления <input> для компании и адреса, а также кнопку отправки. </p>  <h4><span class="ez-toc-section" id="XHTML_10_Strict_Document"> XHTML 1.0 Strict Document </span></h4>  <p> Если вы создали новую веб-страницу в XHTML 1.0 Strict, ваш тег <form> может выглядеть следующим образом: </p><pre> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict// RU" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<голова>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Строгий пример XHTML 1.0 от www.techonthenet.com</title>
</голова>
<тело>
 <h2><span class="ez-toc-section" id="_1-4">Заголовок 1</span></h2> 
<форма action="" метод="получить">
  <дел>
    Компания: <input type="text" name="company" /><br />
    Адрес: <input type="text" name="address" /><br />
    <input type="submit" value="Отправить" />
  </div>
</форма>
</тело>
</html> </pre><p> В этом примере XHTML 1.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/originals/fa/f4/14/faf4143c1c16c0fc1dfbbab1da66eec3.png' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/originals/fa/f4/14/faf4143c1c16c0fc1dfbbab1da66eec3.png' /></noscript>		</div>
	</div>
</div>
</article>

	<nav class="navigation post-navigation" aria-label="Записи">
		<h2 class="screen-reader-text">Навигация по записям</h2>
		<div class="nav-links"><div class="nav-previous"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/raboty-fotoshop-20-primerov-obrabotki-v-photoshop-do-i-posle.html" rel="prev">Работы фотошоп: 20 примеров обработки в Photoshop ДО и ПОСЛЕ</a></div><div class="nav-next"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/plagin-wordpress-pohozhie-zapisi-top-11-besplatnyh-luchshih-plaginov-pohozhih-zapisej-wordpress-s-miniatyurami.html" rel="next">Плагин wordpress похожие записи: ТОП-11 бесплатных ЛУЧШИХ плагинов похожих записей WordPress с миниатюрами</a></div></div>
	</nav><div id="comments" class="comments-area">

		<div id="respond" class="comment-respond">
		<h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/html/forms-html-htmlformelement-web-apis-mdn.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--90abhccf7b.xn--p1ai/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required>
Имя * 
Email * 
Сайт

Forms html: HTMLFormElement — Web APIs | MDN

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

Элемент <input>

Пример

Элемент <select>

Пример

Пример

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

Пример

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

Пример

Элемент <textarea>

Пример

Пример

Элемент <button>

Пример

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

Пример

Элемент <datalist>

Пример

Элемент <output>

Пример

HTML Упражнения

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

Упражнение:

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

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

Try it

Attributes

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

Examples

HTML

Specifications

Browser compatibility

See also

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

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

Рубрики