Вторник, 01.07.2025, 02:32

Меню сайта

Это интересно

Реклама от LiveCLiX

Добавление формы на страницу

Для указания браузеру где начинается и заканчивается форма, используется тег FORM. Между открывающим и закрывающим тегами <form> и </form> можно помещать любые необходимые теги HTML. Это позволяет добавить элементы формы в ячейки таблицы для их форматирования, а также использовать изображения. Документ может содержать несколько форм, но они не должны быть вложены одна в другую.

Пример 1. Добавление формы в документ

<html>
<body>

<form>
  Здесь размещаются элементы формы
</form>

</body>
</html>

Любая форма содержит несколько параметров:

1. Элементы формы, которые представляют собой стандартные поля для ввода информации;
2. Кнопку отправки данных формы на сервер;
3. Адрес программы на веб-сервере, которая будет обрабатывать содержимое данных формы.

Чтобы указать браузеру куда и как отправлять данные формы используется два параметра:

Action - адрес CGI-программы, которая принимает данные формы.

Method - метод пересылки данных, содержащихся в форме, от браузера к веб-серверу. Может принимать два значения:GET и POST.

При использовании метода GET данные формы пересылаются в составе URL-запроса и перечисляются после символа вопроса (?). Например, строка запроса может иметь следующий вид: 
http://www.htmlbook.ru/cgi-bin/program.cgi?name=Vasya&lastname=Pupkin

При методе POST данные передаются на веб-сервер в теле запроса, после чего передаются сервером в программу через стандартный ввод.

Пример 2. Форма с указанием параметров Action и Method

<html>
<body>

<form action="/cgi-bin/program.cgi" method=POST>
  Здесь размещаются элементы формы
</form>

</body>
</html>

Метод GET используется браузерами по умолчанию, поэтому при выборе метода отправки данных на сервер, параметрmethod=GET можно опустить.

Элементы форм

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

В таблице представлены основные элементы с их параметрами и примерами.

ПараметрОписаниеПример
Текстовое поле
size=...Ширина поля.
maxlength=...Максимальное количество символов разрешенных в тексте.
name=...Имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать это поле.
value=...Начальный текст содержащий в поле.
Многострочный текст
name=...Имя поля.
cols=...Количество столбцов текста.
rows=...Число строк текста.
value=...Значение поля определяет, что будет отправлено на сервер.
wrap=...Параметры переноса строк. Возможные значения:
off - отключает перенос строк;
virtuals - показывает переносы строк, но отправляет текст как он введен;
physical - переносы строк вставляются где указано и в таком виде текст отправляется.
Пароль
name=...Имя поля.
value=...Значение поля определяет, что будет отправлено на сервер.
Кнопка
name=...Имя поля.
value=...Значение поля определяет, что будет отправлено на сервере.
Кнопка SUBMIT
name=...Имя поля.
value=...Значение поля определяет, что будет отправлено на сервер.
Кнопка RESET
name=...Имя поля.
value=...Значение поля определяет, что будет отправлено на сервер.
Флажки (checkbox)
name=...Имя поля.
value=...Значение поля определяет, что будет отправлено на сервер при поставленной галочке.
checkedЕсли этот параметр стоит, то галочка в поле будет добавлена автоматически.
Переключатели (radiobutton)
name=...Имя поля.
value=...Значение поля определяет, что будет отправлено на сервер при поставленной галочке.
Поле со списком
Option
name=...Имя поля.
size=...Значение поля определяет, что будет отправлено на сервер при поставленной галочке.
multipleЭтот параметр позволяет выбрать одновременно несколько строк
Select
selectedВидимое поле по умолчанию.
value=...Значение определяет, что будет отправлено на сервер при выбранном пункте списка.
Кнопка с изображением

name=...Имя поля.
src=...URL картинки.

 

Элементы форм: Текстовое поле

Текстовое поле

Создает элемент для ввода пользователем строки текста.

<input type=text параметры>

Параметры поля перечислены в таблице.

ПараметрОписание
size=...Ширина поля.
maxlength=...Максимальное количество символов разрешенных в тексте. Если этот параметр опустить, то можно вводить строку длинее самого поля.
name=...Имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать это поле.
value=...Начальный текст содержащий в поле.
align=...Выравнивание поля. Возможные значения: top, middle, bottom, right, left, texttop, baseline, absmiddle, absbottom. 

Пример 1. Текстовое поле

<html>
<head>
<body>

<form action="/cgi-bin/handler.cgi">
<b>Как ваше имя?</b><br>
<input type=text maxlength=25 size=20>
</form>

</body>
</html>

В результате получим следующее.

Как ваше имя?

Поле для пароля

Поле для пароля это обычное текстовое поле, но отличается тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.

<input type=password параметры>

Параметры совпадают с предыдущим элементом.

Пример 1. Текстовое поле

<form action="/cgi-bin/handler.cgi">
<b>Логин:</b> <input type=text maxlength=25 size=20 name="text"><br>
<b>Пароль:</b> <input type=password maxlength=15 size=20 name="pass">
</form>


Логин:
Пароль:

Хотя вводимый текст и не показывается, на сервер это поле передается в открытом виде, без шифрования. Поэтому это поле не обеспечивает безопасность данных и их можно перехватить.

Многострочный текст

Создает поле для ввода нескольких строк текста.

<textarea параметры>
текст
</textarea>

Между тегами <textarea> и </textarea> можно поместить любой текст, который будет отображаться при загрузке поля.

Параметры поля перечислены в таблице.

ПараметрОписание
name=...

Имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать это поле.

cols=...Количество столбцов текста.
rows=...Число строк текста.
value=...Значение поля определяет, что будет отправлено на сервер.
wrap=...Параметры переноса строк. Возможные значения:
off - отключает перенос строк;
virtuals - показывает переносы строк, но отправляет текст как он введен;
physical - переносы строк вставляются где указано и в таком виде текст отправляется.

Пример 3. Многострочный текст

<html>
<head>
<body>

<form action="/cgi-bin/handler.cgi">
<b>Введите ваш отзыв:</b><br>
<textarea rows=10 cols=45></textarea>
</form>

</body>
</html>

В результате получим следующее.

Введите ваш отзыв:

Элементы форм: Кнопки

Кнопка это элемент интерфейса, на который нужно нажимать. Создается следующим образом.

<input type=button параметры>

Параметры кнопки перечислены в таблице.

ПараметрОписание
name=...

Имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать это поле. Параметр name может быть опущен, в этом случае значение кнопки не передается на сервер.

value=...Надпись на кнопке, а также
align=...Выравнивание поля. Возможные значения: top, middle, bottom, right, left, texttop, baseline, absmiddle, absbottom. Результат их использования точно такой же, как и у 

Пример 1. Создание кнопки

<form action="/cgi-bin/handler.cgi">
<p align=center><input type=button name=press value="  Нажми меня нежно  ">
</form>


В надписи на кнопке можно ставить пробелы в любом количестве.

Кнопка SUBMIT

Когда пользователь нажимает на эту кнопку, данные формы отправляются на сервер и обрабатываются программой, указанной параметром action тега FORM.

<input type=submit параметры>

Параметры те же, что и у простых кнопок.

Пример 2. Кнопка Submit

<form action="/cgi-bin/handler.cgi">
<p align=center><input type=submit>
</form>


Параметр name для этого типа кнопки может быть опущен. Если значение параметра value не указывать, автоматически появится надпись Submit (для IE) или Submit Query (для Netscape).

Кнопка RESET

При нажатии на эту кнопку, данные формы возвращаются в первоначальное значение.

<input type=reset параметры>

Параметры совпадают с параметрами простых кнопок.

Пример 3. Кнопка Reset

<form action="/cgi-bin/handler.cgi">
<input type=text width=20> <input type=reset>
</form>


Значение кнопки Reset никогда не пересылается на сервер.

 Заработок в Интернете

Поиск
Создать бесплатный сайт с uCoz