2015-10-16
9347
Элементы выбора применяют для организации выбора пользователем предопределенного варианта, который может быть единственным или множественным. Для этого применяют флажки и радиокнопки, как атрибуты тега <input>:
· checkbox – флажок;
· radio – радиокнопка.
Эти элементы редко используются поодиночке, а, как правило, включаются в группы. Группа идентифицируется одинаковым значением атрибута name во всех тегах <input>, образующих группу. Список возможных значений выбора идентифицируется атрибутами value. Атрибут checked определяет кнопку активной по умолчанию. Следующий пример демонстрирует применение группы радиокнопок.
Пример 14. Выбор с применением радиокнопок.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head> <title>Переключатели</title></head>
<body>
<form action="">
<p>Каким браузером вы предпочитаете пользоваться?</p>
<p><input type="radio" name="browser" value="IE" checked="checked" /> Microsoft Internet Explorer</p>
|
|
|
<p><input type="radio" name="browser" value="Opera" /> Opera</p>
<p><input type="radio" name="browser" value="FF" /> Mozilla Firefox</p>
<p>Какая операционная система вам более всего по душе?</p>
<p><input type="radio" name="system" value="Windows" checked="checked" /> Microsoft Windows</p>
<p><input type="radio" name="system" value="MacOS" /> MacOS</p>
<p><input type="radio" name="system" value="Linux" /> Linux</p>
<p><input type="submit" value="Проголосовать" /></p>
</form>
</body>
</html>
Рисунок 17. Форма с двумя группами радиокнопок
Форма допускает единственный выбор в каждой из групп переключателей. Обработчик через URL получает следующую информацию:
?browser=IE&system=Windows
определяющую выбор пользователя. При этом значению атрибута name="brouser" присваивается значение соответствующего выбранного атрибута value="IE", а значению атрибута name="system" присваивается значение соответствующего выбранного атрибута value="Windows".
Аналогичным образом группируются флажки, позволяющие пользователям выбрать несколько вариантов из имеющихся. Соответствующий пример их применения описан ниже.
Пример 15. Выбор с применением флажков.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>Флажки</title>
</head>
<body>
<form action="">
<p>Какие браузеры, на ваш взгляд, хорошо справляются с поддержкой CSS2?</p>
<p><input type="checkbox" name="browser" value="IE" /> Microsoft Internet Explorer 6.0</p>
<p><input type="checkbox" name="browser" value="Opera" /> Opera 8.0</p>
|
|
|
<p><input type="checkbox" name="browser" value="FF" /> Mozilla Firefox 1.0</p>
<p><input type="submit" value="Поделиться мнением" /></p>
</form>
</body>
</html>
Рисунок 18. Форма с группой флажков
Свойства тега <input> могут быть дополнены применением атрибут reset, который является кнопкой для очистки полей формы. Сопутствующим ему является атрибут value, значение которого определяет надпись на кнопке.
Для облегчения позиционирования выбора пользователя в форму можно ввести надпись для каждой радиокнопки и каждого флажка. Для выбора тогда достаточно щелкнуть мышью по этой надписи. Текст надписи поставляет контейнер <label>, который привязывает надпись к элементу выбора, используя атрибут for. Следующий пример демонстрирует подобный эффект.
Пример 16. Применение меток к элементам выбора.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>Не нужно попадать в «десятку»</title>
</head>
<body>
<form action="">
<p>Каким браузером вы предпочитаете пользоваться?</p>
<p><input type="radio" name="browser" id="choice1" value="IE" /> <label for="choice1">Microsoft Internet Explorer</label></p>
<p><input type="radio" name="browser" id="choice2" value="Opera" /> <label for="choice2">Opera</label></p>
<p><input type="radio" name="browser" id="choice3" value="FF" /> <label for="choice3">Mozilla Firefox</label></p>
<p><input type="radio" name="browser" id="choice4" value="all-one" checked="checked" /> <label for="choice4">Мне все равно</label></p>
<p><input type="submit" value="Проголосовать" />
<input type="reset" value="Очистить форму" />
</p>
</form>
</body>
</html>
Рисунок 19. Форма с дополнительными свойствами
Еще одним элементом разметки для выбора пользователя является тег <select>. По умолчанию он задает список единственного выбора. Умолчание заканчивается, если в тег включен булев атрибут multiple. В этом случае сопутствующий атрибут site должен указывать число строк списка, одновременно отображающихся в окне браузера. Позиции списка описываются контейнером <option>. В старт-теге этого контейнера рекомендуется использовать атрибут value для идентификации выбора пользователя. При организации групп выбора применяется атрибут name, идентифицирующий группу. В следующем примере демонстрируется применение тега <select> для множественного выбора. Применяйте клавишу ctrl при выборе.
Пример 17. Формирование списков множественного выбора.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>Список множественного выбора</title>
</head>
<body>
<form action="">
<p>Какими браузерами вам приходилось пользоваться?</p>
<p>
<select name="browser" multiple="multiple" size="8">
<option value="1">Microsoft Internet Explorer 7.0</option>
<option value="2">Microsoft Internet Explorer 6.0</option>
<option value="3">Microsoft Internet Explorer 5.x</option>
<option value="4">Opera 8.0</option>
<option value="5">Opera 7.x</option>
<option value="6">Opera 6.x</option>
<option value="7">Opera 5.x</option>
<option value="8">Mozilla Firefox 1.0</option>
</select>
</p>
<p><input type="submit" value="Поделиться опытом" /></p>
</form>
</body>
</html>
Рисунок 18. Форма множественного выбора
После нажатия на кнопку Поделиться опытом браузер включает в URL результат выбора пользователя:?browser=1&browser=4.
Включение в контейнер <select> контейнера <optgroup> позволяет формировать пункты списков единственного и множественного выбора. Название тематической категории при этом задается атрибутом label в старт-теге <optgroup>. Пример 18 демонстрирует эту возможность.
|
|
|
Пример 18. Формирование тематической группировки пунктов.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head> <title>Иерархический список</title></head>
<body>
<form action=""> <p>Какими браузерами вам приходилось пользоваться?</p>
<p>
<select name="browser" multiple="multiple" size="10">
<optgroup label="Microsoft Internet Explorer">
<option value="1">7.0</option> <option value="2">6.0</option>
<option value="3">5.x</option>
</optgroup>
<optgroup label="Opera">
<option value="4">8.0</option>
<option value="5">7.x</option>
<option value="6">6.x</option>
<option value="7">5.x</option>
</optgroup>
<option value="8">Mozilla Firefox 1.0</option>
</select>
</p>
<p><input type="submit" value="Проголосовать" /></p>
</form>
</body>
</html>
Рисунок 19. Форма с тематической группировкой пунктов
