Поддержка Вид

LiveInternetLiveInternet

Аватар

сменить

Авось из (+ сутки) дневников

input type (обязательный атрибут)

Вторник, 21 Ноября 2017 г. 01:57 + в цитатник

Цитата сообщения Иннушка

Прочитать целиком В свой цитатник или сообщество!

input type (обязательный атрибут)

Лучше использовать тот тип input, который необходим для поставленных задач. Браузеры проверяют правильность ввода после заполнения конкретного элемента, а не всей формы. В настоящее время не все типы поддерживаются браузерами (кроме Оперы), но это только вопрос времени (подробнее).

Значения type
<input type="text" autofocus maxlength="10"/>
Тип Описание
	текстовое поле
<input type="password"/>
	при вводе символы отмечаются звёздочками
<input type="email"/>
	показывает ошибку, если введён не email
<input type="file"/>
	для ввода файла с компьютера
<input type="tel" pattern="\(\d\d\d\) ?\d\d\d-\d\d-\d\d" placeholder="(###) ###-##-##"/>
	номер телефона в определённом формате
<input type="URL"/>
	URL
<input type="search" results="5" autosave="some_unique_value"/>
	форма поиска. Для отмены стандартных стилей в Safari и Chrome применяется свойство: -webkit-appearance: none;
<input type="color"/> для выбора цвета

<input type="number" min="0" max="100" step="5"/>
	для выбора цифр, например, количества единиц товара. Рядом отображаются стрелочки-переключатели. Узнать больше об `input type="number"`.
<input type="date" max="2012-04-20" min="2012-04-10" value="2012-04-10"/>
	для выбора даты в формате yyyy-mm-dd. Выводит выпадающий календарь.
<input type="datetime"/>
	для выбора даты и времени в формате yyyy-mm-dd HH:MM. Выводит выпадающий календарь.
<input type="datetime-local"/>
	для выбора даты и местного времени в формате yyyy-mm-dd HH:MM. Выводит выпадающий календарь.
<inputtype="month"/>
	для выбора года и месяца в формате yyyy-mm. Выводит выпадающий календарь.
<input type="week"/>
	для выбора года и недели в формате yyyy-W. Выводит выпадающий календарь.
<input type="time"/>
	для выбора времени в формате HH:MM. Выводит выпадающий календарь.
<input type="range"/>

<input type="checkbox"/> <input type="checkbox"/>
показывает ползунок. Узнать больше об `input type="range"`.
	позволяет выбрать несколько вариантов
<input type="radio" checked="checked" name="raz"/> <input type="radio" name="raz"/>
	выбор одного из вариантов
<input type="button" value="кнопка"/>

<input type="submit" value="кнопка"/>
кнопка

<input type="image" src="http://1.bp.blogspot.com/_hljKDuw-cxQ/SDEJPIeJG2I/.../lpDemoBuscador.gif"/>
кнопка для отправки данных на сервер
	рисунок для отправки данных на сервер
<input type="reset" value="сброс"/>