Типы входных данных HTML5

HTML5 Новые Типы входных данных

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

В этой главе описываются эти всеобъемлющие новые типы входных данных:

• цвет
• дата
• Дата и время
• Дата и время-местный
• электронная почта
• месяц
• номер
• диапазон
• поиск
• телефон
• время
• URL
• неделя

Примечание: Не все основные браузеры поддерживают новые типы входных данных, но вы уже можете использовать их во всех основных браузерах.Если не поддерживается, он все еще может выглядеть как обычные текстовые поля.

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

цвет, используемый в поле ввода типа в основном используется для выбора цвета, выглядит следующим образом:

примеров

Выберите цвет из палитры:

选择你喜欢的颜色: <input type="color" name="favcolor">

Попробуйте »

Тип входа: Дата

Тип даты позволяет выбрать дату из выбора даты.

примеров

Определите регулятор времени:

生日: <input type="date" name="bday">

Попробуйте »

Тип входа: Дата и время

тип даты и времени позволяет выбрать дату (UTC время).

примеров

Определение даты и времени контроллера (по местному времени):

生日 (日期和时间): <input type="datetime" name="bdaytime">

Попробуйте »

Тип входа: DateTime-местный

Дата и время локального типа позволяет выбрать дату и время (без часового пояса).

примеров

Определить дату и время (без часового пояса):

生日 (日期和时间): <input type="datetime-local" name="bdaytime">

Попробуйте »

Тип входа: электронная почта

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

примеров

Когда форма отправлена, она будет автоматически проверять, является ли значение действительного почтового домена:

E-mail: <input type="email" name="email">

Попробуйте »

Совет: iPhone в браузере Safari поддерживает электронный входной тип, а также путем изменения клавиатуры на сенсорном экране , чтобы соответствовать его (добавить @ и .com опции).

Тип входа: месяц

месяц тип позволяет выбрать месяц.

примеров

Определяется месяц и год (без часового пояса):

生日 (月和年): <input type="month" name="bdaymonth">

Попробуйте »

Тип входа: Номер

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

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

примеров

Определить поле ввода чисел (Limited):

数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">

Попробуйте »

Используйте следующее свойство, чтобы указать тип цифрового Limited:

• Максимально допустимый по правилам Максвеллом
• мин - минимально допустимый по правилам
• шаг - указывает интервалы юридические номер для (если шаг = "3", юридические цифры могут быть -3,0,3,6, и т.д.)
• Значение - значение по умолчанию, заданное

Попробуйте пример со всеми определенными атрибутами попробуйте

Тип входа: Диапазон

тип диапазон используется для полей ввода должен содержать диапазон числовых значений.

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

примеров

Вам не нужно определить очень точное значение (например, элемент управления слайдер):

<input type="range" name="points" min="1" max="10">

Попробуйте »

Пожалуйста, используйте следующие атрибуты для указания типа цифрового Limited:

• макс - максимально допустимое регламентом
• мин - минимально допустимый по правилам
• шаг - указывает интервалы юридических чисел для
• Значение - значение по умолчанию, заданное

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

тип поиска для поля поиска, например, поиск по сайту или поиск Google.

примеров

Определить поле поиска (аналог поиска по сайту или поиск Google):

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

Попробуйте »

Тип входа: тел

примеров

Введите номер телефона электрического поля определяется:

电话号码: <input type="tel" name="usrtel">

Попробуйте »

Тип входа: Время

Тип времени позволяет выбрать время.

примеров

Определяет контроллер ввода времени (без часового пояса):

选择时间: <input type="time" name="usr_time">

Попробуйте »

Тип входа: URL

URL-тип используется для полей ввода должен содержать адрес URL.

Когда форма отправлена, она будет автоматически проверять значение поля URL.

примеров

Определите URL в поле ввода:

添加您的主页: <input type="url" name="homepage">

Попробуйте »

Совет: iPhone в браузере Safari поддерживает URL - адреса типа входа, а также путем изменения сенсорной экранной клавиатуры , чтобы соответствовать его (добавить опцию .com).

Тип входа: неделя

Неделя позволяет выбрать тип недели и года.

примеров

Определения недели и год (без часового пояса):

选择周: <input type="week" name="week_year">

Попробуйте »

HTML5 <ввод> Тег