BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Все про HTML » HTML5 – шпаргалка для вебмастера к тегу input

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

2015-11-23 / Вр:20:58 / просмотров: 3298

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

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

<input type="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. А вот еще такая фишка есть

    required placeholder=""

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

    Ответить

    Александр отвечает:

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

    placeholder="" x-autocompletetype="email"

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

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

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

    Ответить

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

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

Subscribe without commenting

Метки: , ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 768
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4213