Типы ввода 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">

Тип ввода Текст

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

<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname"> </form>

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

Введите тип пароля

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

<form> <label for="username">Username:</label><br> <input type="text" id="username" name="username"><br> <label for="pwd">Password:</label><br> <input type="password" id="pwd" name="pwd"> </form>

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

Тип ввода Отправка

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

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

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

<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form>

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

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

Сброс типа ввода

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

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

Переключатели

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

Переключатели позволяют пользователю выбрать ТОЛЬКО ОДИН из ограниченного числа вариантов:

<p>Choose your favorite Web language:</p>

<form> <input type="radio" id="html" name="fav_language" value="HTML"> <label for="html">HTML</label><br> <input type="radio" id="css" name="fav_language" value="CSS"> <label for="css">CSS</label><br> <input type="radio" id="javascript" name="fav_language" value="JavaScript"> <label for="javascript">JavaScript</label> </form>

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

Флажок "Тип ввода"

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

Флажки позволяют пользователю выбрать НОЛЬ или БОЛЕЕ опций из ограниченного числа вариантов.

<form> <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="vehicle1"> I have a bike</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> <label for="vehicle2"> I have a car</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> <label for="vehicle3"> I have a boat</label> </form>

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

Кнопка ввода типа

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

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

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

Тип ввода Цвет

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

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

<form> <label for="favcolor">Select your favorite color:</label> <input type="color" id="favcolor" name="favcolor"> </form>

Введите дату

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

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

<form> <label for="birthday">Birthday:</label> <input type="date" id="birthday" name="birthday"> </form>

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

<form> <label for="datemax">Enter a date before 1980-01-01:</label> <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br> <label for="datemin">Enter a date after 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">Birthday (date and time):</label> <input type="datetime-local" id="birthdaytime" name="birthdaytime"> </form>

Тип ввода электронной почты

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

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

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

<form> <label for="email">Enter your email:</label> <input type="email" id="email" name="email"> </form>

Ввод типа изображения

<input type="image"> определяет изображение как кнопку отправки.

Путь к изображению указан в атрибуте src.

<form> <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"> </form>

Тип ввода файл

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

<form> <label for="myfile">Select a file:</label> <input type="file" id="myfile" name="myfile"> </form>

Тип ввода Скрытый

<input type="hidden"> определяет скрытое поле ввода (невидимое пользователю).

Скрытое поле позволяет веб-разработчикам включать данные, которые не могут быть видны или изменены пользователями при отправке формы.

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

Примечание: Хотя значение не отображается пользователю в содержимом страницы, оно видно (и может быть отредактировано) с помощью инструментов разработчика любого браузера или функции "Просмотр источника". Не используйте скрытые входы в качестве меры безопасности!

<form> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <input type="hidden" id="custId" name="custId" value="3487"> <input type="submit" value="Submit"> </form>

Ввод месяца

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

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

<form> <label for="bdaymonth">Birthday (month and year):</label> <input type="month" id="bdaymonth" name="bdaymonth"> </form>

Тип ввода Number

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

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

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

<form> <label for="quantity">Quantity (between 1 and 5):</label> <input type="number" id="quantity" name="quantity" min="1" max="5"> </form>

Диапазон типов ввода

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

<form> <label for="vol">Volume (between 0 and 50):</label> <input type="range" id="vol" name="vol" min="0" max="50"> </form>

Тип ввода поиск

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

<form> <label for="gsearch">Search Google:</label> <input type="search" id="gsearch" name="gsearch"> </form>

Тип ввода телефона

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

<form> <label for="phone">Enter your phone number:</label> <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"> </form>

Тип ввода времени

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

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

<form> <label for="appt">Select a time:</label> <input type="time" id="appt" name="appt"> </form>

Ввод URL-адреса

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

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

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

<form> <label for="homepage">Add your homepage:</label> <input type="url" id="homepage" name="homepage"> </form>

Тип ввода недели

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

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

<form> <label for="week">Select a week:</label> <input type="week" id="week" name="week"> </form>