HTML Типы ввода. Input type

Курс по основам HTML. W3Schools на русском языке. Уроки для начинающих

❮ Prev Next ❯

HTML Типы ввода

Этот раздел описывает разные типы ввода для элемента <input>.

HTML Input Type

Это разные типы ввода, которые можно использовать в 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="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>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>

Попробуйте сами »

Так HTML-код будет отображаться в браузере:

First name:

Last name:

Тип ввода Password (пароль)

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

Пример:

<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form>

Попробуйте сами »

Так HTML-код будет отображаться в браузере:

User name:

User password:

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

Тип ввода Submit (Отправить)

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

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

Пример:

<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>

Попробуйте сами »

Так HTML-код будет отображаться в браузере:

Если вы не укажете атрибут значения кнопки "Отправить", кнопка получит текст по умолчанию:

Пример:

Попробуйте сами »

Тип ввода Reset (Сброс)

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

Пример:

Попробуйте сами »

Так HTML-код будет отображаться в браузере:

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

Тип ввода Radio

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

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

Пример:

<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>

Попробуйте сами »

Так HTML-код будет отображаться в браузере:

Male
Female
Other

Тип ввода Checkbox (флажок)

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

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

Пример:

Попробуйте сами »

Так HTML-код будет отображаться в браузере:

I have a bike
I have a car

Тип ввода Button (кнопка)

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

Пример:

Попробуйте сами »

Так HTML-код будет отображаться в браузере:

HTML5 Input Types (типы ввода)

HTML5 добавил несколько новых типов ввода:

color
date
datetime-local
email
month
number
range
search
tel
time
url
week

Новые типы ввода данных, которые не поддерживаются более старыми веб-браузерами, будут вести себя как <input type="text">.

Тип ввода Color (цвет)

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

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

Пример:

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

Попробуйте сами »

Тип ввода Date (дата)

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

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

Пример:

<form>
Birthday:
<input type="date" name="bday">
</form>

Попробуйте сами »

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

Пример:

<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form>

Попробуйте сами »

Тип ввода Datetime-local

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

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

Пример:

<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>

Попробуйте сами »

Тип ввода email (электронная почта)

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

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

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

Пример:

Попробуйте сами »

Тип ввода File (файл)

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

Пример:

<form>
Select a file: <input type="file" name="myFile">
</form>

Попробуйте сами »

Тип ввода Month (месяц)

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

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

Пример:

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

Попробуйте сами »

Тип ввода Number (номер)

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

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

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

Пример:

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

Попробуйте сами »

Ограничения ввода

Это список некоторых общих ограничений ввода (некоторые из них новые в HTML5):

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

Вы узнаете больше про ограничения ввода в следующем разделе.

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

Пример:

<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

Попробуйте сами »

Тип ввода Range (диапазон)

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

Пример:

Попробуйте сами »

Тип ввода Search (поиск)

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

Пример:

<form>
Search Google:
<input type="search" name="googlesearch">
</form>

Попробуйте сами »

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

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

Пример

<form>
Telephone:
<input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

Попробуйте сами »

Тип ввода Time (время)

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

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

Пример:

<form>
Select a time:
<input type="time" name="usr_time">
</form>

Попробуйте сами »

Тип ввода Url (веб-адрес)

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

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

Пример:

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

Попробуйте сами »

Тип ввода Week (неделя)

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

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

Пример:

<form>
Select a week:
<input type="week" name="week_year">
</form>

Попробуйте сами »

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

Упражнение 1 » Упражнение 2 » Упражнение 3 » Упражнение 4 » Упражнение 5 »

HTML Атрибут Input Type

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

Примечание: Для получения полного списка всех доступных HTML тегов, посетите Справочник HTML тегов.

❮ Prev Next ❯