Создание Формы в Html

Создание Формы в Html

Если вы собираетесь создавать только статичные интернет страницы, то формы вам не нужны. Они понадобятся вам для обратной связи с посетителем: для того чтобы пользователь набирал в полях ввода свое имя и пароль, выбирал в списках интересующие его разделы и т.п. Важно понимать, что, заполняя поля ввода, нажимая кнопки на html-странице, мы передаем серверу значения переменных.. Сейчас мы познакомимся только с конструкциями, которые строят формы. Любая форма на html-странице имеет следующий вид:

<form method="…" action="…">
элемент формы
элемент формы
</form>

Элементами формы могут быть поля ввода, списки, переключатели, кнопки и др.
Тег формы имеет два обязательных параметра action и method:

action="…" задает адрес сервера, адрес интернет страницы, куда перенаправляются данные пользователя.

method="…" задает способ передачи данных на сервер. Параметр может принять два значения GET и POST. каждый имеет свои особенности. Чтобы понять их, предположим, что наша форма служит для регистрации пользователя, и нам нужно передать серверу http://www.server.ru две переменные login и password. Если выбран метод GET, то в строке адреса браузера мы увидим

http://www.server.ru?login=ivan&password=123.

Проанализировав строку можно заметить:

• все данные из формы приводятся к одному виду: имя переменной = ее значение
• все переменные располагаются в строке адреса за символом «?»
• переменные отделяются друг от друга символом амперсанта «&»

Метод GET идеально подходит для отладки сценария, но имеет ряд ограничений. Во-первых, им нельзя передавать секретные данные, например пароли. Они видны в строке адреса. Во-вторых, длина адреса не может превышать 256 символов, поэтому большой объем данных методом GET нам передать не удастся.

Метод POST лишен этих недостатков, вы можете передавать любой объем данных, они отправляются в отдельном «невидимом» потоке.

Теперь рассмотрим распространенные элементы формы:

<input type="text" name="name"> - тег для построения поля ввода. Все параметры – обязательны: type="text" сообщает, что это именно текстовое поле, name="…" задает имя переменной, в которую будет заноситься вводимый текст.

<textarea name="info" rows="3" cols="25"> - задает многострочное поле для ввода больших объемов текстовой информации. Параметры rows и cols задают размер текстового поля (количество строк и количество текстовых символов в строке). Если текст посетителя превысит размеры поля, автоматически появится вертикальная полоса прокрутки.

<select name="age">
<option value="1">значение 1</option>
<option value="2">значение 2</option>
…
</select>

Эта конструкция создает список с выбором значений. Количество значений списка может быть произвольным. Если у тега option отсутствует параметр value, то переменной age (в примере, список имеет такое имя) будет присвоено текстовое значение «значение 1». Это не всегда удобно, правильнее присвоить числовое значение 1, это решит многие сложности при дальнейшей обработке значений в программном коде.

<input name="…" type="radio" value="…"> Тег для вставки «радиокнопки» набора переключателей, среди которых выбранным может быть только один. Название «радиокнопка» пошло от старинных радиоприемников с кнопками выбора радиоволны. В каждый конкретный момент могла быть нажата только одна из кнопок. Весь набор радиокнопок должен иметь одинаковое имя (значение параметра name="…") и различные значения параметра value="…".

<input type="checkbox" name="…" value="…"> В отличие от «радиокнопок» набор переключателей типа checkbox могут выбираться посетителем в произвольном порядке, количестве.

Нам осталось рассмотреть теги, создающие кнопки.

<input type="submit" value="отправить"> Добавив этот тег, вы увидите на экране кнопку, на которой написано «отправить» (параметр value). При щелчке на нее данные формы собираются и перенаправляются на сервер, с параметрами, указанными в теге <form>.