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

Флажки

Флажки, как и радио кнопки, предоставляют пользователю возможность выбора. Однако в случае ряда флажков варианты выбора не являются взаимно исключающими, пользователь может выбирать один или несколько вариантов. Для отмеченных флажков в боксе появляется значок "галочки". Невыбранные флажки остаются пустыми. Множество флажков показано ниже.

Рис. 11.15. Множество флажков

Тег <input type="checkbox"/>

Общий формат кодирования флажка похож на формат для радио кнопки. Для каждого флажка требуется тег <input type="checkbox"/>.

<input type="checkbox"
  id="id"
  name="name"
  value="text"
  checked="checked"
/>

Тег <input type="checkbox"/> только выводит флажок. Если нужно задать для флажка метку, необходимо добавить текст перед или после тега, чтобы вывести его слева или справа от флажка.

Атрибут id

Для флажка можно задать атрибут id, если необходимо идентифицировать его для обработки в сценарии, обычно в сценарии браузера. Иначе id не требуется.

Атрибут name

Флажкам можно задавать имена с помощью атрибута name, так что выбранные значения могут быть связаны именами для обработки сценарием на сервере. Как и в случае радио кнопок, все флажки в группе могут иметь одно имя. Однако, в отличие от радио кнопок, общее имя не делает варианты выбора взаимно исключающими. Имя просто получает больше одного значения, если выбрано больше одного флажка. Это создает некоторые особенности при обработке, но делать это допустимо. Лучшим решением является задание для флажков различных имен. Каждое имя затем связывается с различным значением, независимо от числа поставленных пользователем флажков. Если множество флажков включено только в обработку браузером, то для флажков можно кодировать значения id, а не name.

Атрибут value

Аналогично случаю радио кнопки, значение, связанное с флажком, задается в атрибуте флажка value. Когда форму отправляют для обработки на сервер, значение связывается с именем определенного флажка. Для обработки в браузере значение связывается с id флажка. Значения не обязаны совпадать с метками. Обычно для значений применяют сокращенные коды, а более описательный текст используется для меток.

Атрибут checked

Флажки могут быть заданы заранее с помощью атрибута checked="checked", задаваемого для любого желаемого количества различных флажков. Различные настройки флажков приведены ниже для множества, показанного выше на рисунке 11.15. В этом примере всем флажкам присвоены различные имена, чтобы их можно было различать во время обработки на сервере. Никакие флажки не заданы заранее. Никакие значения id не заданы, так как эти флажки обрабатываются сценарием на сервере, а не сценарием браузера.

What are your favorite colors?<br/>
<input type="checkbox" name="Color1" value="R"/>Red<br/>
<input type="checkbox" name="Color2" value="G"/>Green<br/>
<input type="checkbox" name="Color3" value="B"/>Blue<br/>
<input type="checkbox" name="Color4" value="Y"/>Yellow<br/>
<input type="checkbox" name="Color5" value="M"/>Maroon<br/>
<input type="checkbox" name="Color6" value="P"/>Purple<br/>
<input type="checkbox" name="Color7" value="A"/>Aqua<br/>
<input type="checkbox" name="Color8" value="T"/>Teal<br/>

Извлечение данных из флажков

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

<!-- Сценарий браузера -->
<script type="text/javascript">
function Get_Colors()
{
  var i
  var Checkbox
  var Output = document.getElementById("Output")
	
  Output.innerHTML = "<b>You selected: </b><br/>"
  for (i=1; i<=8; i++){
    Checkbox = document.getElementById("Colors" + i)
    if (Checkbox.checked == true) {
      Output.innerHTML += Checkbox.value + "<br/>"
    }
  }
}
</script>

<!-- Код XHTML -->
<div>
What are your favorite colors?<br/>
<input id="Colors1" type="checkbox" value="Red"/>Red<br/>
<input id="Colors2" type="checkbox" value="Green"/>Green<br/>
<input id="Colors3" type="checkbox" value="Blue"/>Blue<br/>
<input id="Colors4" type="checkbox" value="Yellow"/>Yellow<br/>
<input id="Colors5" type="checkbox" value="Maroon"/>Maroon<br/>
<input id="Colors6" type="checkbox" value="Purple"/>Purple<br/>
<input id="Colors7" type="checkbox" value="Aqua"/>Aqua<br/>
<input id="Colors8" type="checkbox" value="Teal"/>Teal<br/>
<input type="button" value="Submit" onclick="Get_Colors()"/><br/>
<span id="Output" style="color:red"></span>
</div>

В этом примере флажкам присвоены уникальные значения id, а не имена, так как они будут обрабатываться в браузере, а не на сервере. Когда происходит щелчок на кнопке "Submit", она активирует локальную функцию JavaScript с именем Get_Colors(). Этот сценарий проверяет каждый из флажков, какой из них был отмечен, и выводит значения этих флажков.