HTML5 – шпаргалка для вебмастера к тегу input

Всем привет!
Приготовил маленькую шпаргалку для веб мастеров к тегу input.
С помощью HTML5 к тегу input можно прописывать различные полезные атрибуты.
Я думаю, вы не один раз будете возвращаться к этой статье, чтобы заглянуть в подсказку.
Как-то было дело, и я затрагивал тему формы HTML5, а сейчас я дополню эту тему.

Текстовое поле:

<input ENGINE="text" autofocus maxlength="2">

maxlength – указываем количество допустимых символов.
autofocus – указатель мышки сразу будет на поле

Поле для пароля:

<input type="password"/>

Поле для email:

<input type="email"/>

Если в поле будет отсутствовать символ «@», браузер выдаст ошибку.

Кнопка для выбора файла с компьютера:

<input type="file"/>

Поле для ввода телефона:

<input type="tel" pattern="\(\d\d\d\) ?\d\d\d-\d\d-\d\d" placeholder="(ххх) ххх-хх-хх"/>

Шаблон для заполнения будет таким (ххх) ххх-хх-хх.
Почитайте здесь.

Поле поиска:

<input type="search" results="5" autosave="some_unique_value"/>

Поле выбора цвета:

<input type="color"/>

Поле для ввода и выбора цифр:

<input type="number" min="0" max="100" step="5"/>

Очень полезно для создания форм в интернет магазинах.

Поле для выбора даты в формате yyyy-mm-dd.

<input type="date" max="2012-04-20" min="2012-04-10" value="2012-04-10"/>

Выводит выпадающий календарь.

Поле для выбора даты и местного времени в формате yyyy-mm-dd HH:MM.

<input type="datetime-local"/>

Выводит выпадающий календарь.

Поле для выбора года и месяца в формате yyyy-mm

<input type="month"/>

Выводит выпадающий календарь.

Поле для выбора года и недели в формате yyyy-W.

<input type="time"/>

Выводит выпадающий календарь.

Ползунок

<input type="range"/>

Checkbox

<input type="checkbox"/><input type="checkbox"/>

radio 

<input type="radio" checked="checked" name="raz"/> <input type="radio" name="raz"/>

Кнопка

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

Кнопка для отправки данных

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

Кнопка сброса

<input type="reset" value="сброс"/>

Скрытое поле

<input type="hidden" value="скрытое поле"/>

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

3 Ответов на комментарий - HTML5 – шпаргалка для вебмастера к тегу input

1. Александр

   05.01.2016 в 02:35

   А вот еще такая фишка есть

   required placeholder=""

   Проверяет заполнение поля, если поле не заполнено то выдаст надпись, что нужно обязательно заполнить это поле. Между кавычками можно поставить хоть name, хоть email, а можно вообще ничего в кавычках не ставить. Просто если, к примеру прописать name, то в поле будет видна надпись Ваше имя или введите ваше имя, ну как у вас написано будет так и выдаст. Вот такая прикольная штука и очень полезная
2. Александр

   05.01.2016 в 02:37

   Если не сработает код выше, то можно вот так

   placeholder="" x-autocompleteENGINE="email"

   Ну и как обычно, вместо email можно поставить name или другое, смотря к чему приписывать
3. Степан => автор блога

   12.01.2016 в 00:32

   Да, нынешний HTML стал действительно круче.

Добавить комментарий

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: html, для сайта, основы