Формы в HTML5

С появлением HTML5 формы получили новые замечательные типы полей ввода и новые атрибуты для полей и форм

В этой статье мы коротко опишем что из себя представляют тринадцать новых типов полей, а также четырнадцать новых атрибутов, что позволит вам составить четкое представление для чего они нужны и как их использовать. Итак, что же нового и полезного дают нам формы в HTML5?

Обратите внимание, что на текущий момент не все новые элементы поддерживаются современными браузерами. Рекомендуется смотреть примеры в браузере Google Chrome

Новые типы полей ввода

Color

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

Этот тип поля очень прост для понимания: он обеспечивает выбор цвета для пользователя, и генерирует шестнадцатеричное значение. Палитра цветов будет нативной для каждой операционной системы или браузера, как и большинство новых полей.

Date

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

Поле Date позволит вам выбрать дату из раскрывающегося списка - думаю, Вы часто видели подобные элементы на страницах, когда, например, пытались заказать номер на сайте отеля.

Date-time

<input id="departure-day-time" name="departure-day-time" type="date-time"/>

Если вы хотите, чтобы пользователь выбрал одновременно не только дату, но и время, например, для указания предпочитаемого рейса, то "date-time" это тот тип поля, который лучше всего подойдет.

Datetime-local

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

Этот тип поля точно такой же как "date-time", но он предоставляет вам время в локальной временной зоне.

Email

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

Этот тип поля создан специально для ввода адреса электронной почты, теперь нет необходимости создавать регулярное выражение на JS или PHP для проверки вводимой строки. На смартфонах оно будет вызывать специальную клавиатуру для удобного ввода адреса.

Month

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

Это поле ввода позволит вам выбрать месяц года, это очень удобно, например, для ввода информации о кредитной карте в форме заказа.

Number

<input type="number" min="48" max="84" step="0.5" value="48" name="height-inches"/>

Поле Number, как вы могли догадаться, предназначено только для ввода чисел. Вы можете указать разрешенный диапозон для чисел, если вы укажете атрибуты min и max как в приведенном выше примере, а также указать шаг в этом диапазоне.

Range

<input type="range" min="1" max="100" value="0" id="happiness"/>

В поле Range браузер выводит ползунок, который пользователь может перетаскивать влево-вправо. Можно указать минимальное и максимальное значение, а также значение по умолчанию.

Tel

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

Этот тип поля очень удобно использовать в смартфонах, так как оно вызывает цифровую клавиатуру телефона, чтобы можно было ввести номер телефона максимально просто. Оно, однако, не проверяет правильность ввода, в отличие от Email или URL.

Time

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

Этот тип ввода позволит пользователям выбирать только определенное время, например, часы и минуты.

Url

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

Это поле будет проверять на правильность ввода URL-адреса, а на смартфоне откроется URL-клавиатура.

Week

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

Это поле позволяет пользователю возможность выбрать определенную неделю.

Новые атрибуты форм

Теперь давайте посмотрим, какие новые атрибуты могут быть использованы в сочетании с новыми или ранее существовавшими полями. Существует в общей сложности четырнадцать новых атрибутов, давайте взглянем на их прямо сейчас.

Autocomplete

<input type="text" name="fullname" id="fullname" autocomplete="on"/>

Автозаполнение - этот атрибут помогает пользователям заполнить поле на основе предыдущих записей, он может либо сэкономить время, либо вызвать проблемы, так что аккуратнее с этим.

Autofocus

<input type="text" name="username" id="username" autofocus/>

Этот атрибут ставит курсор в нужное поле при загрузке страницы, так что пользователь может сразу начать печатать.

Form

<input type="button" name="filter" form="filter/>

Form связывает поле с формой по идентификатору, поэтому элемент не обязательно должен быть в пределах соответствующей формы, чтобы быть её частью.

Formaction

<input type="submit" value="Send" formaction="email.php"/>

Указывает обработчик формы.

Formenctype

<input type="submit" value="Send" formenctype="application/x-www-form-urlencoded"/>

Устанавливает способ кодирования данных формы при их отправке на сервер.

Formnovalidate

<form action="login.php">
	<label for="name">Полное имя:</label>
	<input type="text" name="name" value="Иванов Иван"/>
	<input type="submit" formnovalidate value="Send"/>
</form>

Этот атрибут указывает, что форму не нужно проверять при отправке данных. Атрибут может быть установлен для любого типа поля.

Formmethod

<input type="submit" value="Send" formmethod="POST"/>

Определяет, какой метод HTTP использовать, чтобы отправить форму, например, POST или GET.

Formtarget

<input type="submit" value="Send" formtarget="_self"/>

Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.

List & Multiple

<label>Мой любимый цвет:
	<datalist id="colours">
		<select name="colours">
		<option value="Красный">Красный</option>
		<option value="Желтый">Желтый</option>
		<option value="Зеленый">Зеленый</option>
		<!-- ... -->
	</select>
	Если другой, укажите:
	</datalist>
	<input type="text" name="colour" list="colours" multiple/>
</label>

Тег <datalist> определяет список предопределенных вариантов элемента <input>, которые можно выбирать при наборе в текстовом поле.

Novalidate

<form action="login.php" novalidate>
	<label for="name">Full name:</label>
	<input type="text" name="name" value="John Doe"/>
	<input type="submit" value="Send"/>
</form>

Указывает, что форма не должна быть провалидирована при её отправке на сервер, этот атрибут устанавливается только на элемент формы.

Pattern

<input pattern="[0-9]{5}" name="zip" type="text" title="Zipcode"/>

Pattern позволяет определить регулярное выражение в HTML-разметке поля, а не в JS.

Placeholder

<input type=" password " name="password" id=" password " placeholder="Введите ваш пароль"/>

Placeholder обычно отображается в виде светло-серого текста в поле, до тех пор пока поле не активно. Обычно этот атрибут содержит подсказку, что именно необходимо ввести в это поле.

Required

<input type="text" name="username" id="username" required/>

Атрибут 'required' делает поле обязательным к заполнению и форма не может быть отправлена, пока требуемые данные не будут введены. И нет необходимости использовать JS.
Демонстрация

Я надеюсь, что в скором времени все эти поля получат поддержку современных браузеров и это значительно облегчит работу веб-мастеров при создании сложных форм!