Формы на веб-страницах


Для того чтобы посетители сайта могли не только просматривать информацию, но и отправлять сведения его администраторам, на страницах сайта размещают специальные элементы, которые называются b>формами (form) и напоминают заполняемый человеком некоторый бланк или некоторую анкету. Формы включают в себя элеметы управления различных типов: текстовые поля, раскрывающиея ("выдвижные") списки, флажки. переключатели и т.д.

Вся форма заключается в контейнер <form></form>.. Чтобы воспринимать необходимые данные от посетителя страницы, нужно разместить в форме текстовые поля для ввода информации.

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

Текстовые поля создаются с помощью тэга <input> со значение атрибута type="text". Атрибут name является обязательным и служит для идентификации полученной информации. Значением атрибута size является число, задающее длину поля ввода в символах.

Для того, чтобы данные анкеты хорошо "читались", необходимо разделить строки с помощью тэга перевода строки <BR>.


Пример:

<form>

Пожалуйста, введите ваше имя:

<br>

<input type="text" name="imja" size="30">

<br>

Введите адрес вашей электронной почты:

<input type="text" name="e-mail" size="30">

<br>

</form>

В окне браузера появится такое отображение:

Пожалуйста, введите ваше имя:


Введите адрес вашей электронной почты:

Переключатели

Группы переключателей ("радиокнопок") создаются с помощью тэга <input> со значение атрибута type="radio". Все элементы в группе должны иметь одинаковые значения атрибута name, например name=="group". Еще одним обязательным атрибутом является value, его значение должно быть уникальным для каждой "радиокнопки", так как при ее выборе именно оно передается в сервер. В группе радиокнопок только одна из них может находиться а активном ("включенном") состоянии. Радиокнопка, включаемая при загрузке страницы, должна иметь атрибут checked="checked".


Пример:

<br>

<input type="radio" name="group" value="Школьние"> Школьник

<br>

<input type="radio" name="group" value="Студент"> Студент

<br>

<nput type="radio" name="group" value="Учитель"> Учитель

<br>

В окне браузера появится такое отображение:


Школьник
Студент
Учитель

Флажки

Если необходимо из предложенного перечня выбирать одновременно несколько вариатов, то возможные варианты отмечают флажками.

Флажки создаются с помощью тэга <input> со значение атрибута type="checkbox". Флажки, объединенные в группу, могут иметь различные значения атрибута name, например name="box1", name="box2".

Еще одним обязательным атрибутом является value, его значение должно быть одинаковым для всех флажков в группе, так как при выборе любого флажка именно оно передается в сервер. В группе могут быть активными ("включенными") несколько флажков. Флажки, включаемые при загрузке страницы, должны иметь атрибут checked="checked".


Пример:
Какие из серверов Интернета вы используете наиболее часто:

<br>

<input type="checkbox" name="box1" value="Яндекс"> Яндекс

<br>

<input type="checkbox" name="box2" value="Mail"> Mail

<br>

<input type="checkbox" name="box3" value="Aport"> Aport

<Br>

В окне браузера появится такое отображение:

Какие из серверов Интернета вы используете наиболее часто:
Яндекс
Mail
Aport

Выдвижные списки

Для реализации выдвижного списка используется контейнер <select> </select>, в котором каждый элемент списка определяется тэгом <option> . В выдвижном списке выбираемый по умолчанию элемент задается с помощью атрибута selected="selected".


Пример:
Какой браузер вы используете наиболее часто:

<select name="Браузер" >

<option selected="selected"> Internet Explorer

<option> Google Chrome

<option> Mozilla

<option> Opera

</select>

<BR>

В окне браузера появится такое отображение:

Какой браузер вы используете наиболее часто:


Текстовая область

Текстовая область создается с помощью тэга <textarea> с обязательными атрибутами: name, задающим имя области, rows, определяющим число строк, и cols- число столбцов области в символах.


Пример:
Какую информацию вы хотели бы видеть на сайте?

<br>

<textarea name="Предложения" rows="5" cols="30">

</textarea>

<br>

В окне браузера появится такое отображение:

Какую информацию вы хотели бы видеть на сайте?