Переключатели (radiobutton)
Переключатели используют, когда необходимо выбрать один единственный вариант из предложенных. Если требуется выбор нескольких вариантов, для этого следует предпочесть флажки (checkbox).
Переключатели создаются следующим образом.
Параметры поля перечислены в таблице.
| Параметр | Описание |
|---|---|
| name | Имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать это поле. |
| value | Значение поля определяет, что будет отправлено на сервер. |
| checked | Устанавливает элемент выбранный по умолчанию. |
Имя поля (параметр name) для всех элементов группы должно быть одинаковым. Именно в этом случае браузер правильно помечает выбранные пункты (пример 1).
Пример 1. Использование переключателей
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Переключатели</title>
</head>
<body>
<form action="/cgi-bin/handler.cgi">
<p><b>Как по вашему мнению расшифровывается аббревиатура "ОС"?</b></p>
<p><input type="radio" name="answer" value="a1">Офицерский
состав</p>
<p><input type="radio" name="answer" value="a2">Операционная
система</p>
<p><input type="radio" name="answer" value="a3">Большой
полосатый мух</p>
</form>
</html>
В результате получим следующее (рис. 1).
Рис. 1. Вид переключателей
| Статья опубликована: 12.09.2005 | Последнее обновление: 30.03.2008 |
Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.
- Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
- Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
- Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
- Потренироваться в написании комментариев вы можете в песочнице.
Комментарии к статье
Paradisa
02.05.2008
JeФoks
13.05.2008
Paradisa
18.05.2008
sergiyko911
27.05.2008
var checked = new Image();
var unchecked = new Image();
checked.src = 'checked.gif';
unchecked.src = 'unchecked.gif';
function SwitchImage() {
if (document.getElementById('my_check').checked == true) {
document.getElementById('my_check').checked = false;
document['check_image'].src = unchecked.src;
} else {
document.getElementById('my_check').checked = true;
document['check_image'].src = checked.src;
}
}
--></script>
HTML:
<div style="display: none;">
<input type="checkbox" name="ch" id="my_check" value="1">
</div>
<img src="unchecked.gif" name="check_image" onClick="SwitchImage();">
Андрей
31.05.2008
Nook
19.07.2008
<input type="radio" name="answer" value="a2">Операционная система
<input type="radio" name="answer" value="a3">Большой полосатый мух
Nook
19.07.2008
у меня переключатели 1\2\3 при нажатии 1 переключателя валазило 1 форма при нажатии 2 вылазило 2 формы и т.д и чтобы без перезагрузки страници
Сергей
31.07.2008