Вы находитесь на странице: 1из 7

Тема #3: Веб формы.

Форматирование
полей. Валидация формы.

1. Знакомство с веб формами.


2. Форматирование полей веб формы.
3. Валидация веб форм.

1
Знакомство с веб формами.

Пользователю иногда требуется обеспечить собственные поля


ввода. Эти виды взаимодействия включают в себя:
• регистрацию и вход на сайтах;
• ввод личной информации (имя, адрес, данные кредитной
карты и др.);
• фильтрацию контента (с помощью выпадающих списков,
флажков и др.);
• выполнение поиска;
• загрузку файлов.

2
Чтобы приспособиться к этим потребностям, HTML предлагает
интерактивные элементы управления формы:
• текстовые поля (input, textarea);
• переключатели (toggle switch, radio button);
• флажки (checkbox);
• выпадающие списки (dropdown, select);
• виджеты для загрузки (file drop area, file input);
• кнопки отправки (submit button).
Эти элементы управления задействуют разные теги HTML, но
большинство из них использует тег <input>.
Поскольку это самозакрывающий элемент, тип поля определяется
его атрибутом type:

3
Элемент <form>
<form> является блочным элементом, который определяет
интерактивную часть веб-страницы. Как результат, все элементы
управления (такие как <input>, <textarea> или <button>) должны
находиться внутри элемента <form>.

В браузере это будет выглядить таким образом:

Два атрибута HTML необходимы:


• action - содержит адрес, который определяет, куда будет
отправлена информация формы.
• method - может быть либо GET, либо POST и определяет, как
будет отправлена информация формы. Эти два метода
отправки мы разберём в отдельном уроке и узнаем в чём их
отличия.

4
Как правило, информация формы посылается на сервер. Как эти
данные затем будут обработаны выходит за рамки данного
руководства.
Текст <input type="text"> Допускает любой тип
символов
Емейл <input type="email"> Может показывать
предупреждение, если
введён неверный email
Пароль <input Символы
type="password"> показываются как
звёздочки
Число <input type="number"> Могут быть
использованы клавиши
вверх/вниз
Телефон <input type="tel"> Может сработать
автозаполнение
Дата\Число <input type=”date”> Можно вводить дату в
правильном формате
Многострочный текст <textarea></textarea> Может быть изменён
размер поля

Хотя эти поля очень похожи и позволяют пользователям вводить


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

5
Placeholder
Текстовые поля могут отображать подсказывающий текст,
который исчезнет, как только будет введён некоторый текст.

Если вы начинаете набирать что-то, то увидите как текст «Введите


своё имя» исчезнет.
Label
Так как элементы формы сами по себе не очень описательны, им,
как правило, предшествует текстовая метка, то есть label

В то время как placeholder уже обеспечивает некоторую


подсказку о том, какое ожидается содержание, метки имеют
преимущество оставаясь видимыми всегда.
<label> также может быть связан с определённым элементом
формы с помощью атрибута for, соответствующему значению id у
поля.

6
Форматирование полей формы
Самый простой путь валидации — это определить тип input поля
и расставить атрибуты required которые отвечают за
обязательность заполнения.

Отдельно хотелось бы сказать про тип поля tel. Ожидается что


браузер будет валидировать телефонные номера, но нет, поле с
типом tel используется сейчас только для автозаполнения.
Дело в том, что валидация телефонных номеров очень
неоднозначная задача из-за слишком большого количества
различных форматов телефонных номеров в разных странах,
которые просто никак не получится унифицировать и записать в
одно правило.
Однако, нам на помощь приходит атрибут pattern. Этот атрибут
принимает в себя значение регулярного выражения.

Поддержка браузерами атрибута pattern на данный момент очень


хорошая.
Так-же формы можно подсвечивать красным цветом если были
введены неправильные данные, но это будет в темах по CSS.
7

Вам также может понравиться