HTML5 и веб формы
Сегодня поговорим о новых свойствах и возможностях веб форм в языке разметке HTML5. Посмотрим, как можно их видоизменять и чего нового появилось со времен html4 и css2.
Чтобы нам было проще я даю вам заготовку простой веб формы к которой мы начнем применять уже нововведения:
Простая форма на html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>Веб формы</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <form action="#"> <p><i>Пожалуйста, заполните форму. Обязательные поля помечены </i><em>*</em></p> <fieldset> <legend>Контактная информация</legend> <label for="name">Имя <em>*</em></label> <input id="name" placeholder="Иван Иванов"><br> <!-- placeholder подсказка для человека --> <label for="telephone">Телефон</label> <input id="telephone" placeholder="+3 (xxx) xxx-xxxx"><br> <label for="email">Email <em>*</em></label> <input id="email"><br> </fieldset> <fieldset> <legend>Персональная информация</legend> <label for="age">Возраст<em>*</em></label> <input id="age"><br> <label for="gender">Пол</label> <select id="gender"> <option value="female">Женщина</option> <option value="male">Мужчина</option> </select><br> <label for="comments">Перечислите личные качества</label> <textarea id="comments"></textarea> </fieldset> <fieldset> <legend>Выберите сферы ваших знаний</legend> <label for="zebra"><input id="zebra" type="checkbox"> Верстка</label> <label for="cat"><input id="cat" type="checkbox"> Javascript</label> <label for="anaconda"><input id="anaconda" type="checkbox"> PHP</label> <label for="human"><input id="human" type="checkbox"> jQuery</label> <label for="elephant"><input id="elephant" type="checkbox"> Ajax</label> <label for="wildebeest"><input id="wildebeest" type="checkbox"> Pyton</label> <label for="pigeon"><input id="pigeon" type="checkbox"> SQL</label> <label for="crab"><input id="crab" type="checkbox"> Design</label> </fieldset> <p><input type="submit" value="Отправить информацию"></p> </form> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
body { font-family: 'Palatino Linotype', serif; max-width: 600px; padding: 0px 30px; } h1 { margin-bottom: 0px; } p { margin-top: 0px; } fieldset { margin-bottom: 15px; padding: 10px; } legend { padding: 0px 3px; font-weight: bold; font-variant: small-caps; } label { width: 110px; display: inline-block; vertical-align: top; margin: 6px; } em { font-weight: bold; font-style: normal; color: #f00; } input, textarea { width: 249px; } textarea { height: 100px; } select { width: 254px; } input[type=checkbox] { width: 10px; } input[type=submit] { width: 170px; padding: 10px; } |
С примера в html вы можете заметить данный атрибут в поле ввода имени и телефона, попробуйте в сменить значение (подсказку) на свою, ощутите, как все просто поддается правке.
Сейчас к сожалению нет возможности влиять на цвет, размер и поведение этих подсказок, но очень надеюсь, что в будущем разработчики браузеров привнесут такие возможности в свои детища.
Но есть и хорошая новость, псевдокласс фокус, подробнее о псевдоклассах здесь, обеспечивает лучшую поддержку и при его помощи можно изменять внешний вид текстового поля при активации поля для ввода.
Давайте в стили добавим значение для этого псевдокласса:
1 2 3 |
input:focus { background: #996; } |
А теперь попробуйте активировать поле ввода, заметили фон? Вот то-то и оно ))
Итак веб формы предназначены для ввода информации или ее подтверждении, и чтобы что-то начать вводить надо активировать фокус на том или ином элементе формы. Все мы по привычке делаем это мышью или нажатием TAB на клавиатуре, но в HTML5 есть атрибут позволяющий сделать фокусом по умолчанию любое, но одно поле со всей формы.
Я это применю в поле с именем:
1 |
<input id="name" placeholder="Иван Иванов" autofocus><br> |
Вы уже догадались, что это атрибут autofocus? Кстати у него нет привычной нам записи атрибутов с =»», а просто имя, потому, что имя атрибута равно его значению и мы пишем это сокращенно.
Еще раз подчеркиваю, применить это можно только к одному элементу текущей веб формы.
Проверка вводимой информации в веб форме
Очень долгое время для контроля вводимой информации, имени, почты или телефона использовали javascript и специальные библиотеки проверки вводимой информации, с приходом HTML5 это стало попросту не нужно, так как появились довольно таки простые и работающие решения.
Итак предположим, что после с именем не может быть пустым, то есть имеет пометку *, что говорит о его 100% заполнении. Устроить такую проверку можно при помощи специального атрибута required. Давайте добавим этот атрибут в поле имени и телефона и попробуем не вводя данные нажать отправить.
1 2 3 4 |
<label for="name">Имя <em>*</em></label> <input id="name" placeholder="Иван Иванов" autofocus required><br> <label for="telephone">Телефон</label> <input id="telephone" placeholder="+3 (xxx) xxx-xxxx" required><br> |
У вас не получится отправить форму, так как вы не ввели информацию. К сожалению само поле не станет другой формы или цвета, для этого и используются звездочки и пояснения о требовании обязательного ввода.
Но бывают обратные случаи, когда вам нужно скажем протестировать сервер на обработку неверных данных или ввода вредоносных строк кода через форму, в таком случае применяется атрибут в корне формы, то есть в открывающем теге form, который запрещает любые проверки. Вот собственно и пример:
1 |
<form action="#" novalidate> |
Вот таким простым атрибутом мы снимем все проверки.
Еще стоит упомянуть об псевдоклассах позволяющих изменить внешний вид поля в зависимости от результатов их валидации. К примеру, если поле с неправильной информацией можно ему сменить фон или бордер (границу).
Это делается при помощи простых псевдоклассов:
1 2 3 |
input:required:invalid { border:1px solid red; } |
После написания этого правила, поля будут иметь красную границу в один пиксель, пока не получат нужную информацию.
Новые типы ввода в HTML5
Ели браузеру встречается неизвестный тип элемента <input>, веб-обозреватель рассматривает его как обычное текстовое поле. Это означает, что следующие три элемента обрабатываются абсолютно одинаково всеми браузерами:
1 2 3 |
<input type="text"> <input type="странный-тип-input"> <input> |
В HTML5 из этого поведения извлекается польза. А именно, в элемент <input> было добавлено несколько новых типов, и если какой-либо браузер не поддерживает их, он будет обрабатывать их как обычные текстовые поля. Например, для ввода адреса электронной почты можно создать поле <input> нового типа email:
1 |
<input id="email" type="email"><br> |
Тип данных | IE | Firefox | Chrome | Safari | Opera | Safari iOS | Android |
— | 4 | 10 | 5 | 10.6 | — | — | |
url | — | 4 | 10 | 5 | 10.6 | — | — |
search (без проверки) | |||||||
tel (без проверки) | |||||||
number | — | — | 10 | 5 | — | — | — |
range | — | — | 6 | 5 | 11 | — | — |
datetime, date, month, week, time | — | — | 10 | — | 11 | — | — |
color | — | — | — | — | 11 | — | — |
В таблице выше приведены примеры новых типов данных, с которыми можно работать в HTML5 и таблица поддержки браузерами.
- Тип email — Адреса электронной почты
- Тип url — применяется для полей ввода URL-адресов
- Тип search — применяется для полей поиска
- Тип данных tel — применяется с целью обозначения полей для ввода телефонных номеров
- Тип number — предназначен для обычных чисел
- Тип range — числовой тип в виде ползунка
- Тип date — ввод даты
- Тип color — выбор и ввод цвета
Для числовых значений можно применять дополнительные атрибуты min и max, давайте взглянем на примере:
1 2 3 4 5 |
<label for="age">Возраст<em>*</em></label> <input id="age" type="number" min="18" max="120"><br> <!-- или вот так --> <label for="age">Возраст<em>*</em></label> <input id="age" type="range" min="0" max="120" value="30"><br> |
На этом я буду прощаться с вами дорогие читатели, надеюсь вы взяли для себя немного полезной информации. До скорого.
Спасибо, очень подробно и доходчиво расписано! Разобралась во всем! Изучаю html и css уже почти год. Они совершенствуются, оптимизируются для простоты и удобства. Ручками создавать самостоятельно что-то — куда интереснее, особенно, когда уже готов результат, испытываешь невероятное чувство самореализации )))
Супер можно ставить готовый скрипт и не париться с бумажными html книгами)
Стандарты постоянно обновляются. Вот и HTML5 становится обыденным и привычным в верстке. Реализация проверки полей, а точнее ее упрощение мне понравилось. Интересно, есть ли статистика по доле устройств, браузеры которых поддерживают последний стандарт html?
Сделала для себя открытие-ваш сайт. Как раз пытаюсь для себя разобраться. Очень все подробно описано и понятно, с примерами. Просто читай и пробуй!
Что дает «Тип color — выбор и ввод цвета» все продумано в CSS зачем добавлять ID для цвета