HTML. Работа с формами

1. Форма – это элемент HTML, позволяющий передавать информацию на web-сервер, где информация будет обработана. С помощью форм организуются тесты, голосования, опросы. Заметим, что html-формы сами по себе позволяют только организовывать ввод информацию. Для обработки форм необходимо использовать языки программирования, для обработки на стороне клиента можно использовать, например, язык JavaScript, а на стороне сервера – например, PHP, Perl, C.

Форма задается тегами < form> < /form>. Все остальные элементы формы располагаются между этими тегами. Тег < form> может иметь несколько параметров:

· name - имя формы. Необходимо, если на странице несколько форм.

· action - определяет URL-адрес, по которому будет отправлена информация введеная пользователем.

· method - определяет способ отправки информации.

· target - указывает имя окна, в котором будут отображаться результаты обработки отправленной формы.

2. Рассмотрим элементы, располагающиеся в форме. Начнем с текстового поля. Оно задается тегом < input>. Пример использования.

Параметры тестового поля:

· name - имя элемента,

· type - тип элемента (в данном случае - text),

· size - размер текстового поля в символах, которые одновременно будут видны, при вводе большего количества символов, они будут прокручиваться,

· maxlength - максимальное количество символов, которое можно ввести в поле, если опустить этот параметр, то число символов будет неограниченным,

· value - текст, который будет отображаться (его можно стереть), при отсутствии этого параметра поле будет пустым.

· disabled - блокирует поле от любых изменений,

· readonly - делает поле доступным только для чтения.

Пример использования параметров.

3. Текстовое поле для ввода пароля. Представляет собой текстовое поле с тем отличием, что вводимый текст не отображается, вместо него появляются специальные символы, например звездочки. Используется при вводе паролей. От текстового поля отличается только параметром type=" password".

Пример.

3. Флажки. Начнем с примера.

Начало формы

Ваши любимые предметы:
Математика Литература Физическая культура

Конец формы

Флажки задаются тегом < input>, причем один тег задает один флажок. Поэтому чтобы задать три флажка, надо три раза писать input. Для задания указанного выбора необходимо задать следующий код. < form name=" forma1" >
Ваши любимые предметы: < br>
< input type=" checkbox" checked> Математика
< input type=" checkbox" > Литература
< input type=" checkbox" > Физическая культура
< /form>

Рассмотрим параметры тега < input>:

· type - тип элемента (в данном случае - checkbox),

· name - имя элемента, указывает программе обработчику формы, какой пункт выбрал пользователь,

· value - значение элемента, указывает программе обработчику формы значение пункта, который выбрал пользователь,

· checked - им обычно помечают наиболее вероятные для выбора пункты, пользователь щелчком мыши может выбрать другие пункты.

4. Переключатели. В отличии от флажков, здесь можно выбрать только один пункт. В связи с этим значения параметра name должны быть одинаковы для всех элементов группы. Параметр type=" radio", все остальные такие же, как у флажков.

Пример.

5. Кнопки. Существует четыре типа кнопок:

· submit - кнопка отправки содержимого формы web-серверу. Ее параметры:

· type=" submit" - тип кнопки,

· name - имя кнопки,

· value - надпись на кнопке.

· image - графическая кнопка отправки содержимого формы web-серверу. Для ее использования необходимо подготовить картинку кнопки, а потом использовать ее в виде кнопки. Ее параметры:

· type=" image" - тип графической кнопки,

· name - имя кнопки,

· src - адрес картинки для кнопки.

· reset - кнопка, позволяющая восстановить все значения по умолчанию в форме. Ее параметры:

· type=" reset" - тип кнопки очищения,

· name - имя кнопки,

· value - надпись на кнопке.

· button - произвольная кнопка, ее действия назначаются вами с использованием языков программирования, т.е. сама она делать ничего не умеет. Ее параметры:

· type=" button" - тип произвольной кнопки,

· name - имя кнопки,

· value - надпись на кнопке.

· onclick - обработчик события - указывает, что делать при щелчке по кнопке. Вообще, у этого типа кнопок есть и другие события (например, двойной щелчок), но здесь мы не будем их рассматривать.

Пример использования кнопок.

Кнопки можно задавать и при помощи тегов < button> < /button>. Возможности у таких кнопок несколько, они могут иметь содержимое в виде текста или картинки. Этот тег имеет следующие параметры:

· type - тип кнопки, может принимать значения:

· reset - кнопка очистки формы,

· submit - кнопка отправки данных,

· button - кнопка произвольного действия.

· name - имя кнопки,

· value - надпись на кнопке.