3.1.4.Элемент select .. Option
Элемент <select> позволяет создать элемент формы в виде раскрывающегося списка, а также список с одним или множественным выбором. Конечный вид зависит от использования атрибута size тега <select>, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге <option>, а также может изменяться с помощью стилей. Каждый пункт создается с помощью тега <option>, который должен быть вложен в контейнер<select>. Имеет следующие атрибуты:
multiple - дает возможность выбора нескольких пунктов меню при удержании клавиши Ctrl. По умолчанию можно выбрать только один пункт меню.
name - определяет имя меню, уникальное для данной формы, которое будет использоваться при передаче данных на сервер. Каждый выбранный пункт меню при передаче на сервер будет иметь вид: name/value. Значение (value) формируется элементом OPTION.
size - определяет количество видимых пунктов в меню. Если значение этого атрибута больше единицы, то результатом будет список пунктов.
Элемент <option> описывает отдельные пункты меню и используется только с элементом SELECT. Не имеет конечного тега. Имеет следующие атрибуты:
selected - Определяет пункт меню, который будет выбран изначально при загрузке документа. Если меню имеет тип "один из многих", то флагом SELECTED может быть помечен лишь один пунктов меню.
value - Задает данному пункту значение, которое будет использовано наряду с другими сведениями о содержимом заполненной формы. При предоставлении информации на сервер это значение будет объединено со значением атрибута NAME в элементе SELECT.
3.2.Пример реализации формы
Ниже приведен HTML-код и внешний вид формы, использующей все основные элементы управления:
<html>
<head>
<title>Пример реализации HTML-формы</title>
</head>
<body>
<b>Заполните поля для регистрации:</b>
<form name="registration" method="get" action="http://mysite.faraway.com">
ФИО:<br>
<input name="username" type="text" size="20" maxlength="40"><br>
Логин:<br>
<input name="login" type="text" size="20" maxlength="40"><br>
Пароль:<br>
<input name="login" type="password" size="20" maxlength="40"><br>
Род занятий:<br>
<input type="radio" name="status" value="student" checked>Студент<br>
<input type="radio" name="status" value="pupil">Школьник<br>
<input type="radio" name="status" value="employee">Служащий<br>
<input type="radio" name="status" value="worker">Рабочий<br>
<input type="radio" name="status" value="pensioner">Пенсионер<br>
Регион:<br>
<select name="region" size="1">
<option value="0">Москва
<option value="1" selected>Югра
<option value="2">Тюменская область
<option value="3">Другой регион
</select><br>
Несколько слов о себе:<br>
<textarea name="about_you" rows="5" cols="30"></textarea><br>
Я согласен с правилами регистрации:<input type="checkbox" name="confirm"><br>
<input type="submit" value="Зарегистрироваться">
</form>
</body>
</html>
Данная форма будет довольно бесполезной – при нажатии на кнопку «Зарегистрироваться» браузер произведет переход по адресу http://mysite.faraway.com, указанному в свойстве action формы. Поскольку данный URI является фиктивным, то браузер выдаст сообщение об ошибке.
Особенностью этого процесса является то, что строка запроса URI http://mysite.faraway.com, сформированная в результате нажатия на кнопку submit, будет содержать введенные пользователем в форме значения в виде строки запроса. При этом в строке запроса URI будет отделен от параметров символом «?», параметр от параметра отделен символом «&», а каждый параметр будет иметь формат «имя=значение». Например, для вышеприведенной формы:
http://mysite.faraway.com/?username=%D0%9A%D1%83%D0%B7%D0%B8%D0%BD+%D0%94%D0%BC%D0%B8%D1%82%D1%80%D0%B8%D0%B9+%D0%90%D0%BB%D0%B5%D0%BA%D1%81%D0%B0%D0%BD%D0%B4%D1%80%D0%BE%D0%B2%D0%B8%D1%87&login=repby&login=&status=student®ion=1&about_you=%D0%9F%D1%80%D0%B5%D0%BF%D0%BE%D0%B4%D0%B0%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D1%8C+%D0%A1%D1%83%D1%80%D0%93%D0%A3&confirm=on
Такой вид записи является стандартным и носит название CGI интерфейса (Common Gateway Interface). При этом символы, отличные от печатных ANSI, записываются в формате %NN, где NN — это шестнадцатиричный код символа. К примеру, пробел будет записан как %20, а символ % — как %25. Так как кириллические символы не входят в набор печатных ANSI символов, то в HTTP заголовках они тоже заменяются подобным образом.
Данный принцип лежит в основе передачи информации от браузера к веб-серверу. После получения параметры и значения должны быть обработаны сервером (серверным сценарием, URI которого указан в атрибуте action формы).