alt

Когда человеку тяжело,
это часто означает,
что он идёт к успеху.

alt


Радиокнопки HTML.

Категория: Уроки HTML Просмотров: 4222 Коментариев: 0 Дата: 2017-04-18 Добавил: admin

 Радиокнопки HTML

Мы продолжаем тему прошлого урока и в нем мы рассмотрели процесс создания обычных полей для ввода текста. Сегодня, в продолжение, мы научимся создавать еще один элемент формы это радиокнопки. Такие кнопки используются, когда нужно указать один из вариантов ответа на выбор, например «да» или «нет», и не как не оба варианта. Давайте создадим такие радиокнопки, возьмем конечный результат прошлого урока и после полей input создадим новый абзац и напишем еще один тег <input> и в нем укажем следующие атрибуты.

Первый - это тип поля type="radio" - атрибут, задающий тип кнопки. Второй - это атрибут задающий имя нашей кнопке name="time". Это значение и будет послано нашему обработчику в момент, когда посетитель нажмет кнопку «отправить». То есть если эта радиокнопка будет активна, то именно это значение и будет отправлено обработчику value="yes". В итоге у нас получилась вот такая строка. Вставив в редактор эту строку, и обновив браузер, получим простую радиокнопку.

HTML

Конечно сейчас радиокнопка выглядит совсем не понятно, нет ни вопроса и нет варианта ответа, то есть непонятно за что она отвечает. Поэтому создадим сначала вариант ответа с помощью тега <label>

HTML

Теперь наша кнопка уже имеет вариант ответа (ее значение). Теперь создадим еще одну радиокнопку с противоположным ответом «нет». Делается это очень просто, копируем уже созданную кнопку и меняем в ней слово «да» на «нет» и в атрибуте value устанавливаем значение no. Важно знать тот факт, что имена у радиокнопок должны оставаться одинаковыми, так как это показывает браузеру, что эти две кнопке относятся одной группе и что они взаимоисключающие друг для друга.

HTML

                


                

Вот мы получили вторую радиокнопку и если мы кликнем на одну из кнопок, то выделяется именно та кнопка которую мы выбираем. То есть они взаимно исключают друг друга и происходит это, потому что у них одинаковые имена. Если вы зададите два разных имени, то тогда появится возможность выделить сразу две кнопки, что становится логически не совсем верным.

Ну и теперь зададим сам вопрос для наших кнопок, перед нашими кнопками создаем еще один абзац с нашим вопросом.

HTML

                

Вы любите фрукты?



Ну и теперь еще один интересней момент он может пригодится при использовании радиокнопок это автоматическая активация кнопки. Если сейчас обновить страницу, то у Вас не активна не одна кнопка. Изначально мы можем указать, какая кнопка будет активна, для этого используется специальный атрибут, добавив его к кнопке, она по умолчанию будет активирована. И этот атрибут называется checked, что в переводе с английского означает «отмеченный». Этот атрибут достаточно не обычный, ему не требуется указывать значение.

На этом с радиокнопками все. В суме двух уроков у нас получился вот такой код:

HTML
<!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>

Результат смотрите в Демо и сравнивайте со своим, а мы переходим к другим элементам формы чекбоксам.


Просмотреть демо: Демо

Скачать исходник: Скачать



Добавить комментарий:


Ваше имя

Текст комментария


Введите буквы с учетом регистра:





Апдейты

Популярное Свежие записи

Облако тегов