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

[Makha]

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

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

Comments

[Makha]

textarea элемент может использоваться, чтобы обеспечить текстовое поле свободной формы. В этом экземпляре мы собираемся использовать это, чтобы предоставить пространство клиенту, чтобы дать инструкции поставки:

 <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>
 <p><label>Delivery instructions: &lt;textarea>&lt;/textarea></label></p>

И, наконец, чтобы сделать форму отправляемой мы вставляем кнопку:

 <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>
 <p><label>Delivery instructions: &lt;textarea>&lt;/textarea></label></p>
 <p><button>Submit order</button></p>

Форма представления подвергаются серверы в различных формах, чаще всего в качестве HTTP GET, POST, или запросов. Чтобы указать точный метод, method атрибут указан в form элемента. Это не определяет, как данные формы кодируются, хотя, чтобы указать, что вы используете enctype атрибут. Вы также должны указать URL-адрес службы, которая будет обрабатывать представленных данных, используя action атрибута.

Каждой форме на странице нужно дать имя, чтобы можно было обратиться к данным.
Мы уже определили имя для группы переключателей; тот же самый атрибут (name) также определяет имя представления. Переключатели можно отличить друг от друга в представлении, давая им различные значения, при использовании value атрибут.

 <p><label>Customer name: <input name="custname"></label></p>
 <p><label>Telephone: <input type=tel name="custtel"></label></p>
 <p><label>E-mail address: <input type=email name="custemail"></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size value="small"> Small </label></p>
  <p><label> <input type=radio name=size value="medium"> Medium </label></p>
  <p><label> <input type=radio name=size value="large"> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
  <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
  <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
  <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery"></label></p>
 <p><label>Delivery instructions: &lt;textarea name="comments">&lt;/textarea></label></p>
 <p><button>Submit order</button><p>

Атрибут required позволяет задать поля, обязательные для заполнения.

 <p><label>Customer name: <input name="custname" required></label></p>
 <p><label>Telephone: <input type=tel name="custtel"></label></p>
 <p><label>E-mail address: <input type=email name="custemail"></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size value="small"> Small </label></p>
  <p><label> <input type=radio name=size value="medium"> Medium </label></p>
  <p><label> <input type=radio name=size value="large"> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
  <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
  <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
  <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery" required></label></p>
 <p><label>Delivery instructions: &lt;textarea name="comments">&lt;/textarea></label></p>
 <p><button>Submit order</button><p>

Кроме того, можно ограничить длину вводимых данных, используя атрибут maxlength. Добавив его в textarea, мы можем ограничить количество символов вводимых пользователем до 1000 символов, не давая им писать огромные эссе занятым водители доставки, а не отвлекаясь и по существу:

 <p><label>Customer name: <input name="custname" required></label></p>
 <p><label>Telephone: <input type=tel name="custtel"></label></p>
 <p><label>E-mail address: <input type=email name="custemail"></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size value="small"> Small </label></p>
  <p><label> <input type=radio name=size value="medium"> Medium </label></p>
  <p><label> <input type=radio name=size value="large"> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
  <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
  <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
  <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery" required></label></p>
 <p><label>Delivery instructions: &lt;textarea name="comments" maxlength=1000>&lt;/textarea></label></p>
 <p><button>Submit order</button><p>

[Makha]

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

accept-charset атрибут дает кодировки символов, которые должны использоваться для представления. Если определено, значение должно быть упорядоченным набором уникальных разделенных пробелом маркеров, которые являются нечувствительным к регистру ASCII, и каждый маркер должен быть ASCII нечувствительное к регистру соответствие для привилегированного имени MIME совместимой с ASCII кодировки символов. [IANACHARSET]

name атрибут представляет form's называют в пределах forms набор. Значение не должно быть пустой строкой, и значение должно быть уникальным.

autocomplete атрибут - перечислимый атрибут. У атрибута есть два состояния: on и off. Отсутствует значение по умолчанию. OFF - состояние указывает, что для input элементов автозавершения написанного отключено, ON состояние указывает, что для input элементов автозавершение будет включено.

action, enctype, method, novalidate, и target атрибуты - атрибуты для представления формы.