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

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 Компьютерный код HTML5 Семантика HTML5 Синтаксис HTML Сущность HTML Символы HTML Эмодзи HTML Кодировка HTML URL Кодировка HTML в XHTML

HTML Формы

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

HTML Графика

HTML5 Canvas HTML5 SVG

HTML Медиа

HTML Медиа формат HTML5 Видео HTML5 Аудио HTML Плагины HTML YouTube

HTML API

HTML5 Геолакация HTML5 Перетаскивание HTML5 Веб хранилище HTML5 Веб работник HTML5 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 Справочник тегов.