Опубликован: 19.03.2007 | Уровень: для всех | Доступ: платный
Лекция 11:

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

Атрибут 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/>
Листинг 11.19. Код множества кнопок для выбора цвета

Все кнопки имеют общее имя "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/>
Листинг 11.20. Код для множества, создающий "кодированный" выбор цвета

Выбор одной из приведенных выше кнопок отправляет имя и значение 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/>
Листинг 11.21. Код для предварительного выбора кнопки

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

Следующий пример демонстрирует использование радио кнопок для ввода данных. При выборе кнопки цвета и нажатии на кнопку "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(). Сценарий проверяет каждую из кнопок, чтобы выяснить, какая из них включена, и вывести значение этой кнопки.

Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Владислав Нагорный
Владислав Нагорный

Подскажите, пожалуйста, планируете ли вы возобновление программ высшего образования? Если да, есть ли какие-то примерные сроки?

Спасибо!