Книга: HTML, XHTML и CSS на 100%
Переключатели
Переключатели
Если вы задаете посетителю вопрос и уверены, что знаете все возможные варианты ответа на него, а также хотите, чтобы посетитель выбрал только один из предложенных вами вариантов, используйте переключатель. Только убедитесь, что действительно предоставили пользователю все возможные варианты ответов.
Совет
Даже если вам кажется, что вы придумали все возможные ответы, учтите: посетители сайта хитры и могут придумать то, что не пришло в голову вам. Поэтому предусматривайте поле с вариантом ответа Другое. А еще посетитель может не захотеть отвечать на ваш вопрос, для такого случая надо добавить пункт Не хочу отвечать.
Для создания переключателя устанавливаем type="radio" и получаем симпатичный кружочек. Текст пункта вводится рядом с тегом <INPUT>. Особенность переключателя в том, что можно выбрать только одно положение из всех возможных. Для всех переключателей, которые принадлежат к одной группе, должно быть установлено одинаковое значение атрибута name. Атрибут value в этом случае содержит значение, которое будет передано обработчику, если пользователь выберет указанное положение.
Вместе с переключателями можно использовать атрибут checked, который задает положение, выбранное по умолчанию. Это удобно, если вы знаете самый частый вариант ответа на заданный вопрос. В таком случае, установив этот вариант по умол – чанию, вы упростите процесс заполнения формы для посетителей вашего сайта.
В листинге 6.10 представлен пример создания различных вариантов переключателей.
Листинг 6.10. Создание переключателей
<html>
<head>
<title>Конструирование форм</title>
</head>
<body>
<form action="test.php" enctype="multipart/form-data" method="post" name="test" target="_blank">
Ваш пол: <input name="Reg_Gender" type="radio" value="man" />Мужской
<input name="Reg_Gender" type="radio" value="woman" />Женский
<input name="Reg_Gender" type="radio" value="dontanswer" checked />Не хочу отвечать<br />
Ваш возраст: <input name="Reg_Age" type="radio" value="before18" />до 18
<input name="Reg_Age" type="radio" value="1825" />18-25
<input name="Reg_Age" type="radio" value="2535" />25-35<br />
<input name="Reg_Age" type="radio" value="3550" />35-50
<input name="Reg_Age" type="radio" value="after50" />старше 50<br />
</form>
</body>
</html>
Результат обработки кода из листинга 6.10 представлен на рис. 6.4.
Рис. 6.4. Переключатели
Для создания опроса с переключателями мы выбрали вопросы, ответы на которые можно предположить. Один из вариантов ответа мы назначили выбранным по умолчанию, что видно на рис. 6.4.
Следующий элемент поможет вам, когда можно позволить посетителю выбрать несколько вариантов ответов из всех предложенных.
Оглавление книги
- 5.2.1. Кнопки и переключатели
- 15.9.5. Переключатели и флажки
- 5.2. Устройства дискретного ввода: кнопки, переключатели, клавиатуры
- 5.2.2. DIP переключатели
- Переключатели командной строки
- Переключатели копирования
- Другие переключатели gstat
- Переключатели восстановления
- Выбор элемента с помощью переключателя
- Интерактивный режим