English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
В HTML5 добавлены множество новых типов ввода форм, использование этих новых элементов позволяет обеспечить лучшее управление вводом и проверку.
HTML5 имеет множество новых типов ввода форм. Эти новые функции предоставляют лучшее управление вводом и проверку.
Эта глава предоставляет полное введение в эти новые типы ввода:
color
date
datetime
datetime-local
month
number
range
search
tel
time
url
week
Внимание:Не все основные браузеры поддерживают новые типы ввода, но вы уже можете использовать их во всех основных браузерах. Даже если они не поддерживаются, они все равно будут отображаться как обычные текстовые поля.
Тип "color" используется в поле ввода для выбора цвета, как показано ниже:
Выберите цвет из палитры:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной учебник (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Выберите понравившийся цвет: <input type="color" name="favcolor"><br> <input type="submit"> </form> </body> </html>Проверьте, посмотрите ›/‹
Тип "date" позволяет выбрать дату из даты выбора.
Определите контроллер времени:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной учебник (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Дата: <input type="date" name="bday"> <input type="submit"> </form> </body> </html>Проверьте, посмотрите ›/‹
Тип datetime позволяет выбрать дату (UTC время).
Определение контроллера даты и времени (локальное время):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной учебник (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> День рождения (дата и время): <input type="datetime" name="bdaytime"> <input type="submit"> </form> </body> </html>Проверьте, посмотрите ›/‹
Тип datetime-local позволяет выбрать дату и время (без часового пояса).
Определение даты и времени (без часового пояса):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной учебник (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> День рождения (дата и время): <input type="datetime-local" name="bdaytime"> <input type="submit"> </form> </body> </html>Проверьте, посмотрите ›/‹
Тип email используется для полей ввода, которые должны содержать адрес электронной почты.
При отправке формы автоматически проверяется, является ли значение поля email законным и действительным:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной учебник (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Электронная почта: <input type="email" name="usremail"> <input type="submit"> </form> <p><b>Внимание:</b> Internet Explorer 9 и более ранние версии IE не поддерживают type="email".</p> </body> </html>Проверьте, посмотрите ›/‹
Подсказка: Браузер Safari на iPhone поддерживает тип ввода email и адаптирует клавиатуру сенсорного экрана для него (добавляет опции @ и .com).
Тип month позволяет выбрать месяц.
Определение месяца и года (без часового пояса):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной учебник (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> День рождения (месяц и год): <input type="month" name="bdaymonth"> <input type="submit"> </form> </body> </html>Проверьте, посмотрите ›/‹
Тип number используется для полей ввода, которые должны содержать числовые значения.
Вы также можете определить ограничения для接受的 чисел:
Определение поля ввода числовых значений (ограничение):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной учебник (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Количество (от 1 до 5): <input type="number" name="quantity" min="1" max="5"> <input type="submit"> </form> <p><b>Внимание:</b> Internet Explorer 9 и более ранние версии IE не поддерживают type="number".</p> </body> </html>Проверьте, посмотрите ›/‹
Используйте следующие атрибуты для определения ограничений для типа числовых значений:
| Атрибут | Описание |
| disabled | Указывается, что поле ввода отключено |
| max | Указывается максимальное разрешенное значение |
| maxlength | Указывается максимальная длина символов поля ввода |
| min | Указывается минимальное разрешенное значение |
| pattern | Указывается шаблон для проверки значения поля ввода |
| readonly | Указывается, что значение поля ввода не может быть изменено |
| required | Определите, является ли значение поля ввода обязательным: |
| size | Определите количество видимых символов в поле ввода: |
| step | Определите законный интервал числовых значений для поля ввода: |
| value | Определите значение по умолчанию для поля ввода: |
Тип range используется для полей ввода, которые должны содержать числовые значения в определенном диапазоне.
Тип range отображается в виде ползунка.
Определите числовое значение, не требующее высокой точности (например, ползунок):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной учебник (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php" method="get"> Баллы: <input type="range" name="points" min="1" max="10"> <input type="submit"> </form> <p><b>Внимание:</b> Версии Internet Explorer 9 и более ранние не поддерживают type="range".</p> </body> </html>Проверьте, посмотрите ›/‹
Используйте следующие атрибуты для определения ограничений для типа числовых значений:
max - устанавливает максимальное значение, разрешенное
min - устанавливает минимальное значение, разрешенное
step - устанавливает законный интервал чисел
value - устанавливает значение по умолчанию
Тип search используется для поисковых полей, таких как поисковая строка сайта или Google.
Определите поисковое поле (например, поисковая строка сайта или Google):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной учебник (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Поиск Google: <input type="search" name="googlesearch"><br> <input type="submit"> </form> </body> </html>Проверьте, посмотрите ›/‹
Определите поле ввода телефонного номера:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной учебник (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Телефонный номер: <input type="tel" name="usrtel"><br> <input type="submit"> </form> </body> </html>Проверьте, посмотрите ›/‹
Тип времени позволяет выбрать время.
Определите контроллер ввода времени (без часового пояса):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной учебник (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Выберите время: <input type="time" name="usr_time"> <input type="submit"> </form> </body> </html>Проверьте, посмотрите ›/‹
Тип ввода URL используется для полей ввода, которые должны содержать адрес URL.
При подаче формы автоматически проверяется значение поля URL.
Определите поле ввода URL:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной учебник (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Добавьте вашу домашнюю страницу: <input type="url" name="homepage"><br> <input type="submit"> </form> <p><b>Внимание:</b> Версии Internet Explorer 9 и более ранние не поддерживают type="url".</p> </body> </html>Проверьте, посмотрите ›/‹
Подсказка: Браузер Safari, встроенный в iPhone, поддерживает ввод URL и изменяет клавиатуру сенсорного экрана для его использования (добавление опции .com).
Тип week позволяет выбрать неделю и год.
Определите неделю и год (без часового пояса):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной учебник (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Выберите неделю: <input type="week" name="year_week"> <input type="submit"> </form> </body> </html>Проверьте, посмотрите ›/‹
| Тег | Описание |
| <input> | Описание вводного устройства input |