Красота требует форм!
УРОК «Поля с одним и более вариантом выбора»
Дорогие друзья!
С помощью тегов форм и значений атрибута type тега input можно создавать различные формы и поля, обеспечивающие
взаимодействие с пользователями. Одними из таких форм являются радиопереключатели (поля с возможностью только
одного выбора) и флажки (можно выбрать несколько пунктов).
Рассмотрим, как сделать радиопереключатель:
Для этого в качестве значения атрибута type тега input нужно указать radio,
причём нужно столько раз написать тег input с его атрибутами, сколько пунктов предполагается сделать, например:
В данном примере мы создали тест, в котором нужно выбрать только один вариант ответа и отправить его
на сервер. Поэтому в атрибуте action тега form мы должны будем прописать путь к скрипту обработчика,
который обработает (отправит) ответ пользователя, а также указать имя (name) формы. У нас 4 варианта ответа, поэтому
мы 4 раза повторили тег input с его атрибутами. Программа-обработчик в случае создания радиопереключателя
передаст на сервер только одну переменную timegame с выбранным значением value, поэтому это значение
должно быть индивидуальным для каждого пенкта теста.
Кроме того, мы использовали в пункте 5 в качестве атрибута тега input атрибут checked. Он применяется
для указания предустановленного выбора, то есть, когда пользователь увидит тест, точка будет стоять именно
на пункте 5. Если не использовать этот атрибут, то предустановленной точки не будет. В случае
радиопереключателя можно пометить только один элемент группы.
Также вы видите кнопку "Очистить" - она используется для сброса выбранных значений. Попробуйте это сделать.
Рассмотрим, как сделать флажки (чекбокс):
Принцип создания флажков похож на таковой при создании радиопереключателя, только вместо radio в качестве
значения атрибута type мы пишем значение checkbox. Также следует помнить,
что здесь мы уже можем отправить на сервер не один, а несколько (все) вариантов ответов, поэтому для
каждого пункта нужно задать своё имя и своё значение value, пример:
До встречи в следующем уроке!
