Создание форм

Атрибут value

Подобно текстовым полям и текстовым областям, радио кнопки имеют связанные с вариантами выбора значения данных. Эти значения задаются явно с помощью атрибутов value, кодируемых для кнопок. Когда кнопка выбрана, ее конкретное значение ассоциируется с именем кнопки, то есть с именем, присвоенным всем кнопкам в группе. Рассмотрим следующий пример.

Рис. 11.13. Множество кнопок для выбора цвета

What is your favorite color?<br/>
<input type="radio" name="Color" value="Red"/>Red<br/>
<input type="radio" name="Color" value="Green"/>Green<br/>
<input type="radio" name="Color" value="Blue"/>Blue<br/>

Все кнопки имеют общее имя "Color", чтобы задать группу взаимно исключающих вариантов выбора. Выбор определенного цвета из группы задается значением, связанным с выбором. Поэтому, если пользователь щелкает на первой кнопке, будет выбран цвет "Red". Более точно, значение "Red" связывается с именем "Color" как указатель выбора.

Обычно для радио кнопок всегда необходимо кодировать атрибуты value. Таким способом кнопки получают значения, а сценарий браузера или серверная программа определяет, какая кнопка была выбрана. Не обязательно присваивать значение, которое совпадает с меткой кнопки. Часто для значений используются сокращенные коды, а выводятся более содержательные метки.

What is your favorite color?<br/>
<input type="radio" name="Color" value="R"/>Red<br/>
<input type="radio" name="Color" value="G"/>Green<br/>
<input type="radio" name="Color" value="B"/>Blue<br/>

Выбор одной из приведенных выше кнопок отправляет имя и значение Color=R, Color=G, или Color=B программе обработки, которая затем определяет, какое предпринять действие с полученным кодом значения.

Атрибут checked

Когда множество радио кнопок выводится первый раз, все кнопки выводятся выключенными, то есть, ни одна из них не выбрана и не подсвечена. Однако можно принудительно вывести одну из кнопок в группе включенной. Для этого используют атрибут checked="checked" в теге <input type="radio"/> кнопки, которая должна появиться включенной при загрузке страницы.

Рис. 11.14. Набор кнопок с первый заранее выбранной кнопкой

What is your favorite color?<br/>

<input type="radio" name="Color" value="R" checked="checked"/>Red<br/>
<input type="radio" name="Color" value="G"/>Green<br/>
<input type="radio" name="Color" value="B"/>Blue<br/>

Извлечение данных радио кнопки

Следующий пример демонстрирует использование радио кнопок для ввода данных. При выборе кнопки цвета и нажатии на кнопку "Submit" будет выводиться значение выбранной кнопки.

<!-- Сценарий браузера -->
<script type="text/javascript">
function Get_Color()
{
  var i
  var Button
  var Output

  for (i=1; i<=3; i++){
    Button = document.getElementById("Button" + i)
    if (Button.checked == true) {
      Output = document.getElementById("Output")
      Output.innerHTML = "<b>You selected: </b>" + Button.value
    }
  }
}
</script>

<!-- Код XHTML -->
<div>
What is your favorite color?<br/>
<input id="Button1" type="radio" name="Button" value="Red" checked="checked"/>Red<br/>
<input id="Button2" type="radio" name="Button" value="Green"/>Green<br/>
<input id="Button3" type="radio" name="Button" value="Blue"/>Blue<br/>
<input type="button" value="Submit" onclick="Get_Color()"/><br/>
<span id="Output" style="color:red"></span>
</div>

При нажатии кнопки "Submit" активируется локальная функция JavaScript с именем Get_Color(). Сценарий проверяет каждую из кнопок, чтобы выяснить, какая из них включена, и вывести значение этой кнопки.