Мы продолжаем тему прошлого урока и в нем мы рассмотрели процесс создания обычных полей для ввода текста. Сегодня, в продолжение, мы научимся создавать еще один элемент формы это радиокнопки. Такие кнопки используются, когда нужно указать один из вариантов ответа на выбор, например «да» или «нет», и не как не оба варианта. Давайте создадим такие радиокнопки, возьмем конечный результат прошлого урока и после полей input создадим новый абзац и напишем еще один тег <input> и в нем укажем следующие атрибуты.
Первый - это тип поля type="radio" - атрибут, задающий тип кнопки. Второй - это атрибут задающий имя нашей кнопке name="time". Это значение и будет послано нашему обработчику в момент, когда посетитель нажмет кнопку «отправить». То есть если эта радиокнопка будет активна, то именно это значение и будет отправлено обработчику value="yes". В итоге у нас получилась вот такая строка. Вставив в редактор эту строку, и обновив браузер, получим простую радиокнопку.
Конечно сейчас радиокнопка выглядит совсем не понятно, нет ни вопроса и нет варианта ответа, то есть непонятно за что она отвечает. Поэтому создадим сначала вариант ответа с помощью тега <label>
Теперь наша кнопка уже имеет вариант ответа (ее значение). Теперь создадим еще одну радиокнопку с противоположным ответом «нет». Делается это очень просто, копируем уже созданную кнопку и меняем в ней слово «да» на «нет» и в атрибуте value устанавливаем значение no. Важно знать тот факт, что имена у радиокнопок должны оставаться одинаковыми, так как это показывает браузеру, что эти две кнопке относятся одной группе и что они взаимоисключающие друг для друга.
Вот мы получили вторую радиокнопку и если мы кликнем на одну из кнопок, то выделяется именно та кнопка которую мы выбираем. То есть они взаимно исключают друг друга и происходит это, потому что у них одинаковые имена. Если вы зададите два разных имени, то тогда появится возможность выделить сразу две кнопки, что становится логически не совсем верным.
Ну и теперь зададим сам вопрос для наших кнопок, перед нашими кнопками создаем еще один абзац с нашим вопросом.
Ну и теперь еще один интересней момент он может пригодится при использовании радиокнопок это автоматическая активация кнопки. Если сейчас обновить страницу, то у Вас не активна не одна кнопка. Изначально мы можем указать, какая кнопка будет активна, для этого используется специальный атрибут, добавив его к кнопке, она по умолчанию будет активирована. И этот атрибут называется checked, что в переводе с английского означает «отмеченный». Этот атрибут достаточно не обычный, ему не требуется указывать значение.
На этом с радиокнопками все. В суме двух уроков у нас получился вот такой код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Радиокнопки</title>
</head>
<body>
</body> </html>
Результат смотрите в Демо и сравнивайте со своим, а мы переходим к другим элементам формы чекбоксам.
CSS