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

Продолжим изучать формы. У формы есть тэги FIELDSET и LEGEND, которые создают визуальное обрамление для формы.

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

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

Котик с unsplash.com

Тэг SELECT

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

<select class="form-input" name="sign">
	<optgroup label="Весна" class="bg-blue100">
		<option value="z1">Овен</option>
		<option value="z2">Телец</option>
		<option value="z3">Близнецы</option>
	 </optgroup>
	<optgroup label="Лето" class="bg-red100">
		<option value="z4">Рак</option>
		<option value="z5">Лев</option>
		<option value="z6">Дева</option>
	 </optgroup>
</select>

Каждый пункт формируется в виде тэга OPTION. Если пункты нужно сгруппировать (можно этого не делать), то используется тэг OPTGROUP. В нём можно использовать классы для оформления и название группы в виде атрибута label.

Не все css-свойства будут действовать внутри OPTGROUP и OPTION. Они позволяют изменять только часть своего дизайна.

Тэг SELECT, как и остальные поля ввода имеет атрибут name, а вот возможные значения указываются уже в OPTION в атрибуте value. Именно это значение получит обработчик формы после отправки.

Существует ещё один вариант вывода SELECT — в виде обычного списка. Для этого у него нужно указать атрибут multiple.

<select class="form-input" name="sign" multiple>
    <option value="z1">Овен</option>
    <option value="z2">Телец</option>
    <option value="z3">Близнецы</option>
    <option value="z4">Рак</option>
    <option value="z5">Лев</option>
    <option value="z6">Дева</option>
</select>

Здесь возможен множественный выбор пунктов мышкой и/или Shift/Ctrl. На самом деле такой вариант достаточно редко используется, но знать о нём тебе нужно.

Сам по себе SELECT очень сложно кастомизировать через css-код. Возможно из-за того, что он по разному выглядит в разных операционных системах: разработчики браузеров не спешат создавать себе сложности. С другой стороны их понять можно — во главе угла удобство для пользователей, поэтому этот тэг и адаптируется под разные ОС.

Чаще всего у SELECT хотят изменить выпадающую иконку справа и размеры внутреннего поля. Особая сложность возникает, когда нужно изменить цвет отдельных дизайн-элементов. Тут в ход идут разные хитрости вёрстки, включая и сложный JavaScript-код.

Я об этом рассказываю не с целью «запугать», а для того, чтобы ты понял, что элементы формы это не только внешний вид, но и поведение. Очень часто встречаются сайты, где дизайн форм так изменён в угоду красотам, что пользоваться ими очень сложно. Так делать не нужно. Удобство посетителя должно быть на первом месте.

Radio-кнопки

По умолчанию они выглядят так:

Овен Телец Близнецы

<label><input type="radio" name="sign" value="z1" checked> Овен</label> 
<label><input type="radio" name="sign" value="z2"> Телец</label> 
<label><input type="radio" name="sign" value="z3"> Близнецы</label>

То есть это один из типов INPUT — radio. Для того, чтобы связать кнопки в одну группу выбора, у них нужно указать одно значение name. Браузер автоматом определит эту связь и позволит пользователю выбрать только один элемент.

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

Вид radio-кнопок напрямую зависит от браузера и операционной системы. Изменить вид стандартными css-свойствами практически невозможно, ввиду этого используются различные приёмы. В Berry CSS для задания таких кнопок можно использовать такой код:

green yellow default

<label class="form-radio">
    <input type="radio" name="myradio" value="1">
    <span class="form-radio-icon bg-green300"></span> green
</label>

<label class="form-radio mar20-l">
    <input type="radio" name="myradio" value="2">
    <span class="form-radio-icon bg-yellow300"></span> yellow
</label>

<label class="form-radio mar20-l">
    <input type="radio" name="myradio" value="3">
    <span class="form-radio-icon"></span> default 
</label>

Здесь важно, чтобы INPUT шёл непосредственно перед SPAN, в котором и задаётся иконка «булечки».

Хитрость в том, что в реальности стандартная «булечка» здесь не показывается, а показывается только SPAN. Но за счёт того, что всё в блоке LABEL, то фокус и выбор элементов работает как нужно. Это всё делается на CSS.

Пока тебе не нужно усложнять свою вёрстку: используй либо стандартный вариант, либо делай как в Berry CSS.

Checkbox-кнопки

Очень похожи на radio-кнопки, только не требуют группировки. То есть каждый элемент работает сам по себе. Вот такой стандартный вид:

Овен Телец Близнецы

<label><input type="checkbox" name="sign" value="z1"> Овен</label> 
<label><input type="checkbox" name="sign" value="z2"> Телец</label> 
<label><input type="checkbox" name="sign" value="z3"> Близнецы</label>

Здесь опять же проблемы с кастомизацией, но в Berry CSS можно сделать так:

gray blue default

<label class="form-checkbox">
    <input type="checkbox">
    <span class="form-checkbox-icon bg-gray200"></span> gray
</label>

<label class="form-checkbox mar20-l">
    <input type="checkbox">
    <span class="form-checkbox-icon bg-blue200"></span> blue
</label>

<label class="form-checkbox mar20-l">
    <input type="checkbox">
    <span class="form-checkbox-icon"></span> default
</label>

Как это верстать

Поскольку radio/checkbox/select сложно настраивать, то при вёрстке всегда начинай со стандартного варианта. И лишь после того, как отладишь вывод всей формы, можешь заняться оформлением этих элементов.

В разных css-фреймворках используются разные подходы, да и внешний вид будет отличаться. Более того, во многих случаях приходится использовать JS-код, чтобы повторить поведение этих элементов. Но в любом случае внешний вид будет вторичен. Главное — корректное отображение элементов в разных браузерах. Так что если ты увидел красивое оформление с готовым html/css-кодом, убедись, что оно работает как нужно. Например очень часто упускают состояние, когда форма заполнена некорректно (псевдокласс :invalid). Такие задачи сложны не только для новичков, но и опытных веб-мастеров.

Задания

Добавь в предыдущие формы новые поля для radio/checkbox/select. Вначале сделай стандартный вариант, а потом на классах Berry CSS. Задание достаточно сложное для новичков, поэтому не переживай, если не получится.

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

Формы. Часть 3 →