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

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>.

HTML Типы ввода

Вот различные типы ввода, которые вы можете использовать в HTML:

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">
  • <input type="time">
  • <input type="url">
  • <input type="week">

Тип ввода "text"

<input type="text"> определяет однострочное поле ввода текста:

Пример

<form>
  <label for="fname">Имя:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Фамилия:</label><br>
  <input type="text" id="lname" name="lname">
</form>
Попробуйте сами »

Именно так приведенный выше HTML код будет отображаться в браузере:

Имя:

Фамилия:


Тип ввода "password"

<input type="password"> определяет поле пароля:

Пример

<form>
  <label for="username">Имя пользователя:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">Пароль:</label><br>
  <input type="password" id="pwd" name="pwd">
</form>
Попробуйте сами »

Именно так приведенный выше HTML код будет отображаться в браузере:

Имя пользователя:

Пароль:

Символы в поле пароля маскируются (отображаются в виде звездочек или кружочков).



Тип ввода "submit"

<input type="submit"> определяет кнопку для предоставление данных формы в обработчик форм.

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

Обработчик формы задается в окне формы атрибут action:

Пример

<form action="/action_page.php">
  <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="Отправить">
</form>
Попробуйте сами »

Именно так приведенный выше HTML код будет отображаться в браузере:

Имя:

Фамилия:


Если вы опустите атрибут value кнопки submit, то кнопка получит текст по умолчанию:

Пример

<form action="/action_page.php">
  <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">
</form>
Попробуйте сами »

Тип ввода "reset"

<input type="reset"> определяет кнопку сброса это приведет к сбросу всех значений формы к их значениям по умолчанию:

Пример

<form action="/action_page.php">
  <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="Отправить">
  <input type="reset">
</form>
Попробуйте сами »

Именно так приведенный выше HTML код будет отображаться в браузере:

Имя:

Фамилия:


Если вы измените входные значения и затем нажмете кнопку "Сброс", то данные формы будут сброшены до значений по умолчанию.


Тип ввода "radio"

<input type="radio"> определяет переключатель.

Переключатели позволяют пользователю выбрать только один из ограниченного числа вариантов:

Пример

<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Мужчина</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Женщина</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">другое</label>
</form>
Попробуйте сами »

Именно так приведенный выше HTML код будет отображаться в браузере:




Тип ввода "checkbox"

<input type="checkbox"> определяет флажок.

Флажки позволяют пользователю выбрать ноль или более вариантов из ограниченного числа вариантов.

Пример

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> У меня есть велосипед</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> У меня есть машина</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> У меня есть лодка</label>
</form>
Попробуйте сами »

Именно так приведенный выше HTML код будет отображаться в браузере:




Тип ввода "button"

<input type="button"> определяет кнопку:

Пример

<input type="button" onclick="alert('Привет Мир!')" value="Нажми на меня!">
Попробуйте сами »

Именно так приведенный выше HTML код будет отображаться в браузере:


Тип ввода "color"

<input type="color"> используется для полей ввода, которые должны содержать цвет.

В зависимости от поддержки браузера в поле ввода может отображаться палитра цветов.

Пример

<form>
  <label for="favcolor">Выберите свой любимый цвет:</label>
  <input type="color" id="favcolor" name="favcolor">
</form>
Попробуйте сами »

Тип ввода "date"

<input type="date"> используется для полей ввода, которые должны содержать дату.

В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.

Пример

<form>
  <label for="birthday">День рождения:</label>
  <input type="date" id="birthday" name="birthday">
</form>
Попробуйте сами »

Вы также можете использовать атрибуты min и max для добавления ограничений к датам:

Пример

<form>
  <label for="datemax">Введите дату до 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
  <label for="datemin">Введите дату после 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>
Попробуйте сами »

Тип ввода "datetime-local"

<input type="datetime-local"> задает поле ввода даты и времени без часового пояса.

В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.

Пример

<form>
  <label for="birthdaytime">День рождения (дата и время):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
Попробуйте сами »

Тип ввода "email"

<input type="email"> используется для полей ввода, которые должны содержать адрес электронной почты.

В зависимости от поддержки браузера адрес электронной почты может быть автоматически проверен при отправке.

Некоторые смартфоны распознают тип электронной почты и добавляют ".com" к клавиатуре, чтобы соответствовать вводу электронной почты.

Пример

<form>
  <label for="email">Введите свой адрес электронной почты:</label>
  <input type="email" id="email" name="email">
</form>
Попробуйте сами »

Тип ввода "file"

<input type="file"> определяет поле выбор файла в "браузере" и кнопку для загрузки файла.

Пример

<form>
  <label for="myfile">Выбрать файл:</label>
  <input type="file" id="myfile" name="myfile">
</form>
Попробуйте сами »

Тип ввода "month"

<input type="month"> позволяет пользователю выбрать месяц и год.

В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.

Пример

<form>
  <label for="bdaymonth">День рождения (месяц и год):</label>
  <input type="month" id="bdaymonth" name="bdaymonth">
</form>
Попробуйте сами »

Тип ввода "number"

<input type="number"> определяет числовое поле ввода.

Вы также можете установить ограничения на то, какие номера принимаются.

В следующем примере отображается числовое поле ввода, в которое можно ввести значение от 1 до 5:

Пример

<form>
  <label for="quantity">Количество (от 1 до 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
Попробуйте сами »

Входные ограничения

Вот список некоторых распространенных ограничений ввода:

Атрибут Описание
checked Указывает, что поле ввода должно быть предварительно выбрано при загрузке страницы (для type="checkbox" или type="radio")
disabled Указывает, что поле ввода должно быть отключено
max Задает максимальное значение для поля ввода
maxlength Задает максимальное количество символов для поля ввода
min Задает минимальное значение для поля ввода
pattern Задает регулярное выражение для проверки входного значения
readonly Указывает, что поле ввода доступно только для чтения (не может быть изменено)
required Указывает, что поле ввода является обязательным (должно быть заполнено)
size Задает ширину (в символах) поля ввода
step Задает допустимые интервалы чисел для поля ввода
value Задает значение по умолчанию для поля ввода

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

В следующем примере показано числовое поле ввода, в которое можно ввести значение от 0 до 100 с шагом 10. Значение по умолчанию равно 30:

Пример

<form>
  <label for="quantity">Количество:</label>
  <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>
Попробуйте сами »

Тип ввода "range"

<input type="range"> определяет элемент управления для ввода числа, точное значение которого не имеет значения (например, ползунок управления). Диапазон по умолчанию от 0 до 100. Однако вы можете установить ограничения на то, какие номера принимаются с помощью атибутов min, max, и step:

Пример

<form>
  <label for="vol">Громкость (от 0 до 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">
</form>
Попробуйте сами »

Тип ввода "search"

<input type="search"> используется для полей поиска (поле поиска ведет себя как обычное текстовое поле).

Пример

<form>
  <label for="gsearch">Поиск Google:</label>
  <input type="search" id="gsearch" name="gsearch">
</form>
Попробуйте сами »

Тип ввода "tel"

<input type="tel"> используется для полей ввода, которые должны содержать номер телефона.

Пример

<form>
  <label for="phone">Введите свой номер телефона:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
Попробуйте сами »

Тип ввода "time"

<input type="time"> позволяет пользователю выбрать время (без часового пояса).

В зависимости от поддержки браузера в поле ввода может отображаться средство выбора времени.

Пример

<form>
  <label for="appt">Выберите время:</label>
  <input type="time" id="appt" name="appt">
</form>
Попробуйте сами »

Тип ввода "url"

<input type="url"> используется для полей ввода, которые должны содержать URL адрес.

В зависимости от поддержки браузера поле url адреса может быть автоматически проверено при отправке.

Некоторые смартфоны распознают тип URL адреса, и добавляют, ".com" на клавиатуре, чтобы соответствовать ввода URL адреса.

Пример

<form>
  <label for="homepage">Добавьте свою домашнюю страницу:</label>
  <input type="url" id="homepage" name="homepage">
</form>
Попробуйте сами »

Тип ввода "week"

<input type="week"> позволяет пользователю выбрать неделю и год.

В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.

Пример

<form>
  <label for="week">Выберите неделю:</label>
  <input type="week" id="week" name="week">
</form>
Попробуйте сами »

HTML Упражнения

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

Упражнение:

В приведенной ниже форме добавьте поле ввода текста с именем "username" .

<form action="/action_page.php">
<>
</form>

Начните упражнение


HTML Атрибут типа ввода

Тег Описание
<input type=""> Указывает тип ввода для отображения