Формы. Часть 1

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

Например форма подписки: посетитель указывает свой email и нажимает кнопку «Отправить». Сервер получает эти данные и добавляет этот email в список рассылки.

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

Форма задаётся так:

<form action="адрес" method="post">
	поля ввода
</form>

Атрибут action содержит url-адрес, на который будут отправлены данные формы. Если оставить это поле пустым или вообще не указывать, то браузер отправит данные по этому же адресу. Выглядит странно, но очень часто именно так это и работает. Всё дело в том, что скрипт на сервере может понять была ли отправка данных и от этого выдаст разный результат.

Другой параметр method задаёт http-метод отправки. Есть два варианта: post и get. POST-запрос отправляет данные «скрытно», а GET-запрос будет передан как часть url-адреса. В общем это технические тонкости, о которых сейчас можно не задумываться. По умолчанию используется GET, но чаще применяется POST. Поэтому мы его и указываем в форме.

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

Котик
Автор котика: Ernie & Katy Newton La

Мы можем рассматривать FORM как отдельный блок и применить к нему любое оформление, как и при использовании DIV. Но чаще просто вкладывают в форму (или саму форму) отдельный обрамляющий div-блок и применяют оформление уже к нему.

Поля ввода

В HTML есть несколько разных способов ввести данные. Например кнопка — BUTTON. В свою очередь она может иметь несколько типов поведения. Например type="submit" сделает её «отправной» для формы, а type="reset" применяется для сброса введённых данных пользователем.

Самая распространённая группа полей делается с помощью тэга INPUT. У него очень много разных типов, которые позволяют не только по разному выглядеть, но и выполняют начальную проверку введённых данных.

Есть ещё поле выбора — совместные тэги SELECT и OPTION. Они формируют выпадающий список из доступных вариантов. Внутри этого списка можно сгруппировать пункты через тэг OPTGROUP.

Для ввода многострочного текста используется TEXTAREA. У него тоже есть свои атрибуты и особенности поведения.

«Сопутствующие» тэги

Кроме этого есть несколько тэгов, которые используются в формах или в полях ввода. Например есть FIELDSET, который формирует визуальные группы внутри формы. Тэг LABEL позволяет создать метку для любого поля ввода. В этом случае можно кликнуть на метку, а фокус перейдёт к её полю.

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

Например SELECT на Windows выглядит как обычное поле, которое раскрывается вниз по его клику. А на Android оно раскрывается на весь экран.

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

Так что на начальном этапе тебе нужно будет лишь понимать как работают поля ввода и как их можно изменить в небольших пределах. Более того, css-код для изменения полей достаточно сложный — в нём учитываются особенности поведения и применения в разных ситуациях.

Мы будем использовать готовые классы Berry CSS — они достаточно сложны. Но на будущее, когда ты освоишь азы вёрстки, обратись к исходному коду Berry, чтобы разобраться как устроены кнопки и поля ввода.

Пока же просто посмотрим какие поля мы можем использовать.

Кнопки

С кнопками мы уже знакомы, только это были ссылки. Классы button универсальные, поэтому можно использовать так:

<form method="post">
	<button class="button button1" type="submit">Отправить</button> 
</form>

При нажатии на кнопку Отправить, форма будет отправлена (потому что тип submit).

Настройка кнопок происходит через классы, либо css-переменные, о которых мы говорили раньше. Кнопки самый простой элемент формы.

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

Именно так в основном выглядят формы. Предлагают ввести какие-то данные.

<form method="post">
    <input class="form-input w100" type="text" placeholder="Введите своё имя" name="myname" required>
    <input class="form-input w100 mar10-t" type="email" placeholder="Введите свой email" name="myemail">
    <textarea class="form-input w100 mar10-t" name="mycomment" placeholder="Ваш комментарий"></textarea>
    <button class="button button1 mar20-t" type="submit">Отправить</button> 
</form>

Тэг INPUT универсальный (это одиночный тэг). Его поведение и вид зависит от type. Первое поле — обычный текст ( text). Второе — тип email — это значит, что браузер будет проверять в этом поле введённый текст для того, чтобы он соответствовал шаблону электронной почты.

Атрибут placeholder выводит подсказку в поле до тех пор, пока пользователь не стал что-то вводить.

Атрибут name особенный — он задаёт имя поля, которое потом будет отправлено на сервер. Как правило это уникальное имя в пределах формы. На практике name напрямую завязан на скрипт обработчика формы, но сейчас это не важно.

У полей ввода можно указывать самые обычные классы. Например мы разместили поля на всю ширину и добавили верхний отступ. Класс form-input достаточно сложный и через него определяется внешний вид.

Тэг TEXTAREA тоже имеет свои особенности, но в целом с ним можно работать как и с текстовым INPUT, разве что он имеет закрывающий тэг.

Атрибут required (это одиночный атрибут — «логический») делает поле обязательным для заполнения. Пока посетитель не заполнит это поле, браузер не позволит отправить форму.

Тэг LABEL

C помощью LABEL организуется перенос фокуса на с метки на поле ввода. В «стандартном» варианте он применяется так:

 
<label for="myEmail">Ваш email</label>
<input id="myEmail" type="email" name="form-email">

Кликни на текст «Ваш email» — фокус переместился на поле ввода. Связующим между этими тэгами будет атрибут id — это идентификатор элемента и он должен быть уникальным на странице. В LABEL он указывается в атрибуте for. Поэтому по сути LABEL может располагаться вообще где угодно, но клик и фокус попадает на его поле ввода.

Использование через id не очень удобно, но есть другой способ — обернуть в LABEL поле ввода. Причём без разницы как именно будет выполнено оформление, главное, чтобы внутри LABEL было только одно поле ввода.

<label>Ваш email <input id="myEmail" type="email" name="form-email"></label>

Действовать будет аналогично, только разметка несколько проще и не нужно придумывать id.

Оформление форм

Формы настраиваются точно также как и любые другие блоки. Для группировки полей используется flex-сетка. Я покажу тебе пример для изучения.

<form method="post">
    <label class="flex flex-vcenter flex-wrap-phone">
        <div class="w2col w100-phone">Имя</div>
        <div class="w10col w100-phone">
            <input class="form-input w100" type="text" placeholder="Введите своё имя" name="myname" required>
        </div>
    </label>

    <label class="mar10-t flex flex-vcenter flex-wrap-phone">
        <div class="w2col w100-phone">Email </div>
        <div class="w10col w100-phone">
            <input class="form-input w100" type="email" placeholder="Введите свой email" name="myemail">
        </div>
    </label>

    <label class="mar10-t flex flex-wrap-phone">
        <div class="w2col w100-phone pad10-t">Комментарий</div>
        <div class="w10col w100-phone">
            <textarea class="form-input w100" name="mycomment" placeholder="Ваш комментарий"></textarea>
        </div>
    </label>

    <div class="mar20-t t-right"><button class="button button1" type="submit">Отправить</button></div>
</form>

В этом коде тебе должно быть всё знакомо. Каждое поле ввода сделано через flex-сетку, где основной контейнер LABEL.

Задания

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

2. Посмотри как ведут и отображаются поля ввода без класса form-input — это отображение по умолчанию браузера.

3. Посмотри и проверь на тестовой форме с INPUT разные type developer.mozilla.org. Не нужно все их изучать, просто ознакомиться с ними. Не все из них будут менять поведение, поскольку это зависит от поддержки браузером.