Израиль - вчера, сегодня, завтра - главная страница
карта сайта  карта сайта   о проекте Мегаполис  кто мы   e-mail  почта  
Израиль - вчера, сегодня, завтра - Главная страница
 

   Главная Интернет WEB-учебник Описание HTML


Интернет клуб

Новая страница
Описание html

HTML-язык WWW
HTML документ
Заголовки
Списки
Параграфы
Символы
Цвет
Спецсимволы
Комментарии
Таблицы
Гиперссылки
Кадры
Спецэффекты
Формы
Поддиректории
Команды МЕТА
Листы стилей

Javascript
Java в примерах
Полезные сайты
Задайте вопрос
Web-учебник. Раздел 2. Описание html

Формы

Форма - это средство, позволяющее организовать в домашней странице диалог с ее пользователем.
Разработчик домашней страницы создает анкету с помощью специальных элементов:
- кнопки,
- списки,
- текстовые строки,
- текстовые поля.

При зтом разработчик указывает свою программу обработки результатов анкеты.

При чтении домашней страницы пользователь заполняет анкету, и, нажав на кнопку "submit" данной анкеты, отправляет ее содержимое программе обработки.

Программы обработки называются CGI-скриптами и разрабатываются на различных языках программирования.
А что, если Вы хотите организовать анкету, но писать программы Вы не умеете? Тогда можно отправить поток сообщений на Ваш почтовый адрес.

Формы передают информацию программе обработки в виде пар:
Имя поля - Значение поля.

Форма начинается командой <FORM> и заканчивается командой </FORM>.
Данная команда имеет 2 основных параметра: ACTION и METHOD.

Параметр ACTION является обязательным. Он указывает адрес обработчика формы (например, адрес программы обработки или почтовый адрес или просто адрес URL для перехода).

Параметр METHOD не является обязательным. Он принимает одно из двух значений: GET или POST , связанных с методом протокола передачи информации из анкеты.
По умолчанию, METHOD= GET .
Пример команды FORM:
<FORM ACTION=" http://www.geocities.com/SiliconValley/99999 " METHOD= POST >

Для задания управляющей кнопки запуска передачи данных надо записать следующую команду:
<INPUT TYPE= submit NAME=" botton1VALUE=" Произвольный текст ">
где:
INPUT - команда создания управляющего элемента.
TYPE - параметр, определяющий управляющий элемент.
submit - значение этого параметра (в данном случае: управляющая кнопка).
NAME - параметр, задающий имя переменной.
botton1 - имя переменной.
VALUE - параметр, задающий текст, отображаемый на управляющем элементе.
Произвольный текст - значение текста на управляющем элементе.

Данная кнопка имеет следующий вид:

Как мы уже отмечали выше, значением параметра ACTION может быть просто адрес для перехода.
Поэтому простейшая форма просто возвращает нас к началу данного раздела:
<FORM ACTION=" web2e.html"> <INPUT TYPE=SUBMIT VALUE=" Вернуться к началу раздела "></FORM>

Перед Вами эта кнопка, проверьте ее действие:


В данном случае нет необходимости применять параметр NAME так как данные никуда не передаются.
Обратите внимание: я сделал все кнопки возврата из разделов и кнопку перехода в мою домашнюю страницу (в начале головного раздела) по этому же принципу.

Ниже приводятся основные типы управляющих злементов INPUT.

1) Текстовая строка: TYPE=text

Определяет окно для ввода одной строки текста.
Пример:
<INPUT TYPE=text NAME=" text1 " SIZE= 30 VALUE=" Введите текст ">
В полученное окно

Вы можете ввести любой текст или оставить записанный начальный текст Введите текст без изменений.
При нажатии кнопки submit в программу обработки будет передано:
text1=Введите текст
(или другой, измененный текст).
Параметр SIZE задает размер окна в символах.
При необходимости ограничить длину текста N , применяйте дополнительный параметр:
MAXLENGTH= N .

2) Окно для ввода пароля: TYPE=password

Аналогичен типу text , но при вводе каждый символ заменяется символом *.
Пример. Надо ввести пароль длиной не более 5 символов.
<INPUT TYPE=password NAME= pass size= 10 maxlength= 5 >
Введите какое-слово в полученное окно.

Пусть Вы ввели слово Yakov. Тогда при нажатии на кнопку submit в программу обработки будет введено:
pass=Yakov

3) Текстовое окно: TEXTAREA

Задается в следующем виде:
<TEXTAREA NAME= text3 COLS= 30 ROWS= 5 WRAP=VIRTUAL>
.....
Первоначально заданный текст
.....
</TEXTAREA>
Параметр COLS задает количество символов в строке,
параметр ROWS задает количество строк в окне,
необязательный параметр WRAP=VIRTUAL задает линейку прокрутки.
Введите текст в данное окно:

4) Радиокнопка: TYPE=radio

Может быть задано несколько радиокнопок с одинаковым именем (т.е. значением параметра NAME), но они будут взаимоисключающими: может быть нажата (CHECKED) только одна из них.
Пример:
<INPUT TYPE=radio NAME= color VALUE=" Красная" checked> Красная
<INPUT TYPE=radio NAME= color VALUE=" Синяя"> Синяя
<INPUT TYPE=radio NAME= color VALUE=" Зеленая"> Зеленая

Красная
Синяя
Зеленая
Мы получили 3 кнопки, из них отмечена Красная. При нажатии на другую кнопку предыдущая освобождается.
Допустим, мы нажали Синюю кнопку.
Тогда при нажатии на кнопку submit в программу обработки будет введено:
color=Синяя

5) Помеченный квадрат: TYPE=checkbox

В отличие от радиокнопок, может быть несколько квадратов с одинаковыми именами.
Например, в следующем примере первоначально задана кнопка " Водка":
<INPUT TYPE=checkbox NAME= box VALUE=" Водка" checked> Водка
<INPUT TYPE=checkbox NAME= box VALUE=" Коньяк"> Коньяк
<INPUT TYPE=checkbox NAME= box VALUE=" Ликер"> Ликер

Водка
Коньяк
Ликер
Если Вы нажмете еще на кнопку " Коньяк", то при нажатии на кнопку submit в программу обработки будет введено:
box=Водка
box=Коньяк

6) Скрытый текст: TYPE=hidden

При отображении не виден пользователю.
Служит для прямой передачи служебной информации от домашней страницы обработчику формы, прозрачно для пользователя.
<INPUT TYPE=hidden NAME= Version VALUE=" 2.3 ">
Здесь приведен пример передачи информации о версии программы.
При нажатии на кнопку submit в программу обработки будет введено:
Version=2.3

7) Меню: SELECT

Пусть Вам предоставилась возможность выбрать одну из путевок в соответствии со следующим списком:
<SELECT NAME=" script ">
<OPTION VALUE=" tour1 "> Путевка в Сочи
<OPTION VALUE=" tour2 "> Путевка в Париж
<OPTION VALUE=" tour3 "> Путевка на Колыму
<OPTION VALUE=" tour4 "> Путевка в Рай
<OPTION VALUE=" tour5 "> Путевка в Ад(горящая)

 В "браузере" это выглядит следующим образом:

Если Вы выбрали Путевку в Париж, то при нажатии на кнопку submit в программу обработки будет введено:
script=tour2
Команда SELECT может содержать аттрибут MULTIPLE, при котором можно выбрать несколько элементов меню одновременно.
Высоту окна можно задать аттрибутом SIZE= N.
Если в строке OPTION задан аттрибут checked, то данный элемент задается по умолчанию.

8) Кнопка ввода: TYPE=submit

Это и есть та самая кнопка, о которой мы так часто вспоминали.
<INPUT TYPE=submit VALUE=" Ввод данных ">
Эта команда отображается следующим образом:

9) Кнопка отмены: TYPE=reset

Кнопка выполняет инициализацию начальными значениями всех полей.
<INPUT TYPE=reset VALUE=" Очистить поля ">
Эта команда отображается следующим образом:


  ©1996-2007   Megapolis Org   E-mail:   info@megapolis.org