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

HTML5 Учебник

HTML Главная HTML Введение HTML Редакторы HTML Основные HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитирование HTML Комментарии HTML Цвета HTML c CSS HTML Ссылки HTML Изображения HTML Таблицы HTML Списки HTML Блоки HTML Классы HTML Идентификаторы HTML Фреймы HTML JavaScript HTML Путь к Файлу 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 Canvas HTML SVG HTML 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> Определяет результат вычисления