Формы в HTML5 (часть 1)
Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали о новых структурных элементах в HTML5. В данной статье я бы хотел рассказать, что нового принёс нам HTML5 при работе с формами. В первую очередь это проверка полей на соответствие некоторым условиям, без использования Javascript. Раньше мы все поля для ввода задавали тегом <input> с атрибутом type="text". Затем javascript’ом проверяли, чтобы поле было непустым, удовлетворяло определенным требованиями (например, e-mail пользователя). С приходом HTML5 вся эта процедура упростилась. Давайте начнём разбираться на примере. Давайте создадим форму и добавим тег <input> с новым атрибутом type="email" (данный атрибут не даст нам отправить форму, пока не будет введен корректный адрес электронной почты):
<!DOCTYPE html5> <html> <head> <title>Формы в HTML5</title> <meta charset="utf-8"/> </head> <body> <form name = "form1" action = "#" method = "post"> <input type = "email" name = "email" required /></p> <p><input type = "submit" name = "submit" value = "Отправить"/></p> </form> </body> </html>
В данном случае мы указали тип поля email, и по сути, пока мы не введем корректный адрес электронной почты, форма не должна отправляться. Яндекс — браузер выводит очень интересную подсказку, когда мы вводим какую-нибудь ерунду в данное поле. Я ввел "123" и попробовал отправить. Вылезло сообщение о том, что необходим символ "@"
Т.е. если я введу "@", то форма у нас должна отправится. Что собственно и произошло. Поэтому данным типом поля я не рекомендую пользоваться, если только не добавить в него ещё один атрибут — pattern.
Данный атрибут проверяет соответствие того, что мы ввели, тому что находится в pattern. Здесь необходимо знание регулярных выражений. Давайте сделаем, чтобы наша форма отправлялась только после того, как мы введем НОРМАЛЬНЫЙ адрес электронной почты, а не только строку, содержащую "@":
<p>Электронная почта: <input type = "email" name = "email" required pattern = "^\w+[\w-\.]*\@\w+((-\w+)|(\w*))\.[a-z]{2,3}$"/></p>
Если вы не знаете, что такое регулярные выражения, то не беда. В одной из следующих статей они будут рассмотрены.
Вот теперь у нас поле работает нормально.
Атрибут required нужен для того, чтобы нельзя было отправить пустое выражение (required — обязателен к заполнению).
Также появился атрибут type со значением tel, который позволяет ввести телефон:
Здесь же опять необходимо указывать pattern, чтобы данное поле работало нормально, ведь формат телефонов у всех же разный. К примеру вот такой формат:
<p>Телефон: <input type = "tel" name = "tel" pattern = "[0-3]{3}-[0-2]{2}-[0-2]{2}"/> Пример корректного номера 937-12-12</p>
Пока телефон не будет введен правильным способом, форма никуда не отправится. Также отмечу, что pattern можно использовать и в простых текстовых полях (type="text").
Ещё один новый атрибут type со значением url, который позволяет проверить действительно ли введен url. Пример:
<p>Url: <input type = "url" name = "url" required/></p>. В яндекс-браузере работает корректно.
Ещё один новый элемент — это ползунок, который задаётся атрибутом type со значением range.
<input type="range" min="1" max="100"/>
У данного элемента есть минимальное и максимальное значение, которые затем можно куда-то передавать. Сразу домашнее задание:
Создайте рядом с этим ползунком текстовое поле, в которое будет выводиться значение ползунка при его изменении.
Если возникнут трудности, то код можно посмотреть ниже:
<!DOCTYPE html5>
<html>
<head>
<title>Работа с ползунком в HTML5</title>
<meta charset="utf-8"/>
</head>
<body>
<form name = "form1" action = "#" method = "post">
<p><input id="myrange" type="range" min="1" max="100"/> | <input type = "text" id="mytext" value = "5" /></p>
<script>
var range = document.getElementById("myrange");
var text = document.getElementById("mytext");
range.addEventListener("change", function(){ //подписываем на событие change
text.value = range.value;
});
</script>
</form>
</body>
</html>
Следующий новый элемент — это number. Сразу приведу пример и всё станет понятно:
<p><input type = "number" min = "5" max = "100" step = "5"></p>
В данном случае мы можем выбрать элементы от 5 до 100 с шагом 5. Данный элемент далек от совершенства. Мало того, что он в разных браузерах выглядит по-разному, так в него можно вручную внести значение (некоторые браузеры это обрабатывают). Хотя мой браузер вполне нормально обработал данное поле (пользуюсь яндекс-браузером). Использовать его пока не рекомендую, если только не делать проверки на Javascript. Ещё одно домашнее задание (на этот раз кода не будет):
Сделайте проверку на Javascript, что введенное значение в данное поле должно было кратно 5 (использовать событие change).
Пока мы разобрали только один атрибут required. Но есть ещё и другие:
Атрибут autofocus служит для того, чтобы при переходе на данную страницу, фокус попал именно в данное поле.
Атрибут placeholder служит для подсказки. Как только вы что-то начнете вводить, подсказка исчезнет. Для примера:
<p>Электронная почта: <input type = "email" name = "email" required autofocus placeholder = "Введите e-mail..."/></p>
В данной статье вы узнали какие новые элементы по работе с формами появились в HTML5. Это была 1 часть статьи, в следующей статье мы рассмотрим другие элементы по работе с формами, подпишитесь, чтобы не пропустить.
На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.
