Создание HTML форм

html5-form
HTML формы — сложные элементы интерфейса. Они включают в себя разные функциональные элементы: поля ввода <input> и <textarea>, списки <select>, подсказки и т.д. Весь код формы заключается в элемент <form>.

Большая часть информации веб-форм передаётся с помощью элемента <input>. Для ввода одной строки текста применяется элемент <input type="text">, для нескольких строк — элемент <textarea>. Элемент <select> создает выпадающий список.

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

Поля формы можно разделять на логические блоки с помощью элемента <fieldset>. Каждому разделу можно присвоить название с помощью элемента <legend>.

fieldset

Рис. 1. Группировка полей формы

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

Обязательные для заполнения поля также необходимо выделять. До появления HTML5 использовался символ звездочки *, установленный возле названия поля. В новой спецификации появился специальный атрибут required, который позволяет отметить обязательное поле на уровне разметки. Этот атрибут дает указание браузеру (при условии, что тот поддерживает HTML5), указание не отправлять данные после нажатия пользователем кнопки отправить, пока указанные поля не заполнены.

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

Ещё один полезный html5-атрибут — атрибут autofocus. Он позволяет автоматически установить фокус на нужном начальном поле для элементов <input> и <textarea> (только в один элемент каждой формы).

Пример создания формы регистрации

HTML разметка

Примечание
action="form.php" — ссылка на файл обработчика формы. Создайте файл в кодировке UTF-8, закачайте его на сервер и замените action="form.php" на путь к файлу на вашем сервере.

form-default

Рис. 2. Внешний вид формы по умолчанию

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

Файл form.php

Примечание
В переменной $subject укажите текст, который будет отображаться как заголовок письма;
Ваше_имя — здесь вы можете указать имя, которое будет отображаться в поле «от кого письмо» ;
url_вашего_сайта замените на адрес сайта с формой регистрации;
ваш_email замените на ваш адрес электронной почты;
$headers .= "Bcc: ваш_email". "\r\n"; отправляет скрытую копию на ваш адрес электронной почты.

See the Pen ORxGZq by Elena (@html5book) on CodePen.

  • Создание Сайтов

    Тоже интересный урок. Формы — это вообще редкость. Спасибо, Елена. Буду ждать новые уроки.

  • Влад Н

    Добрый день!
    А пример обработчика данной формы, с отправкой на почту пользователю и админу, можете предоставить?
    За ранее, благодарен за быстрый ответ.

  • Влад Н

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

    • Здравствуйте, Влад. Вы немного нетерпеливы. У меня есть и выходные дни, и рабочее и нерабочее время. Чуть позже добавлю простой пример обработчика формы с саму статью, так как дискус удаляет php-код из комментариев.

    • Всё готово, смотрите код.

  • В 12 строке «mail($email, $subject, $msg, $headers);» вместо $email — куда должен быть свой адрес приёма .

  • Виноват, Вы отправляете сообщение тому, кто зарегистрировался.

    • Я не стала подробно расписывать, так как php-код не является целью этого сайта. В 10 строчке вы указываете свой емайл, чтобы вам приходила скрытая копия письма. Строки 2-5 сохраняют в переменные данные, введённые в поля формы посетителем вашего сайта.