HTML-EXPRESS.COM ПРЕДСТАВЛЯЕТ ...


Зачем Почём Хочу !!!

Краткое введение в HTML - Формы

>>

Зачем нужна страница

>>

Сколько стоит страница

>>

Где взять страницу

>>

Спектр услуг и расценки

>>

Примеры работ

>>

Статьи

>>

Workshops

>>

Словарь терминов

>>

Об авторе

>>

Контактная информация

 

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

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

method - определяет способ пересылки данных сценарию CGI. Здесь протокол GET выбран по умолчанию, но в большинстве случаев разработчики пользуются протоколом POST, который позволяет передавать большие обьемы данных.

action - определяет путь к сценарию CGI или адрес электронной почты.

enctype - определяет способ кодирования содержимого формы. Другими словами он сообщает броузеру о способе кодирования информации перед отсылкой серверу. По умолчанию используется значение x-www-form-encoded. Например:

<form action="test.php" method="post">

При помощи элемента <TEXTAREA> создается область для ввода и прoсмотра текста. Может использоваться и не в составе формы, а как самостоятельные детали страницы. Область ввода помогает сэкономить место благодаря полосам прокрутки. 

Элемент <INPUT> является базовым для всех элементов формы. Он используется для внедрения в форму кнопок, графических изображений, флажков, переключателей, паролей и текстовых полей. Несмотря на внешние отличия форм все они пересылают сценарию CGI данные ввиде пар имя:значение. Элемент может иметь следующие атрибуты обозначаемые как type:

 

TEXT - однострочное текстовое поле, используется дла ввода информации, которую нельзя ввести ни в одном из остальных элементов формы. Сюда вводятся имена, адреса, должности, телефоны, хобби, и данные практически любого типа. 

<input type="text" name="textfield" size="30" value="текстовое поле">

 

PASSWORD - однострочное поле, в котором вместо вводимых символов отображаются звездочки.

<input type="password" name="secret" size="30" value="passwort">

 

HIDDEN - еще один тип скрытого ввода информации. Позволяет пересылать сценариям информацию, которая не показывается пользователю и не может быть изменена им.

<input type="hidden" name="invisible" value="http://www.server.com">

 

CHECKBOX - флажки используются для предоставления возможности пользователю ответить односложно: да/нет, истина/ложь, больше/меньше и т.д. Выглядит обычно ввиде крестика или птички. 

Checkbox 1

Checkbox 2

<input type="checkbox" name="box1" value="ON"> 
Checkbox 1 
<br>
<input type="checkbox" name="box2" value="YES"> 
Checkbox 2

 

RADIO - переключатели во многом напоминают флажки, отличаясь лишь более широкими функциональными возможностями выбора. В группе переключателей может быть выбран лишь один. 

Radiobutton 1

Radiobutton 2

<input type="radio" value="V1" name="R1" checked> 
Radiobutton 1 
<br>
<input type="radio" value="V2" name="R1">
 
Radiobutton 2

 

SUBMIT - щелчок на этой кнопке приводит к пересылке содержимого формы сценарию, который был задан атрибутом action в элементе <FORM>. C помощью кнопок можно вычислять сумму, загружать стрницы, пересылать данные, сбрасывать значения.

<input type="submit" value="Отправить" name="sub">

 

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

<input type="reset" value="Сбросить" name="res">

 

Элемент <SELECT> может принимать форму раскрывающегося списка или меню элементов. Имеет вложенный тэг <OPTION>.Элемент же <OPTION> задает возможные варианты выбора меню <SELECT>.

<select size="1" name="name">
<option selected>
option 1</option>
<option>
option 2</option>
<option>
option 3</option>
</select>

 

Наиболее распространённое применение форм - это контактная форма. Как правило, она обьединяет в себе несколько элементов. Ниже приведён пример подобной формы, состоящей из нескольких однострочных текстовых полей, элемента <SELECT> и многострочного текстого поля.

Имя:

Е-майл:

Web-страница:

Вопрос или комментарий на тему:

Содержание вопроса или комментария:

 

<form action="test.php" method="post">

<table border="0" width="100%" class="back" cellpadding="3" cellspacing="1">
<tr>
<td width="30%" bgcolor="#FFFFFF">
<p align="left">
Имя:</td>
<td width="70%" bgcolor="#FFFFFF">

<input type="text" name="Name" size="38">

</td>
</tr>
<tr>
<td width="30%" bgcolor="#FFFFFF">
<p align="left">
Е-майл:</td>
<td width="70%" bgcolor="#FFFFFF">

<input type="text" name="email" size="38" value="@">

</td>
</tr>
<tr>
<td width="30%" bgcolor="#FFFFFF">
<p align="left">
Web-страница:</td>
<td width="70%" bgcolor="#FFFFFF">

<input type="text" name="homepage" size="38" value="http://">

</td>
</tr> 
<tr>
<td width="30%" bgcolor="#FFFFFF">
<p align="left">
Вопрос или комментарий на тему:</td>
<td width="70%" bgcolor="#FFFFFF">

<select size="1" name="betreff">
<option selected>
Общий вопрос</option>
<option>
Другое</option>
</select></td>

</tr>
<tr>
<td width="30%" bgcolor="#FFFFFF">
<p align="left">
Содержание вопроса или комментария:</td>
<td width="70%" bgcolor="#FFFFFF">

<textarea rows="3" name="frage" cols="32">Эту форму можно заполнить и отправить. Результат будет выведен на экран</textarea>

</td>
</tr>
<tr>
<td width="30%" bgcolor="#FFFFFF"></td>
<td width="70%" bgcolor="#FFFFFF">

<input type="submit" value="Отправить >>" name="sub">
<input type="reset" value="
Сбросить XX" name="res">

</td>
</tr>
</table> 

</form>




Следующий workshop

>> Перечень HTML-тэгов

Предыдущий workshop

<< Краткое введение в HTML - Таблицы

>> Ваше мнение

<< Вернуться к содержанию

Рассылка сайта:  
powered by Subscribe.ru

 

Расценки  |  Работы  |  Статьи  |  Workshops  |  Словарь  |  Об авторе  |  Контакт

© 2002-2009 bei valentin-m.de