| НАША ГРУППА |
|
|
|
|
 |
| ОБЩЕНИЕ |
|
|
|
|
|
Крупнейший интернет магазин портативной техники всем зашедшим по этой ссылке скидки.
Создание форм.
Формы предназначены для ввода информации пользователем с целью ее дальнейшей обработки специальными программами, расположенными на сервере. Например, можно использовать формы для проведения опросов или при разработке регистрационных форм. Или для оставления сообщения в гостевой книге. Определяются формы тэгом <FORM>. В одном документе может быть определено несколько форм для заполнения, но они не должны быть вложенными одна в другую. Формат контейнера <FORM> следующий:
<FORM action="url" method="POST">...</FORM>
Тэг <FORM> имеет следующие атрибуты: • action="..." - обязательный параметр. Его значением является URL - адрес программы, которая будет обрабатывать содержимое формы. • method="..." - определяет метод, используемый для посылки содержания заполненной формы на сервер. Возможные варианты при этом следующие: o GET - этот метод используется броузером по умолчанию и осуществляет присоединение содержимого заполненной формы к URL; o POST — при использовании этого метода содержимое заполненной формы пересылается не как часть URL, а как содержимое тела запроса. • enctype="..." - задает тип кодирования содержимого заполненной формы. Если значение атрибута не установлено, по умолчанию предполагается application/x-www-form-urlencoded. Внутри контейнера <FORM> могут находиться любые теги, кроме другого контейнера <FORM>. Для создания полей для ввода данных внутри формы применяют теги <INPUT>, <SELECT> и <TEXTAREA>. Тег >INPUT> используется для задания простого элемента ввода, при этом могут быть использованы следующие атрибуты. • value="значение" - для полей ввода текста text или пароля password используется для задания начального содержания поля, а для checkbox или radio задает значение, когда элемент находится в отмеченном состоянии. • size="n" - задает физический размер поля ввода в символах, действует для элементов ввода текста или пароля. • maxlength="n" - определяет максимальное количество введенных символов, которые будут приниматься для ввода. • name= "идентификатор" - имя для создаваемого поля ввода, используемое для идентификации при обработке данных сервером. • type= "параметр" - задает тип создаваемого элемента ввода; этот параметр может принимать одно из следующих значений: o text - создает поле для ввода текста. Это значение используется по умолчанию. o password — создает поле ввода пароля, аналогичное типу "text", но при этом вводимые символы отображаются на экране звездочками; o file - создает поле для ввода имени локального файла, который необходимо куда-то послать. Сопровождается созданием кнопки "Обзор": o hidden — создает скрытый элемент не показываемый пользователю. Информация, хранящаяся в скрытом поле, всегда пересылается на сервер и не может быть изменена ни пользователем, ни браузером. Может применятся, например, при обработке нескольких форм, поочередно отправляемых пользователем и каким-либо образом связанных между собой; o radio - создает радиокнопку - элемент-переключатель в составе группы, принимающий положения "включено" и "выключено", из которых может быть выбран только один из элементов; o checkbox - создает переключатель-поле для установки флажка "включено"/"выключено"; o submit — создает кнопку передачи данных, действие которой сводится к отсылке содержимого заполненной формы на сервер; o image - определяется элемент в виде графического изображения, действующий аналогично кнопке "submit". o reset - создает кнопку, которая сбрасывает значения введенных полей в исходное состояние. Тег <SELECT>v предназначен для создания списков в форме, при этом внутри разрешена только последовательность тегов <OPTION>, за каждым из которых следует некоторое количество простого текста. Атрибуты тега <SELECT> следующие: • name="идентификатор" - символьное имя для элемента <SELECT>, по которому он идентифицируется; • size="n" - если значение равно 1 или если этот атрибут опущен, то элемент vSELECT> будет представлен как выпадающее меню; если size=2 или более, то элемент будет представлен как окно выбора, а значение будет определять количество видимых элементов списка; • multiple - если этот атрибут присутствует, то допускается множественный выбор из списка. И, наконец, контейнер <TEXTAREA> может быть использован для расположения многострокового поля ввода с необязательным содержимым в форме. Основными атрибутами тега <TEXTAREA> являются: • name="..." - символьное имя поля ввода; • rows="..." - число строк в поле ввода, то есть высота поля; • cols="..." - число столбцов в поле ввода, то есть ширина поля. action="..." - обязательный параметр. Его значением является URL - адрес программы, которая будет обрабатывать содержимое формы Обработку данных, вводимых в формы, осуществляет программа, адрес которой указывается в атрибуте action="..." тэга <FORM>. Но далеко не все сервера, предоставляющее место для личных сайтов, разрешают работу таким программам, и сервер narod.ru не исключение. Поэтому для демонстрации примеров использовния форм мы будет отправлять содержимое формы не на сервер а по электронной почте адресату, которого вы сами укажите. Для этого в атрибуте action="..." прописывается макрокоманда отправки почтового сообщения: <FORM ACTION="mailto:freeuser@mail.net"> , где freeuser@mail.net адрес электронной почты получателя. Для отправки содержимого формы в данном случае используется почтовая программа отправителя. Теперь рассмотрим несколько примеров простейших форм ввода. В первой форме использован тег <INPUT> и несколько его атрибутов. Код формы приведен ниже:<HTML> <HEAD> <title>Пример простейшей формы</title> </HEAD> <BODY> <FORM method="POST" name="student" action="mailto:freeuser@mail.net" enctype="text/plain"> <P>Введите Ваше имя <INPUT type="text" name="Tl" size="45"> <P><INPUT type="radio" name="R1" value="V1">Учащийся ВУЗа <P><INPUT type="radio" name="R1" value="V2">Другое <P><INPUT type="submit" value="Отправить данные" name="B1"> <INPUT type="reset" value="Очистить форму" name="B2"> </FORM> </BODY> </HTML>
Посмотреть как будет выглядеть данная форма в работе можно на этой ссылке. Следующая форма проиллюстрирует варианты использования тэга <SELECT>, создающего списки в форме. Код формы:<HEAD> <TITLE>Создание списка</TITLE> </HEAD> <BODY> <TABLE> <TR> <TD>Выберите операционную систему, которую вы используете: </TD> <TD>Выберите операционную систему, которую вы используете: </TD> <TD>Выберите операционную систему, которую вы используете: </TD> </TR> <TR> <TD> <FORM> <SELECT> <OPTION>Windows 3.11 <OPTION>Windows 95 <OPTION>Windows 98 <OPTION>Windows Me <OPTION>Windows NT <OPTION>Windows 2000 <OPTION>Windows XP <OPTION>Linux <OPTION>Unix <OPTION>QNX </SELECT> </FORM> </TD> <TD> <FORM> <SELECT size=3> <OPTION>Windows 3.11 <OPTION>Windows 95 <OPTION>Windows 98 <OPTION>Windows Me <OPTION>Windows NT <OPTION>Windows 2000 <OPTION>Windows XP <OPTION>Linux <OPTION>Unix <OPTION>QNX </SELECT> </FORM> </TD> <TD> <FORM> <SELECT multiple> <OPTION>Windows 3.11 <OPTION>Windows 95 <OPTION>Windows 98 <OPTION>Windows Me <OPTION>Windows NT <OPTION>Windows 2000 <OPTION>Windows XP <OPTION>Linux <OPTION>Unix <OPTION>QNX </SELECT> </FOBM> </TD> <TR> </TABLE> </BODY> </HTML>
И последний пример иллюстрирует создание текстовой области в форме:<HTML> <HEAD> <TITLE>Соэдание простой формы для ввода текста</TITLE> </HEAD> <BODY> Ваши предложения о работе сайта просьба оставлять здесь: <BR> <FORM method="POST" name="student" action="mailto:freeuser@mail.net" enctype="text/plain"> <TEXTAREA name="textform" rows="10" cols="50"> </TEXTAREA> <p><input type="submit" value= "Отправить" name="Bl"> <input type="reset" value="Очистить" name="B2"> </FORM> </BODY> </HTML>
Объект <TEXTAREA> имеет полосы прокрутки, так что может быть введено любое количество текста. Содержание по умолчанию должно быть ASCII-текстом, при этом символы перевода строки воспринимаются. Если контейнер <TEXTAREA> пуст, то в текстовой области ничего не отображается, однако если между тегами <TEXTAREA> и </TEXTAREA> заключить какой-либо текст, то он будет выводиться при загрузке страницы.| ТРАДИЦИИ КАИ |
|
|
|
| ОСНОВНОЕ |
|
|
|
|
|
|
|
| ОБРАТНАЯ СВЯЗЬ |
|
|
|
|
|