Формы

Для размещения на веб-странице форм используется парный тег <FORM> (закрывающий тег обязателен). Формы являются наиболее популярным способом "обратной связи" с пользователем. Форма представляет собой несколько полей, где пользователь может ввести некоторую информацию, либо выбрать какую-то опцию. После того, как пользователь отправит информацию, она обрабатывается программой (скриптом), размещенной на сервере. Существует также возможность обрабатывать формы "на стороне клиента", встраивая в свои страницы скрипты.

Тег <FORM> имеет атрибуты:
Атрибут action="url" указывает URL, который примет и обработает данные формы.
Атрибут method="стиль" указывает метод передачи данных программе-обработчику формы. "Стиль" может принимать одно из двух значений. Значение get, используемое по умолчанию, предписывает посылать информацию формы вместе с URL, а значение post предписывает посылать информацию формы отдельно от URL. Значение post используется обычно в случае отправки данных формы по электронной почте или при необходимости передавать значительный объем информации.
Атрибут name="имя" задает имя формы, которое используется для доступа к ее элементам через скрипты.
Атрибут enctype="кодирование" определяет способ кодирования данных формы при их отправке на сервер.

Заголовок формы, отправляющей информацию на адрес e-mail, может иметь вид:

Элементы формы

Внутри контейнера <FORM> размещаются теги для создания элементов формы.

Тег <input> предназначен для сбора информации различными способами (в зависимости от значения атрибута type), включая текстовые поля, поля для ввода пароля, переключатели, флажки, кнопки для отправки данных и очистки формы:


Атрибут name задает имя элемента для отправки на сервер или обращения через скрипты. Атрибут предполагается обязательным.
Атрибут maxlength ограничивает максимальную длину вводимого текста.
Атрибут size ограничивает максимальное количество отображаемых символов.
Атрибут value указывает значение поля ввода по умолчанию.
Атрибут placeholder предлагает подсказку или совет внутри поля, которая исчезает при вводе значения в поле.
Атрибут readonly устанавливает, что поле не может изменяться пользователем.
Переключатели (радиокнопки)

Используются, когда следует выбрать один вариант из нескольких предложенных. Переключатели следует группировать, задавая одно и то же значение атрибута name.
Атрибут value определяет значение переключателя, которое будет отправлено на сервер. Значение может, как совпадать с текстом переключателя, так быть и самостоятельным.
Атрибут checked, если он указан, делает переключатель выбранным по умолчанию.
Флажки


Позволяют выбрать более одного варианта из предложенных.
Кнопка для отправки данных
Атрибут value позволяет указать надпись на кнопке.
Кнопка для очистки формы
После очистки все элементы формы принимают значения, которые они имели по умолчанию.
Поле для ввода имени файла, который пересылается на сервер
Чтобы браузер смог передать выбранный файл на сервер, необходимо добавить форме атрибут enctype со значением multipart/form-data.
Кнопка
Список
Закрывающий тег </SELECT> обязателен. Элементы списка задаются с помощью тега <option>
Атрибут selected указывает элемент списка, выбранный по умолчанию.
Атрибут multiple позволяет одновременно выбирать сразу несколько элементов списка.
Атрибут size определяет количество отображаемых строк списка. Если указано size="1", отображение элементов будет организовано в виде ниспадающего меню, в противном случае будет использован список прокрутки, включающий указанное число элементов.
Атрибут value определяет значение пункта списка, которое будет отправлено на сервер. Значение может, как совпадать с текстом пункта, так быть и самостоятельным.
Текстовая область
Тег предназначен для создания многострочного поля ввода.
Атрибуты cols и rows указывают число строк и столбцов в поле.
Текст, заключенный в тег <textarea>, становится его значением по умолчанию.
Атрибут элементов формы required определяет, что элемент формы является обязательным для заполнения. Если элемент формы не был заполнен, то после нажатия на кнопку "Отправить" будет отображаться сообщение об ошибке с просьбой заполнить обязательное поле.

Подписи к элементам формы

Парный тег <label> связывает текст подписи и элемент формы логически. Если щёлкнуть по тексту подписи, то курсор переместится в соответствующее поле, флажок или переключатель будет выбран.
Первый способ создать подпись — вложить текст подписи и тег элемента формы в тег <label>: Второй способ заключается в использовании идентификатора id внутри элемента формы и указании его имени в качестве атрибута for тега <label>.

Пример


Задание

Лабораторная работа № 4
Текст о звездах для задания №4.

домой назад далее