Тридцатый третий урок. Начальные сведения о формах

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

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

Основное назначение форм — предоставить постетителю возможность указать данные для отправки. Например форма подписки: посетитель указывает свой email и нажимает кнопку «Отправить». Сервер получает эти данные и добавляет этот email в список рассылки. Или, скажем, функция «Обратный звонок». Посетитель указывает своё имя и номер телефона, отправляет эти данные, а сервер отправляет на ваш email эти данные. Вы перезваниваете.

В общих чертах форма работает так:

Обработка формы обычно выполняется на вашем же сервере с помощью php-скриптов. Пока будем рассматривать его как «черный ящик». Отправка может быть и на другие сервера. Например форму подписки может предоставить какой-то сторонний сервис: вы получаете готовый html-код, который нужно разместить на своём сайте, а всю обработку полученных данных берет на себя уже сервис.

Любая форма — потенциальный источник проблем безопасности сервера. Ведь данные от формы напрямую попадают на сервер и если php-обработчик не достаточно надежно их отфильтровал, то как минимум это может привести к ошибкам в программе, или, даже взлому сайта. Например вместо адреса email, посетитель укажет sql-код запроса к базе и php-код его напрямую выполнит...

Имено по этой причине, все данные от посетителей многократно проверяются. В первую очередь — на уровене самого браузера. К счастью в HTML5 были добавлены новые атрибуты упрощающие эту задачу. Второй «эшелон» защиты — использование проверки на уровне JS-скриптов. Хотя сейчас, при использовании HTML5, это уже не так актуально, но всё ещё часто встречается.

Последний этап проверки осуществляется в php-скрипте. Если поле должно содержать только email, то скрипт проверяет данные, чтобы они соответствовали шаблону электропочты. Или проверяется текст сообщения на вхождение подозрительного кода: html, js или php-код автоматом очищается. Если в процессе проверки выявляется подозрительный код, то скрипт прекращает выполнение и сообщает об ошибке.

Технические детали пока вам не нужны (они довольно сложны), но вы должны представлять себе как обстоит дело в реальности.

Перейдём теперь непосредственно к формам.

Любая форма обрамляется тэгом FORM. Это контейнер в котором размещаются все элементы, данные которых будут отправлены на сервер.

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

Элементами формы могут быть поля ввода (INPUT, TEXTAREA), выпадающий список (SELECT), радиогруппы, чекбоксы, кнопки (BUTTON) и т.д.

Тэг INPUT универсальный: с его помощью можно создать разные варианты полей с помощью атрибута type. Их довольно много, поэтому я адресую вас к справочнику по этому вопросу. Обратите внимание, что мы можем использовать типы HTML5. В новых версиях браузеров постоянно добавляются новые варианты, например такие экзотические как color, который прекрасно работает в новых версиях FireFox и Chrome.

Более подробно INPUT мы рассмотрим в следующм уроке.

У самой формы задается два основных атрибута: action, который указывает на какой адрес будет отправлена форма и method — метод отправки данных (post или get). Когда адрес отправки не указан, то данные будут отправлены по текущему адресу страницы (это нормально, поскольку для её формирования используется PHP, который может отследить такую отправку).

<form action="" method="post">
	<input type="text" name="fio"> <button type="submit">Отправить</button>
</form>

Каждое отправляемое поле должно иметь атрибут name, иначе php-обработчик не сможет его корректно определить.

Метод POST отправляет данные «скрытно» в теле http-запроса. Метод GET — это отправка данных через url-запрос. Попробуйте нажать на эту кнопку:

Обратите внимание на адрес в браузере — добавилось ?fio= с введенными данными. Из-за этой особенности, get-запросы стараются редко использовать на сайте.

Для того, чтобы при отправке формы открылась новая вкладка браузера, добавьте у формы target="_blank".

Названия полей, адрес и метод отправки зависят от php-обработчика. Обычно эти данные вы будете получать от своего программиста или в виде документации используемого сервиса. То есть не имеет значения как будет оформлена форма и какой у неё дизайн — данные полей и адрес будут строго фиксированными.

Сама по себе вёрстка формы производится как и любых других html-элементов страницы. Обычно каждое поле сопровождается описанием, которое должно быть определенным образом выровнено относительно самого поля. Раньше для этого использовали таблицы (TABLE), но сейчас идет переход на flex-сетку с поддержкой адаптивности. Вопросы верстки мы рассмотрим в следующих уроках.

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

<form method="post">
	<fieldset>
		<legend>Ваши данные</legend>
		<p>Имя: <input type="text" name="name"></p>
		<p>Фамилия: <input type="text" name="fam"></p>
		<button type="submit">Отправить</button>
	</fieldset>
</form>
Ваши данные

Имя:

Фамилия:

Использование FIELDSET и LEGEND не является обязательным для формы, поэтому часто опускается.

Тэг LABEL используется с полями формы и предназначен для перемещения фокуса на элемент ввода.

<form method="post">
	<fieldset>
		<legend>Ваши данные</legend>
		<p><label>Имя: <input type="text" name="name"></label></p>
		<p><label>Фамилия: <input type="text" name="fam"></label></p>
		<button type="submit">Отправить</button>
	</fieldset>
</form>
Ваши данные

В этом примере, если кликнуть на «Имя» или «Фамилия» фокус ввода автоматом переместится на текстовое поле. Здесь тэг LABEL обрамляет собой и поле ввода, и текст метки. Но часто встречается задача, когда невозможно разместить метку и поле ввода в одном html-блоке, поэтому у LABEL можно указать к какому конкретно полю оно относится. Для этого используется атрибут for, указывающий ID элемента ввода.

<form method="post">
	<fieldset>
		<legend>Ваши данные</legend>
		<p><label for="f1">Имя</label> <label for="f2">Фамилия</label></p>
		<p><input type="text" name="name" id="f1"> <input type="text" name="fam" id="f2"></p>
		<button type="submit">Отправить</button>
	</fieldset>
</form>
Ваши данные

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

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

<form method="post">
	<fieldset>
		<legend>Укажите свои данные</legend>
		<p><input type="text" name="name" placeholder="Ваше имя">
		<input type="text" name="fam" placeholder="Ваша фамилия"> 
		<button type="submit">Отправить</button></p>
	</fieldset>
</form>
Укажите свои данные

  

Во многих случаях placeholder позволяет по дизайну полностью отказаться от LABEL и уменьшить число html-элементов формы.

У многих полей может быть атрибут value, который задаёт текущее значение элемента. Его часто используют там, где нужно подставить какое-то значение по умолчанию.

<form method="post">
	<fieldset>
		<legend>Укажите свои данные</legend>
		<p><input type="text" name="name" placeholder="Ваше имя" value="Вася">
		 <input type="text" name="fam" placeholder="Ваша фамилия" value="Васечкин">
		 <button type="submit">Отправить</button></p>
	</fieldset>
</form>
Укажите свои данные

  

Некоторые поля могут быть обязательными для заполнения. Раньше для этого приходилось использовать js-скрипты, которые перед отправкой формы проверяли заполнение поля и если оно пустое, выводили сообщение об ошибке. Теперь же, благодаря HTML5 и новым браузерам, такие вещи делаются элементарно с помощью атрибута required (можно без значения). То поле, которое отмечено как required будет обязательным для заполнения и браузер не позволит отправить форму, пока оно не будет заполнено. Браузер такое поле визуально выделит и высветит подсказку.

<form method="post">
	<p><input type="text" name="name" placeholder="Ваше имя" required>
	<input type="text" name="fam" placeholder="Ваша фамилия" required>
	<button type="submit">Отправить</button></p>
</form>

  

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

<textarea name="text">Какой-то текст.</textarea>

У TEXTAREA есть специфичные атрибуты rows и cols, которые задают количество строк и символов в строке:

<textarea name="text" name="text" rows="7" cols="50">Какой-то текст.</textarea>

C точки зрения верстки, в основном используется только rows, который автоматически подбирает высоту TEXTAREA. Для ширины проще воспользовать привычными css-свойством width.

<textarea class="w100" name="text" name="text" rows="3">Какой-то текст.</textarea>

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

Сам SELECT выступает контейнером для каждого элемента выбора (OPTION).

<select name="sign">
	<option>Овен</option>
	<option>Телец</option>
	<option>Близнецы</option>
</select>

Если добавить multiple, то вид списка меняется.

<select name="sign" multiple>
	<option>Овен</option>
	<option>Телец</option>
	<option>Близнецы</option>
</select>

Для того, чтобы отметить несколько элементов нужно их выбирать (мышью или клавиатурой) с помощью Shift и Ctrl, как это обычно принято во многих программах.

У каждого элемента выбора нужно задать его значение через атрибут value. Кроме того, можно элемент сделать неактивным, что не позволит его выбрать. Этот приём часто используется, чтобы разместить подсказку. Если же у списка нужно выбрать какой-то пукт по умолчанию, то используют selected (также можно без значения).

<select name="sign">
	<option disabled>Ваш знак</option>
	<option value="z1">Овен</option>
	<option value="z2" selected>Телец</option>
	<option value="z3">Близнецы</option>
</select>

Здесь следует отметить, что браузеры по разному реагируют на selected. Если выбрать любой пункт, а после обновить страницу, то браузер сохранит ваш выбор. Это может приводить к неопределенности, но к сожалению, сделать здесь что-то довольно сложно.

Элементы выбора можно группировать с помощью тэга OPTGROUP с атрибутом label. С помощью этого тэга можно визуально отформатировать элементы группы.

<select name="sign">
	<optgroup label="Весна" class="bg-blue300">
		<option value="z1">Овен</option>
		<option value="z2">Телец</option>
		<option value="z3">Близнецы</option>
	 </optgroup>
	<optgroup label="Лето" class="bg-green300">
		<option value="z4">Рак</option>
		<option value="z5">Лев</option>
		<option value="z6">Дева</option>
	 </optgroup>
</select>
Браузеры по разному подходят к оформлению OPTGROUP. Некоторые считают, что css-классы должны распространяться на всю группу, включая вложенные OPTION. Другие — только на сам элемент с label. При этом часть свойств может приняться (например цвет текста), а часть нет (например цвет фона).

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

Кнопки можно задать двумя способами. Первый — с помощью INPUT (с соответствующим type), и второй — специально предназначенный для этого тэг BUTTON. Мой совет — всегда использовать только BUTTON. Даже если вы встретите кнопку в виде INPUT, переверстайте её на BUTTON.

Атрибут type для кнопок может иметь значения

<form method="post">
	<fieldset>
		<legend>Укажите свои данные</legend>
		<p><input type="text" name="name" placeholder="Ваше имя">
		 <input type="text" name="fam" placeholder="Ваша фамилия"></p>
		
		<button type="submit">Отправить</button> 
		<button type="reset">Сброс</button> 
		<button type="button"><i class="i-check"></i> Просто кнопка</button>
	</fieldset>
</form>
Укажите свои данные

 

  

Тэг BUTTON — особый тэг, который позволяет обернуть собой какой-то другой, например изображения. То есть изображение будет работать как кнопка (можете это самостоятельно проверить).

Самый сложный, но и самый используемый тэг INPUT, мы рассмотрим на следующем уроке. Пока вы можете проверить все приведенные примеры на своей странице.

Для оправки формы можно не только использовать BUTTON (с типом submit), но и просто нажать клавишу Enter в любом текстовом поле формы. Так работают все формы и часто форма может состоять из одного поля ввода с подсказкой «После ввода нажмите Enter». Такой приём тоже часто используется.

Задание

Задания доступны только после авторизации.