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

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

Любая форма начинается с элемента 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:

Дата добавления: 2015-08-18