Form - то, с чем мы сталкиваемся каждый день

[madhed]

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

Запись формы состоит из нескольких шагов, которые могут быть выполнены в любом порядке: запись пользовательского интерфейса, реализация серверной обработки, и конфигурирование пользовательского интерфейса, чтобы связаться с сервером.

Любая форма создается с тега form , внутри которого помещают средства управления формой. Большинство средств управления представляют из себя теги input, который по умолчанию выглядит как короткое текстовое поле. Для обозначения средств управления используется тег label. Текстовое описание и сами элементы идут внетри этого тега. Каждую часть формы считают абзацем и обычно разделяют тегом Р. Вот пример того, как можно спросить имя у пользователя:

 <p><label>Customer name: <input></label></p>

Чтобы позволить пользователю выбирать размер пиццы, мы можем использовать ряд переключателей. Переключатели также используют тег input, на сей раз с атрибутом type в значением radio. Чтобы заставить переключатели работать группой, им дают общее название, используя атрибут name. Чтобы объединить в группу пакет управления, такой как группа переключателей размера пиццы, можно использовать тег fieldset. Заголовок такой группе можно задать тегом legend .

 <p><label>Customer name: <input></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>

Чтобы выбрать начинку, мы можем использовать флажки. Они используют input элемент с type атрибута со значением checkbox :

 <p><label>Customer name: <input></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>

Пиццерии, для которых эта форма пишется всегда делает ошибки, поэтому нужен способ связаться с клиентом. Для этой цели, мы можем использовать элементы управления формы специально для телефонов ( input с элементами type атрибут установлен tel ), а также адреса электронной почты ( input с элементами type атрибут установлен email ):

 <p><label>Customer name: <input></label></p>
 <p><label>Telephone: <input type=tel></label></p>
 <p><label>E-mail address: <input type=email></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>

Мы можем использовать input элемент с type набора атрибутов time обратиться за время доставки. Многие из этих форм управления имеют атрибуты для управления именно то, что значения могут быть указаны, в этом случае, три атрибута Особый интерес представляют min , max , и step . Эти установки минимального времени, максимальное время, а интервал между допустимыми значениями (в секундах). Эта пиццерия только обеспечивает между 11 утра и 9 вечера, и не сулит ничего лучше, чем с шагом 15 минут, которые мы можем отметить таким образом:

 <p><label>Customer name: <input></label></p>
 <p><label>Telephone: <input type=tel></label></p>
 <p><label>E-mail address: <input type=email></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p>

Продолжение в комментариях