От первого html тега, до SEO оптимизации порталов
Украина
+380 63 85 62 538

HTML5 и веб формы

Веб формы в html5

HTML5 и веб формы

Сегодня поговорим о новых свойствах и возможностях веб форм в языке разметке HTML5. Посмотрим, как можно их видоизменять и чего нового появилось со времен html4 и css2.

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

Простая форма на html

Если для вас теги и атрибуты ф этом примере ничего не говорят, тогда смотрим первую часть по построению веб форм. Но для пущей красоты мы еще и стили подключим к этой форме:
Вот теперь смело приступаем к нововведениям. Первое, что я хочу рассмотреть, это дополнительный атрибут в placeholder, что это такое? Думаю вы видели формы в которых поле для введения информации показывает сероватую подсказку, при клике на поле она исчезает, так вот эту самую подсказку мы можем смело прописать в значение атрибута.

С примера в html вы можете заметить данный атрибут в поле ввода имени и телефона, попробуйте в сменить значение (подсказку) на свою, ощутите, как все просто поддается правке.

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

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

Давайте в стили добавим значение для этого псевдокласса:

А теперь попробуйте активировать поле ввода, заметили фон? Вот то-то и оно ))

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

Я это применю в поле с именем:

Вы уже догадались, что это атрибут autofocus? Кстати у него нет привычной нам записи атрибутов с =»», а просто имя, потому, что имя атрибута равно его значению и мы пишем это сокращенно.

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

 Проверка вводимой информации в веб форме

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

Итак предположим, что после с именем не может быть пустым, то есть имеет пометку *, что говорит о его 100% заполнении. Устроить такую проверку можно при помощи специального атрибута required. Давайте добавим этот атрибут в поле имени и телефона и попробуем не вводя данные нажать отправить.

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

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

Вот таким простым атрибутом мы снимем все проверки.

Еще стоит упомянуть об псевдоклассах позволяющих изменить внешний вид поля в зависимости от результатов их валидации. К примеру, если поле с неправильной информацией можно ему сменить фон или бордер (границу).

Это делается при помощи простых псевдоклассов:

После написания этого правила, поля будут иметь красную границу в один пиксель, пока не получат нужную информацию.

Новые типы ввода в HTML5

Ели браузеру встречается неизвестный тип элемента <input>, веб-обозреватель рассматривает его как обычное текстовое поле. Это означает, что следующие три элемента обрабатываются абсолютно одинаково всеми браузерами:

В HTML5 из этого поведения извлекается польза. А именно, в элемент <input> было добавлено несколько новых типов, и если какой-либо браузер не поддерживает их, он будет обрабатывать их как обычные текстовые поля. Например, для ввода адреса электронной почты можно создать поле <input> нового типа email:

Поддержка новых типов данных основными браузерами
Тип данных IE Firefox Chrome Safari Opera Safari iOS Android
email 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. СветланаСветлана10-13-2020

    Спасибо, очень подробно и доходчиво расписано! Разобралась во всем! Изучаю html и css уже почти год. Они совершенствуются, оптимизируются для простоты и удобства. Ручками создавать самостоятельно что-то — куда интереснее, особенно, когда уже готов результат, испытываешь невероятное чувство самореализации )))

  2. ВиталийВиталий10-16-2020

    Супер можно ставить готовый скрипт и не париться с бумажными html книгами)

  3. РоманРоман11-11-2020

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

  4. ГалинаГалина04-07-2020

    Сделала для себя открытие-ваш сайт. Как раз пытаюсь для себя разобраться. Очень все подробно описано и понятно, с примерами. Просто читай и пробуй!

  5. АндрейАндрей04-13-2020

    Что дает «Тип color — выбор и ввод цвета» все продумано в CSS зачем добавлять ID для цвета

Написать ответ

.