Всё для Web Дизайнера - html: введение в язык Html, создание заголовков, создание списков, форматирование параграфов, вывод текста в несколько столбцов, форматирование символов, управление цветом, вставка специальных символов, комментарии, таблицы, гипертекстовые ссылки, frame(кадры), специальные эффекты, структура Html документа, формы, мета теги.

Программирование

Web мастеру

3D Графика и анимация

Назад Читать дальше
На главную страницу > > В раздел программирование > > В раздел Html

Формы.

Форма - это средство, позволяющее организовать на странице диалог с ее пользователем. Разработчик страницы создает своеобразную анкету с помощью специальных элементов:
- кнопки,
- списки,
- текстовые строки,
- текстовые поля.
При зтом разработчик указывает свою программу обработки результатов анкеты. При чтении домашней страницы пользователь заполняет анкету, и, нажав на кнопку "SUBMIT" данной анкеты, отправляет ее содержимое программе обработки, которая называется CGI-скриптом и разрабатываются на различных языках программирования. А что, если Вы хотите организовать анкету, но писать программы Вы не умеете? Тогда можно отправить поток сообщений на Ваш почтовый адрес.
Формы передают информацию программе обработки в виде пар: Имя поля - Значение поля.

Форма начинается командой <FORM> и заканчивается командой </FORM>. Данная команда имеет 2 основных атрибута: ACTION и METHOD. Атрибут ACTION является обязательным, он указывает адрес обработчика формы (например, адрес программы обработки или почтовый адрес или просто адрес URL для перехода). Атрибут METHOD не является обязательным, он принимает одно из двух значений: GET или POST, связанных с методом протокола передачи информации из анкеты. По умолчанию, METHOD=GET.
Внимание !!! Чтобы Вы могли получать послания на русском языке необходимо также вставить атрибут ENCTYPE=text/plain !!!

Пример команды FORM:
<FORM ACTION="mailto:heruch@mail.ru" METHOD=POST ENCTYPE=text/plain>
Для задания управляющей кнопки запуска передачи данных надо записать следующую команду:
<INPUT TYPE=SUBMIT NAME="botton1" VALUE="Произвольный текст">, где:
INPUT - команда создания управляющего элемента,
TYPE - атрибут, определяющий управляющий элемент,
SUBMIT - значение этого атрибута (в данном случае: управляющая кнопка),
NAME - атрибут, задающий имя переменной,
botton1 - имя переменной,
VALUE - атрибут, задающий текст, отображаемый на управляющем элементе,
Произвольный текст - значение текста на управляющем элементе.
Данная кнопка имеет следующий вид:
Как мы уже отмечали выше, значением атрибута ACTION может быть просто адрес для перехода. Поэтому простейшая форма просто возвращает нас к началу данного файла:
<FORM ACTION="15.htm"><INPUT TYPE=SUBMIT VALUE="Вернуться к началу"></FORM>
Перед Вами эта кнопка, проверьте ее действие:
В данном случае нет необходимости применять атрибут NAME так как данные никуда не передаются.

Ниже приводятся основные типы управляющих злементов INPUT.
I. Текстовая строка: TYPE=TEXT.
Определяет окно для ввода одной строки текста. Пример:
<INPUT TYPE=TEXT NAME="text1" SIZE=30 VALUE="Введите текст">
В полученное окно:
Вы можете ввести любой текст или оставить записанный начальный текст. При нажатии кнопки SUBMIT в программу обработки будет передано: text1=Введите текст (или другой, измененный текст).
Атрибут SIZE задает размер окна в символах.
При необходимости ограничить длину текста, применяйте дополнительный атрибут: MAXLENGTH=N, где N - это максимальное число символов в данной форме.

II. Окно для ввода пароля: TYPE=PASSWORD.

Аналогичен типу TEXT, но при вводе каждый символ заменяется на *. Пример: Надо ввести пароль длиной не более 5 символов.
<INPUT TYPE=PASSWORD NAME="pass" SIZE=10 MAXLENGHT=5>

Попробуйте в действии данную форму:
III. Текстовое окно: TEXTAREA
Задается в следующем виде:
<TEXTAREA NAME= text3 COLS= 30 ROWS= 5 WRAP=VIRTUAL>
...
Первоначально заданный текст
...
</TEXTAREA>
Атрибут COLS задает количество символов в строке, атрибут ROWS задает количество строк в окне, необязательный атрибут WRAP=VIRTUAL задает линейку прокрутки.
Введите текст в данное окно:
... Первоначально заданный текст ...
IV. Радиокнопка: 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=Синяя.

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

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

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

VII. Меню: SELECT.
Пусть Вам предоставилась возможность выбрать одну из путевок в соответствии со следующим списком:
<SELECT NAME="TOUR">
<OPTION VALUE="tour1">Путевка в Сочи <OPTION VALUE="tour2">Путевка в Париж <OPTION VALUE="tour3">Путевка на Колыму </SELECT>

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

IIIX. Кнопка ввода: TYPE=SUBMIT.
Это и есть та самая кнопка, о которой мы так часто вспоминали.
<INPUT TYPE=SUBMIT VALUE="Ввод данных">

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

Назад Читать дальше

На главную страницу > > В раздел программирование > > В раздел Html