САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

HTML5 Учебник

HTML ГлавнаяHTML ВведениеHTML РедакторыHTML ОсновныеHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML ЦветаHTML c CSSHTML СсылкиHTML ИзображенияHTML ТаблицыHTML СпискиHTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML JavaScriptHTML Путь к ФайлуHTML ГлаваHTML МакетHTML АдаптивныйHTML Компьютерный кодHTML ОбъектыHTML СимволыHTML КодировкаHTML URL КодированиеHTML XHTML

HTML Формы

HTML ФормыHTML Элементы формыHTML Тип вводаHTML Атрибуты ввода

HTML5

HTML5 ВведениеHTML5 ПоддержкаHTML5 Новые ЭлементыHTML5 СемантикаHTML5 МиграцияHTML5 Синтасис

HTML Графика

HTML CanvasHTML SVGHTML Google Карта

HTML Медиа

HTML МедиаHTML ВидеоHTML АудиоHTML ОбъектыHTML YouTube

HTML API

HTML ГеолокацияHTML ПеретаскиваниеHTML Веб ХранилищеHTML Веб РаботникHTML СОС

HTML Примеры

HTML ПримерыHTML ВикторинаHTML УпражненияHTML СертификатHTML ЗаключениеHTML Возможности

HTML Справочники

HTML Список ТеговHTML АтрибутыHTML ГлобальныеHTML СобытияHTML ЦветаHTML ХолстHTML Аудио/ВидеоHTML ДекларацииHTML Набор КодировокHTML URL КодHTML Коды языкаHTML Коды странHTTP СообщенияHTTP МетодыКовертер PX в EMКлавишные комбинации

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



Глава описывает все элементы форм HTML.


Элемент <input>

Самым важным элементом формы является элемент <input>.

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

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


Элемент <select>

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

Пример

<select name="автомобили">
 <option value="Вольво">Вольво</option>
 <option value="Сааб">Сааб</option>
 <option value="Фиат">Фиат</option>
 <option value="Ауди">Ауди</option>
</select>
Редактор кода »

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

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

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

Пример

<option value="Фиат" selected>Фиат</option>
Редактор кода »

Элемент <textarea>

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

Пример

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

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

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

Вот как код HTML будет отображаться в браузере:



Элемент <button>

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

Пример

<button type="button" onclick="alert('Привет Мир!')">Нажми на меня!</button>
Редактор кода »

Вот как код HTML будет отображаться в браузере:



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

В HTML5 добавлены следующие элементы формы:

  • <datalist>
  • <keygen>
  • <output>

Примечание: Браузеры не отображают неизвестные элементы. Новые элементы, которые не поддерживаются в старых браузерах не будет "уничтожены " веб-странице.


Элемент <datalist> HTML5

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

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

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

Opera Safari Chrome Firefox Internet Explorer

Пример

<form action="/action_page.php">
 <input list="browsers">
 <datalist id="browsers">
   <option value="Internet Explorer">
  <option value="Firefox">
   <option value="Chrome">
  <option value="Opera">
   <option value="Safari">
 </datalist>
</form>
Редактор кода »

Элемент <keygen> HTML5

Цель элемента <keygen> обеспечить безопасный способ для проверки подлинности пользователей.

Элемент <keygen> задает два ключа генератора поля в форме.

Когда форма отправлена, генерируются два ключа, один открытый и другой закрытый.

Закрытый ключ хранится локально, а открытый ключ отправляется на сервер.

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

Opera Safari Chrome Firefox Internet Explorer

Пример

Форма с шифровкой:

<form action="/action_page.php">
 Имя пользователя: <input type="text" name="user">
 Шифровка: <keygen name="security">
 <input type="submit">
</form>
Редактор кода »

Элемент <output> HTML5

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

Opera Safari Chrome Firefox Internet Explorer

Пример

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

<form action="/action_page.php"
 oninput="x.value=parseInt(a.value)+parseInt(b.value)">
 0
 <input type="range"  id="a" name="a" value="50">
 100 +
 <input type="number" id="b" name="b" value="50">
 =
 <output name="x" for="a b"></output>
 <br><br>
 <input type="submit">
</form>
Редактор кода »

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


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

= новый HTML5.

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