htmlbook.ru - Для тех, кто делает сайты
Шаг за шагом Графика для Web
Шаг за шагом > Формы по шагам

Формы по шагам

Шаг 1. Добавление формы

Для указания браузеру где начинается и заканчивается форма, используется контейнер FORM. Между открывающим и закрывающим тегами FORM и FORM можно помещать любые необходимые теги HTML. Это позволяет добавить элементы формы в ячейки таблицы для их форматирования, а также использовать изображения.

Шаг 2. Параметры формы

Каждая форма характеризуется некоторыми параметрами, которые указываются в теге FORM. Эти параметры задают имя формы, ее обработчик и метод отправки данных на сервер, а также некоторые другие характеристики.

Шаг 3. Элементы форм

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

Шаг 4. Однострочное текстовое поле

Однострочное текстовое поле предназначено для ввода строки символов с помощью клавиатуры.

Шаг 5. Поле для пароля

Поле для пароля — обычное текстовое поле, но отличается от него тем, что все символы отображаются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.

Шаг 6. Многострочный текст

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

Шаг 7. Кнопки

Кнопки являются одним из самых понятных и интуитивных элементов интерфейса. По их виду сразу становится понятно, что единственное действие, которое с ними можно производить ? это нажимать на них.

Шаг 8. Переключатели

Переключатели используют, когда необходимо выбрать один единственный вариант из нескольких предложенных.

Шаг 9. Флажки

Флажки используют, когда необходимо выбрать два или более варианта из предложенного списка. Если требуется выбор лишь одного варианта, то для этого следует предпочесть переключатели.

Шаг 10. Поле со списком

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

Шаг 11. Скрытое поле

Скрытое поле не показывается на странице и прячет свое содержимое от пользователя. Посетитель не может ничего в него внести или напечатать. Цель создания скрытых полей ? в передаче технической информации на сервер.

Шаг 12. Поле с изображением

Поле с изображением аналогично по действию кнопке SUBMIT, но представляет собой рисунок. Это расширяет возможности дизайнерских изысков по оформлению формы.

Шаг 13. Отправка файла

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

Шаг 14. Переход между полями с помощью табуляции

Параметр tabindex определяет последовательность перехода между полями формы при нажатии на клавишу <Tab>.

Шаг 15. Применение тега LABEL

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

Шаг 16. Разделение формы на группы

Контейнер LABEL группирует элементы формы, отображая вокруг них рамку.

Шаг 17. Блокирование элементов формы

У любого элемента формы есть два состояния, которые ограничивают доступ к элементу или ввод данных - блокирование (disabled) и только для чтения (readonly).

Шаг 18. Изменение ширины поля

Чтобы установить заданную ширину поля лучше использовать стили, в частности, ширина изменяется с помощью свойства width.

Шаг 19. Цвет фона элементов формы

Для изменения фона под элементами формы используется универсальный стилевой атрибут background.

Шаг 20. Получение данных формы

Рассказ о формах был бы не полным, если не затронуть вопрос, что же делать с данными дальше, после того, как они введены пользователем и отправлены на сервер.

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

Copyright Влад Мержевич, по всем вопросам пишите по адресу: vlad@htmlbook.ru