Самоучитель HTML Справочник HTML Глобальные атрибуты События Типы элементов Таблица цветов Спецсимволы HTML
Содержание

HTML формы

В этой главе:

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

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

Написание формы пользовательского интерфейса

В качестве примера создадим форму для заказа пиццы:

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

<form>
  <p><label>Ваше имя: <input></label></p>
</form>

Чтобы позволить пользователю выбрать размер пиццы, мы можем использовать набор радио кнопок - переключателей. Чтобы установить переключатели, нам надо использовать элемент input с атрибутом type, значение которого должно быть radio. Для того чтобы переключатели работали в одной группе, им нужно указать общее имя, используя для этого атрибут name. Теперь, чтобы сгруппировать связанные друг с другом контролы вместе, в нашем случае это радио кнопки, можно использовать элемент fieldset. Название/заголовок для такой группы элементов можно указать с помощью элемента legend, который должен быть первым элементом внутри элемента fieldset. Давайте на основании полученных данных попробуем расширить нашу форму:

<form>
  <p><label>Ваше имя: <input></label></p>
  <fieldset>
    <legend> Размер пиццы </legend>
    <p><label> <input type="radio" name="size"> Маленькая </label></p>
    <p><label> <input type="radio" name="size"> Средняя </label></p>
    <p><label> <input type="radio" name="size"> Большая </label></p>
  </fieldset>
</form>
Попробовать »

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

<form>
  <p><label>Ваше имя: <input></label></p>
  <fieldset>
    <legend> Размер пиццы </legend>
    <p><label> <input type="radio" name="size"> Маленькая </label></p>
    <p><label> <input type="radio" name="size"> Средняя </label></p>
    <p><label> <input type="radio" name="size"> Большая </label></p>
  </fieldset>
  <fieldset>
    <legend> Начинка для пиццы </legend>
    <p><label> <input type="checkbox"> Бекон </label></p>
    <p><label> <input type="checkbox"> Экстра сыр </label></p>
    <p><label> <input type="checkbox"> Лук </label></p>
    <p><label> <input type="checkbox"> Грибы </label></p>
  </fieldset>
</form>

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

<form>
  <p><label>Ваше имя: <input></label></p>
  <p><label>Телефон: <input type="tel"></label></p>
  <p><label>E-mail адрес: <input type="email"></label></p>
  <fieldset>
    <legend> Размер пиццы </legend>
    <p><label> <input type="radio" name="size"> Маленькая </label></p>
    <p><label> <input type="radio" name="size"> Средняя </label></p>
    <p><label> <input type="radio" name="size"> Большая </label></p>
  </fieldset>
  <fieldset>
    <legend> Начинка для пиццы </legend>
    <p><label> <input type="checkbox"> Бекон </label></p>
    <p><label> <input type="checkbox"> Экстра сыр </label></p>
    <p><label> <input type="checkbox"> Лук </label></p>
    <p><label> <input type="checkbox"> Грибы </label></p>
  </fieldset>
</form>

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

<form>
  <p><label>Ваше имя: <input></label></p>
  <p><label>Телефон: <input type="tel"></label></p>
  <p><label>E-mail адрес: <input type="email"></label></p>
  <fieldset>
    <legend> Размер пиццы </legend>
    <p><label> <input type="radio" name="size"> Маленькая </label></p>
    <p><label> <input type="radio" name="size"> Средняя </label></p>
    <p><label> <input type="radio" name="size"> Большая </label></p>
  </fieldset>
  <fieldset>
    <legend> Начинка для пиццы </legend>
    <p><label> <input type="checkbox"> Бекон </label></p>
    <p><label> <input type="checkbox"> Экстра сыр </label></p>
    <p><label> <input type="checkbox"> Лук </label></p>
    <p><label> <input type="checkbox"> Грибы </label></p>
  </fieldset>
  <p><label>
    Предпочитаемое время доставки: <input type="time" min="11:00" max="21:00" step="900">
  </label></p>
</form>

Элемент textarea может быть использован для предоставления многострочного текстового поля. В нашем случае мы будем его использовать, чтобы обеспечить место для инструкций по доставке пиццы для заказчика. Кроме того, можно ограничить количество вводимых символов, используя для этого атрибут maxlength. Размер для поля ввода можно задать с помощью двух атрибутов: rows - количество строк и cols - количество символов. И наконец, чтобы сделать форму отправляемой, нам надо использовать элемент button:

<form>
  <p><label>Ваше имя: <input></label></p>
  <p><label>Телефон: <input type="tel"></label></p>
  <p><label>E-mail адрес: <input type="email"></label></p>
  <fieldset>
    <legend> Размер пиццы </legend>
    <p><label> <input type="radio" name="size"> Маленькая </label></p>
    <p><label> <input type="radio" name="size"> Средняя </label></p>
    <p><label> <input type="radio" name="size"> Большая </label></p>
  </fieldset>
   <fieldset>
    <legend> Начинка для пиццы </legend>
    <p><label> <input type="checkbox"> Бекон </label></p>
    <p><label> <input type="checkbox"> Экстра сыр </label></p>
    <p><label> <input type="checkbox"> Лук </label></p>
    <p><label> <input type="checkbox"> Грибы </label></p>
  </fieldset>
  <p><label>
    Предпочитаемое время доставки: <input type="time" min="11:00" max="21:00" step="900">
  </label></p>
  <p><label>Инструкции по доставке: 
    <textarea maxlength="1000" rows="10" cols="40"></textarea>
  </label></p>
  <p><button>Отправить заказ</button></p>
</form>
Попробовать »

Реализация обработки на стороне сервера

Точные детали для описания обработки на стороне сервера выходят за рамки данного описания, так как html обрабатывается на клиентской стороне.

Настройка формы для связи с сервером

Данные из формы передаются на обработку серверу различными способами, в основном как HTTP GET или POST запросы. Чтобы указать, какой метод передачи будет использован, в элементе form нужно добавить атрибут method. Разница между этими двумя методами заключается в следующем: данные метода GET передаются скрипту в строке браузера в виде scriptname?parameter1=value1&parameter2=value2&...&..., при этом стоит также учитывать, что строка адреса имеет ограничение по длине. Метод POST же передает данные скрипту иначе - через стандартный поток ввода-вывода не загаживая строку адреса.

Вы также должны указать URL-адрес сценария, который будет обрабатывать переданные на сервер данные, используя атрибут action.

Для каждого элемента формы (контрола), данные которого вы хотите передать на сервер вы должны указать имя (для этого используется атрибут name), которое будет использовано на сервере для обращения к переданным данным (на серверной стороне эти имена будут представлять собой имена переменных, к которым можно обратиться, чтобы получить переданные данные). Мы уже указали имя для группы переключателей. Радио кнопки можно отличить друг от друга, дав им различные значения, используя для этого атрибут value.

<form method="post" action="test.php">
  <p><label>Ваше имя: <input name="name"></label></p>
  <p><label>Телефон: <input type="tel" name="tel"></label></p>
  <p><label>E-mail адрес: <input type="email" name="email"></label></p>
  <fieldset>
    <legend> Размер пиццы </legend>
    <p><label> <input type="radio" name="size" value="Маленькая"> Маленькая </label></p>
    <p><label> <input type="radio" name="size" value="Средняя"> Средняя </label></p>
    <p><label> <input type="radio" name="size" value="Большая"> Большая </label></p>
  </fieldset>
  <fieldset>
    <legend> Начинка для пиццы </legend>
    <p><label> <input type="checkbox" name="bacon" value="Бекон"> Бекон </label></p>
    <p><label> <input type="checkbox" name="cheese" value="Экстра сыр"> Экстра сыр </label></p>
    <p><label> <input type="checkbox" name="onion" value="Лук"> Лук </label></p>
    <p><label> <input type="checkbox" name="mushroom" value="Грибы"> Грибы </label></p>
  </fieldset>
  <p><label>
    Предпочитаемое время доставки: <input type="time" min="11:00" max="21:00" step="900">
  </label></p>
  <p><label>Инструкции по доставке: 
    <textarea maxlength="1000" rows="10" cols="40"></textarea>
  </label></p>
  <p><button>Отправить заказ</button></p>
</form>

Итак, основы для работы с формами мы рассмотрели, а чтобы форма имела более привлекательный внешний вид, стоит воспользоваться CSS.

Учебные руководства и справочные материалы для веб-разработчиков.
mail для связи: admin@puzzleweb.ru

© 2011-2014 www.puzzleweb.ru