Как размечать формы

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

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

Элемент form представляет собой контейнер для всех типов форм, также в него могут заключаться и блочные элементы, но в него нельзя заключить ещё один элемент form. У элемента form есть два обязательных атрибута. Атрибут action в качестве значения принимает URL-адрес по которому находится сценарий для обработки формы. Атрибут method в качестве значения принимает метод по которому данные будут переданы на сервер. Метода всего два, POST и GET. Если метод не указан, по умолчанию выставляется GET.

Рассмотрим подробнее каждый из методов. Метод POST ставится когда нужно передать конфиденциальную информацию, такую как пароли, номер банковской карты или загружать файлы на сервер. Эту информацию видит только сервер. Также при передаче большого колличества данных лучше использовать метод POST так как он не имеет ограничений на колличество символов. Метод GET ставится когда информация не конфиденциальная. Яркий пример тому поисковый запрос, после него выдаётся список результатов, которые мы можем просматривать.

Приведём пример, в котором данные будут обработаны сценарием obrabotka.php и переданы на сервер методом POST.

HTML Вывод

<form action="/obrabotka.php" method="post">

<ul>

<li> <label for="name">Имя</label>

<input type="text" name="name" id="name"> </li>

<li> <label for="surname">Фамилия</label>

<input type="text" name="surname" id="surname"> </li>

</ul>

<input type="submit" value="Отправить">

</form>

  • Имя
  • Фамилия


Рассмотрим атрибут name. Он очень важен, каждый элемент формы должен его содержать. При помощи атрибута name указывается имя переменной. Каждому элементу формы нужно указать имя переменной, чтобы приложение которое будет обрабатывать эту форму могло обратиться по этому имени к элементу формы.

Сведём в таблицу все элементы формы и посмотрим как они будут выглядеть на странице.

HTML Вывод Описание

<label>Имя <input type="text" name="name"</label>

Имя

Однострочное текстовое поле

<label>Оставьте свой комментарий <textarea name="comment" rows="3" cols="30"></textarea></label>

Оставьте свой комментарий

Элемент textarea — это многострочное текстовое поле

row — этот атрибут задаёт колличество строк поля

cols — этот атрибут определяет ширину поля по колличеству символов

<label>Пароль <input type="password" name="pass"></label> Пароль Поле ввода пароля
<label>Поиск <input type="search" name="srch"></label> Поиск Поле поиска
<label>Email <input type="email" name="mail"></label> Email Поле ввода адреса электронной почты
<label>Телефон <input type="tel" name="phone"></label> Телефон Поле ввода телефона
<label>Сайт <input type="url" name="site"></label> Сайт Поле ввода адреса сайта
<label>Отправить <input type="submit" name="send"></label> Отправить Отправка формы на сервер
<label>Сброс <input type="reset" name="res"></label> Сброс Сбросить значения элементов формы
<label>Кнопка с изображением <input type="image" name="sub" src="url-путь к изображению"></label> Кнопка с изображением На кнопке отправки данных появляется изображение
<label>Кнопка <input type="button" value="Познакомиться"></label> Кнопка Этой кнопке можно присвоить любое действие при помощи JavaScript

<p>Ваше вероисповедание</p>

<ul>

<li><input type="radio" name="religion" value="christ" checked="checked">Христианство</li>

<li><input type="radio" name="religion" value="islam">Ислам</li>

<li><input type="radio" name="religion" value="Buddhism">Буддизм</li>

</ul>

Ваше вероисповедание

  • Христианство
  • Ислам
  • Буддизм
Переключатель. Можно выбрать только один вариант. Это достигается благодаря обязательному атрибуту name, в его значении нужно указать имя, которое будет использоваться во всех элементах переключателя. Атрибут checked со значением checked устанавливает переключатель в позицию по умолчанию.

<p>Ваш любимый цвет</p>

<ul>

<li><input type="checkbox" name="color" checked="checked">Зелёный</li>

<li><input type="checkbox" name="color" checked="checked">Желтый</li>

<li><input type="checkbox" name="color" >Красный</li>

</ul>

Ваш любимый цвет

  • Зелёный
  • Желтый
  • Красный
Флажки. В отличие от переключателей, позволяют установить несколько значений. Атрибут name обязателен и его значение одинаково для каждого элемента. Атрибут checked со значением checked может устанавливаться для любого колличества элементов.

<p>Ваш любимое блюдо

<select name="dish">

<option>Оливье</option>

<option selected="selected">Жаркое</option>

<option>Рагу</option>

<optgroup label="Другое">

<option>Борщ</option>

<option>Щи</option>

</optgroup>

</select>

</p>

Ваш любимое блюдо

Элемент select представляет собой список.

Элемент option — это пункт списка.

Элемент optgroup — это группа пунктов списка.

Атрибут selected задаёт пункт по умолчанию.

<label>Загрузите файл <input type="file" name="file" size="30"></label> Загрузите файл

Поле выбора файла.

Атрибут size задаёт ширину поля в колличестве символов.

<input type="hidden" name="hidden_element"> Скрытый элемент формы.
<input type="date" name="date"> Выбор даты.
<input type="time" name="time"> Выбор времени.
<input type="datetime-local" name="datetime-local"> Выбор даты и времени без учета часового пояса.
<input type="month" name="month"> Выбор месяца года.
<input type="week" name="week"> Выбор определённой недели в году.
<label>Укажите колличество мест <input type="number" name="places"></label> Укажите колличество мест

Поле регулирования чисел

<label>Укажите уровень громкости <input type="range" name="volume"></label> Укажите уровень громкости

Ползунковый регулятор

<label>Выберите цвет <input type="color" name="color"></label> Выберите цвет Поле выбора цвета

Рассмотрим элементы которые применяются для описания и группировки элементов форм.

Элемент fieldset группирует элементы формы, а элемент legend задаёт описание элементов группы. В элемент label заключается описание элемента формы.

HTML Вывод

<fieldset>

<legend>Контактные данные</legend>

<ul>

<li><label>Телефон <input type="tel"></label></li>

<li><label>Email <input type="email"></label></li>

</ul>

</fieldset>

Контактные данные

  • Телефон
  • Email
Поделиться