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

HTML Учебник

HTML ГЛАВНАЯ HTML Введение HTML Редактор HTML Основные HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитирование HTML Комментарии HTML Цвет HTML с CSS HTML Ссылки HTML Изображения HTML Таблицы HTML Списки HTML Блоки HTML Классы HTML Идентификаторы HTML Фреймы HTML с JavaScript HTML Путь к Файлу HTML Мета теги HTML Методы верстки HTML Адаптивный дизайн HTML Компьютерный код HTML Симантика HTML Руководство HTML Сущности HTML Символы HTML Эмодзи HTML Кодировка HTML URL Кодировка HTML vs. XHTML

HTML Формы

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

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

HTML Медиа формат HTML Video HTML Audio HTML Плагины HTML YouTube

HTML API

HTML Геолакация HTML Перетаскивание HTML Веб хранилище HTML Веб работник HTML SSE

HTML Примеры

HTML Примеры HTML Тестирование HTML Упражнения HTML Сертификат HTML Резюме HTML Доступность

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

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

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



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

Элемент <input>

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

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

Пример

<input type="text" id="firstname" name="firstname">
Попробуйте сами »

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

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


Элемент <select>

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

Пример

<select id="cars" 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" style="width:200px; height:600px;">
Кот играл в саду.
</textarea>
Попробуйте сами »


Элемент <button>

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

Пример

<button type="button" onclick="alert('Привет Мир!')">Нажмите на меня!</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" id="fname" name="fname" value="Андрей"><br>
    <label for="lname">Фамилия:</label><br>
    <input type="text" id="lname" 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 id="browsers">
    <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"  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 Упражнения

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

Упражнение:

В приведенной ниже форме добавьте пустой выпадающий список с именем "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 Справочник тегов.