Формы

Формы есть на всех сайтах, которые предоставляют возможность поиска по сайту или имеют страницу (блок) "Контакты". Создаются формы с помощью тега <form> и ряда тегов <input>, которые имеют разный атрибут type, и в зависимости от него отвечают за разные поля ввода или другие элементы (радиокнопки, флажки).

Рассмотрим, как формируются поля форм и как можно использовать плагин Emmet для ускорения набора кода форм в вашем редакторе кода.

Тег form

Итак, основной тег <form> - является блочным (имеет свойство display: block). Закрывающий тег обязателен. Размещать внутри тега <form> можно любые другие html-теги, которые, как правило, служат для форматирования полей формы и их  заголовков.

Основными атрибутами являются action="путь к php-файлу" и method="get|post":

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

Метод get или post определяет, каким образом будут отправлены данные. Метод GET (get) отправляет данные, записывая их в адресной строке браузера. Длина такой строки невелика, поэтому большие сообщения или изображение таким способом отправить не удастся. Метод POST (post) отправляет данные скрытым способом + позволяет передать достаточно весомые данные (сообщение, изображение, zip-архив). Размер передаваемой информации зависит от настроек сервера. Обычно это от 2 до 16 Мб.

Текстовые поля и их разновидности

Вы наверняка сталкивались с заполнением полей с подписью Имя (Логин), Email, Пароль и, возможно загружали что-либо с помощью кнопки "Обзор" в текстовом поле. Все они формируются с помощью тега <input>. Рассмотрим для них аббревиатуры Emmet:

Среди перечисленных полей большинство относится к спецификации HTML4. HTML5 ввел такие поля, как search, url, email соответственно для полей, предназначенных для поиска информации, ввода адреса сайта или email-a.

Внутри этих полей реализована проверка правильности ввода, например, соответствие email-адреса общепринятому, т.е. наличие символа @, например. Если вы введете неверный email или url, браузер подсветит это поле красным (как правило) и при нажатии на кнопку отправки формы попросит вас корректно ввести адрес почты или адрес сайта, который начинается с http://.

Желательно еще добавлять в  поле атрибут required, т.е. обязательный, для того чтобы это поле было заполнено пользователем.

Теги кнопок

Кнопки, как правило, завершают любую форму. Добавляются в форму с помощью тега <input>. Они бывают нескольких типов (атрибут type):

• submit - отправляет форму на сервер. Пожалуй, главная кнопка в форме.
• reset - очищает поля формы до значений по умолчанию. Сейчас используется все реже и реже.
• button - обычная кнопка, с которой, как правило, связан код на JavaScript.
• image - аналог кнопки submit, но с атрибутом src="путь к файлу изображения", который позволяет указать картинку, которая будет заменять кнопку. Был очень актуален до CSS3, т.к. позволял сделать кнопку-изображение с закругленными краями и градиентом. Сейчас используется редко, т.к. возможности CSS3 уже позволяют сделать очень многое с помощью правил форматирования.

Также вы можете использовать тег <button>, который в обычном виде является аналогом тега <input type="button">, но может также иметь свой атрибут type="submit" | "reset" | "image", соответствующие аналогичным в теге <input>.

Рассмотрим применение Emmet для вставки тегов кнопок:

Флажки (checkboxes)

Предназначены для множественного выбора элементов. Например, в форме необходимо отметить, какие языки вы знаете из перечисленных.

Для оформления флажков часто используются теги label. Поскольку элемент типа checkbox  также является одним из вариантов тега input, то текст, который размещен рядом с флажком, как бы к нему не относится. А тег label позволяет указать принадлежность текста инпуту - для этого в label записывается атрибут for cо значением в виде id соответствующего <input type="checkbox">. С одной стороны, тег label при клике на тексте позволяет выделить соответствующий флажок, с другой - label помогают в форматировании внешнего вида текста. Для них часто задают margin, padding, font-family, color и др. css-свойства.

Обратите внимание, как в разметке использованы теги input и label, а также на css-правила для label в тегах <style>:

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

Emmet аббревиатуры для checkbox и label:

Для оформления checkbox-ов существует довольно много рецептов и плагинов. Большая часть из них собрана в этой статье, но также вы можете посмотреть примеры оформления флажков с ресурса codepen.io.

Переключатели или радио-кнопки (radio)

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

Отличие переключателей от флажков заключается не только во внешнем виде.

Для того чтобы организовать единичный выбор из множества вариантов, у группы переключателей должно быть одно и то же имя, т.е. атрибут name одинаков для всех radio-кнопок данного блока:

Обратите внимание, что у всех <input type="radio"> атрибут name="job", а вот id разные, т.к. они связаны с тегом label.

Emmet аббревиатуры для radio:

Кстати, предыдущий пример можно полностью оформить в виде тегов с помощью аббревиатуры Emmet. Придется только текст в label дописать:

Скопируйте аббревиатуру и нажмите клавишу Tab или Enter в самом конце (без пробела), чтобы ее раскрыть.

Пример оформления радио-кнопок с анимацией при переключении:

See the Pen Jelly Radio Button by Tommaso Poletti (@tomma5o) on CodePen.18892

Другие примеры стилизации радио-кнопок вы найдете в статье "Стилизация переключателей (радио-кнопок) в CSS".