double arrow

Элементы выбора в HTML-формах


Элементы выбора применяют для организации выбора пользователем предопределенного варианта, который может быть единственным или множественным. Для этого применяют флажки и радиокнопки, как атрибуты тега <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&nbsp;6.0</p>

<p><input type="checkbox" name="browser" value="Opera" /> Opera&nbsp;8.0</p>

<p><input type="checkbox" name="browser" value="FF" /> Mozilla Firefox&nbsp;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>Не нужно попадать в &laquo;десятку&raquo;</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. Форма с тематической группировкой пунктов

Заказать ✍️ написание учебной работы
Поможем с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой

Сейчас читают про: