BloGGood.ru

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

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

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

Главная » Все про HTML » Формы (form) на HTML5

Формы (form) на HTML5

2015-05-28 / Вр:01:24 / просмотров: 3346

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

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

Поле «color»

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

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

Результат:

Формы (form) на HTML5

Поле «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" />

Результат:

Формы (form) на HTML5

Поле «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>

Результат:

Формы (form) на HTML5

«file»

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

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

Результат:

Формы (form) на HTML5

«placeholder»

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

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

Результат:

Формы (form) на HTML5

«required»

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

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

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

Поле «date»

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

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

Результат:

Формы (form) на HTML5

Поле «datetime-local»

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

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

Результат:

Формы (form) на HTML5

Поле «time»

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

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

Результат:

Формы (form) на HTML5

Поле «month»

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

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

Результат:

Формы (form) на HTML5

Поле «week»

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

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

Результат:

Формы (form) на HTML5

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

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

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

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

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

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

    Ответить

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

;-) :| :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

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

Количество записей на блоге: 729
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3977