Формы (form) на HTML5

Всем привет!
Эта статья будет полезна для всех начинающих веб-мастеров. Изучив материал статьи, вы с легкостью сможете при помощи некоторых атрибутов HTML5 вывести функциональные поля для формы, например, календарь, поле для выбора цвета, поле для выбора даты и времени, бегунок для выбора числа из диапазона и т.д.
Ну что, приступим 

Дополнительные поля для формы

○ Поле «color»

Поле «color» поможет пользователю выбрать необходимый цвет. При нажатии на квадратик, откроется окно для выбора цвета:

<input id="color" name="color" ENGINE="color"/>

Результат:

○ Поле «email»

Поле «email» специально создано для ввода адреса электронной почты. Это поле будет автоматически проверять, есть ли там знак «@»:

<input type="email" name="email" id="email"/>

○ Поле «url»

Поле «url» специально создано для ввода адреса сайта. Это поле будет проверять автоматически, есть ли там «http://»:

<input type="url" name="url" id="url"/>

○ Поле «range»

С помощью поля «range» можно определить значение нужного интервала. Это поле выглядит как ползунок, который перетаскивается мышкой. Диапазон чисел можно задать с помощью атрибута min (минимально допустимое число) и max (максимально допустимое число). С помощью атрибута step можно задать шаг допустимых чисел, например, если шаг равен 3, то в поле будут выводиться числа 0,3,6,9,12 и т.д.

<input name="range" type="range" min="1" max="6" />

Результат:

○ Поле «search»

С помощью поля «search» можно сделать форму поиска по сайту.

<input name="search" type="search" value="Поиск по сайту" />

○ Поле с выпадающим списком. Элемент «datalist» и атрибут «list»

Вы сможете создать форму с выпадающим списком, а также в этой же форме дать возможность пользователю написать свой вариант, если из предложенного списка ничего не подошло:

<input type="text" list="mydata"><br><br>
<datalist id="mydata">
    <option label="UA" value="Украина">
    <option label="RUS" value="Россия">
    <option label="ANG" value="США">
</datalist>

Результат:

○ «file»

С помощью «file» можно создать кнопку для отправки файлов из вашего компьютера.

<input type="file" name="file" id="file"/>

Результат:

○ «placeholder»

С помощью «placeholder» можно в форме сделать текстовую подсказку для пользователя, что нужно вводить в поле.

<input type="email" name="email" id="email" placeholder='Введите Ваш email'/>

Результат:

○ «required»

С помощью «required» можно указать поле в форме обязательное для заполнения.

<input type="url" name="url" id="url" required="required" />

Поля для выбора даты

○ Поле «date»

Поле «date» позволит вам создать поле для выбора даты. При нажатии в поле на треугольник, откроется календарь, где посетителю будет очень легко сориентироваться в дате и выбрать необходимое число, месяц и год (в формате 05.05.2015). Такую форму можно применить на сайте для заказов номеров гостиницы, билетов на поезд и т.д.

<input id="date" name="date" type="date"/>

Результат:

○ Поле «datetime-local»

Поле «datetime-local» позволит вам создать поле для выбора даты и времени (в формате 05.05.2015  00:00).

<input id="datetime-local" name="datetime-local" type="datetime-local"/>

Результат:

○ Поле «time»

Поле «time» позволит создать поле для выбора времени (в формате 00:00).

<input id="time" name="time" type="time"/>

Результат:

○ Поле «month»

Поле «month» позволит создать поле для выбора месяца (в формате Июль 2015 г.).

<input id="month" name="month" type="month"/>

Результат:

○ Поле «week»

Поле «week» позволит создать поле для выбора недели (в формате Неделя 21,  2015 г.).

<input id="week" name="week" type="week"/>

Результат:

Если вы хотите проверить форму на правильность заполнения, почитайте вот эту статью

[посмотреть демонстрацию] 

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

Один ответ на комментарий - Формы (form) на HTML5

1. Тамара Полякова

   28.05.2015 в 18:33

   Привет Степан! Очень полезная статья! Все понятно расписал. Думаю многие начинающие смогут справиться с этой задачей! Удачи тебе!

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

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

Имя (required)

Mail (will not be published) (required)

Сайт

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

Метки: html, Вебмастеру, для сайта, форма обратной связи