 |
Формы. Элементы формы
|
|
|
|
Формы
Для размещения на веб-странице форм используется парный тег < FORM> (закрывающий тег обязателен). Формы являются наиболее популярным способом " обратной связи" с пользователем. Форма представляет собой несколько полей, где пользователь может ввести некоторую информацию, либо выбрать какую-то опцию. После того, как пользователь отправит информацию, она обрабатывается программой (скриптом), размещенной на сервере. Существует также возможность обрабатывать формы " на стороне клиента", встраивая в свои страницы скрипты.
Тег < FORM> имеет атрибуты:
Атрибут action=" url" указывает URL, который примет и обработает данные формы.
Атрибут method=" стиль" указывает метод передачи данных программе-обработчику формы. " Стиль" может принимать одно из двух значений. Значение get, используемое по умолчанию, предписывает посылать информацию формы вместе с URL, а значение post предписывает посылать информацию формы отдельно от URL. Значение post используется обычно в случае отправки данных формы по электронной почте или при необходимости передавать значительный объем информации.
Атрибут name=" имя" задает имя формы, которое используется для доступа к ее элементам через скрипты.
Атрибут enctype=" кодирование" определяет способ кодирования данных формы при их отправке на сервер.
Заголовок формы, отправляющей информацию на адрес e-mail, может иметь вид:
< form action=" mailto: ivanov@mail. ru" method=" post" enctype=" text/plain" name=" anketa" >
Элементы формы
Внутри контейнера < FORM> размещаются теги для создания элементов формы.
Начало формы
| Тег < input> предназначен для сбора информации различными способами (в зависимости от значения атрибута type ), включая текстовые поля, поля для ввода пароля, переключатели, флажки, кнопки для отправки данных и очистки формы:
| |||
| Текстовое поле Текстовое поле с заполнителем (placeholder) | < input type=" text" name=" telefon" maxlength=" 20" size=" 10" value=" 8(812)" > < input type=" text" name=" search" placeholder=" Поиск" > Атрибут name задает имя элемента для отправки на сервер или обращения через скрипты. Атрибут предполагается обязательным. Атрибут maxlength ограничивает максимальную длину вводимого текста. Атрибут size ограничивает максимальное количество отображаемых символов. Атрибут value указывает значение поля ввода по умолчанию. Атрибут placeholder предлагает подсказку или совет внутри поля, которая исчезает при вводе значения в поле. Атрибут readonly устанавливает, что поле не может изменяться пользователем. | ||
| Поле для ввода пароля | < input type=" password" name=" pas" maxlength=" 20" > | ||
| Переключатели (радиокнопки) женский мужской | Используются, когда следует выбрать один вариант из нескольких предложенных. < BR> < input type=" radio" name=" pol" value=" woman" checked> женский < BR> < input type=" radio" name=" pol" value=" man" > мужской Переключатели следует группировать, задавая одно и то же значение атрибута name. Атрибут value определяет значение переключателя, которое будет отправлено на сервер. Значение может, как совпадать с текстом переключателя, так быть и самостоятельным. Атрибут checked, если он указан, делает переключатель выбранным по умолчанию. | ||
| Флажки русский английский финский | Позволяют выбрать более одного варианта из предложенных. < BR> < input type=" checkbox" name=" lang1" checked> русский < BR> < input type=" checkbox" name=" lang2" > английский < BR> < input type=" checkbox" name=" lang3" > финский | ||
| Кнопка для отправки данных | |||
Конец формы
| < input type=" submit" value=" Отправить" > Атрибут value позволяет указать надпись на кнопке. |
| Кнопка для очистки формы |
|
|
|
| < input type=" reset" value=" Очистить" > После очистки все элементы формы принимают значения, которые они имели по умолчанию. | |
| Поле для ввода имени файла, который пересылается на сервер | < input type=" file" name=" f" value=" Выберите файл" > Чтобы браузер смог передать выбранный файл на сервер, необходимо добавить форме атрибут enctype со значением multipart/form-data. |
| Кнопка |
| < input type=" button" name=" doc1" value=" Открыть" > |
| Список |
Начало формы
| Закрывающий тег < /SELECT> обязателен. Элементы списка задаются с помощью тега < option> < select name=" dolgnost" size=" 3" > < option value=" Ассистент" > Ассистент < option value=" Преподаватель" selected> Преподаватель < option value=" Старший преподаватель" > Старший преподаватель < option value=" Доцент" > Доцент < option value=" Профессор" > Профессор < /select> Атрибут selected указывает элемент списка, выбранный по умолчанию. Атрибут multiple позволяет одновременно выбирать сразу несколько элементов списка. Атрибут size определяет количество отображаемых строк списка. Если указано size=" 1", отображение элементов будет организовано в виде ниспадающего меню, в противном случае будет использован список прокрутки, включающий указанное число элементов. Атрибут value определяет значение пункта списка, которое будет отправлено на сервер. Значение может, как совпадать с текстом пункта, так быть и самостоятельным. | |
| Текстовая область Комментарий | < textarea name=" kom" cols=" 15" rows=" 6" > Комментарий< /textarea> Тег предназначен для создания многострочного поля ввода. Атрибуты cols и rows указывают число строк и столбцов в поле. Текст, заключенный в тег < textarea>, становится его значением по умолчанию. |
| Атрибут элементов формы required определяет, что элемент формы является обязательным для заполнения. Если элемент формы не был заполнен, то после нажатия на кнопку " Отправить" будет отображаться сообщение об ошибке с просьбой заполнить обязательное поле. | |
Конец формы
|
|
|
