Модульная лекция: мл 3-6.

2.10. Создание форм. Элементы формы.

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

<FORM ACTION="mailto: samoxvalov@narod.ru" METOD="post” >

< TEXTAREA ROWS=5 COLS=33>

</ TEXTAREA> <BR>

<INPUT TYPE="submit" VALUE="Отправить сообщение">

</FORM>

Внутри области textarea посетитель сайта может ввести с клавиатуры любой текст (сообщение). По кнопке типа TYPE=”submit” веденное сообщение будет отправлено по указанному электронному адресу. Обратите внимание на то, что значение параметра ACTION содержит ключевое слово mailto, за которым следует адрес владельца сайта, т.е. сообщение будет отправлено по адресу samoxvalov@narod.ru.

Результат обработки браузером рассмотренного выше HTML-кода отображается в следующем виде:

После щелчка по кнопке «Отправить сообщение» введенный в область textarea текст будет отправлен по указанному на форме электронному адресу

HTML-формы предназначены для пересылки данных от удаленного пользователя к Web-серверу. С их помощью можно организовать простейший диалог между пользователем и сервером. Например, регистрацию пользователя на сервере или выбор нужного документа из представляемого списка. Тэги <form>.... </form> отмечают начало и конец формы. Документ может содержать несколько форм, но они не могут быть вложены одна в другую. В тэге можно указать несколько параметров, среди которых параметр name. Этот параметр обязателен в том случае, если документ содержит несколько форм. В этом случае с помощью имени формы можно определить, из какой формы выбираются данные.

Например, <form name="forma1"> данные 1-й формы </form>

В качестве имени формы можно использовать любую комбинацию латинских букв и цифр.

Для передачи данных на сервер необходимо указывать следующие параметры: action - задает значение URL-адрес CGI-программы, которая будет обрабатывать информацию, извлеченную из формы.

metod - определяет метод пересылки данных из формы к Web-серверу. Он может принимать два значения: get и post.

Для создания полей формы средствами языка HTML, существуют специальные теги: <input>, <select>, <textarea>, которые употребляются только внутри тега <form>. Широкое применение получили перечисленные элементы формы для организации и настройки пользовательского интерфейса на динамических Web-страница.

Элемент (тег) input

Это наиболее употребительный тэг, с помощью которого можно создавать внутри формы поля для ввода строки текста, пароля, имени файла, различные кнопки. Тег <input> имеет несколько параметров (атрибутов): type, name, value, size, maxlehgth, checked, src и др.

Параметр type. определяет тип поля:

Примеры с различными значениями параметра (атрибута) type показаны ниже.

< type="text">		- создает строку для ввода текста
<input type="password">		- создает строку для ввода пароля
<input type="checkbox">		- создает включатель
<input type="radio">		- создает "исключающий переключатель"
<input type="file">		- создает поле для ввода имени локального файла
<input type="image">		- создает элемент формы в виде кнопки-изображения
<input type="button">		- создает кнопку произвольного значения
<input type="reset">		- создает кнопку "очистить" строку
<input type="submit">		- кнопка пересылки данных на сервер

Как правило, для создания кнопки достаточно использовать элемент input в сочетании с атрибутом type="button". Если нужно создать кнопку, например, с рисунком, или иным встроенными элементами, то необходимо воспользоваться элементом button следующим образом. <button name="reset" type="reset">

<img src="hlp,jpg" alt="Указатель">

</button> Результат отображения этого элемента браузером следующий: Пример создания формы с элементами input.

<form name="forma1">

Фамилия <input type="text" size=20>

Пароль <input type="password"

<input type="reset" value="Сброс" >

<input type="button" value="Подтвердите">

</form> Результат отображения кода на экране браузером :

Фамилия

Пароль

2.10.1.Элемент select Для создания списка выбора используют элемент select. Варианты выбора представляются в окне браузера в виде ниспадающего меню или списка прокрутки. Этот тэг имеет следующие параметры name =строка - обязательный параметр. При выборе одного или нескольких значений формируется список выбранных значений, который передается на сервер (или в скрипты ) под именем, указанным в параметре name. size=n - устанавливает число одновременно видимых элементов выбора. Если n=1, то отображается ниспадающее меню, если n>1, то - список прокрутки, с n одновременно видимыми элементами. MULTIPLE - означает, что из меню или списка можно выбрать одновременно несколько элементов. Элементы меню задаются внутри тэга <select> при помощи тэга <option>. Каждый элемент select должен содержать хотя бы один или более элементов option, c помощью которого создаются элементы (строки) списков. Пример. <select name="student"> <option selected>Кирпичев (выбор строки списка по умолчанию) <option>Абрамкин <option>Агуреева <option>Бурковский <option>Соловьева <option>и т.д. </select>

Результат отображения рассмотренных элементов браузером следующий: Откройте список и выберите любую строку: