Input radio в виде кнопки. Радиокнопки и чекбоксы в HTML, их теги и атрибуты. Особенности работы полей input
Однажды, у меня возникла задача, сделать на форме сайта выбор одного из нескольких цветов. Казалось бы, нет ничего проще. Элемент radiobutton , как нельзя лучше, подходит для этой задачи, нужно только чуть-чуть его кастомизировать. Тут-то и начинаются проблемы. Дело в том, что отрисовкой элементов radiobutton и checkbutton управляет не браузер, а ОС. Соответственно, большинство свойств CSS (например, background-color) на них не действует.
В интернете я нашел множество способов кастомизации radiobutton , но все они показались мне слишком сложными, поэтому я решил придумать свой.
Моя идея основана на том факте, что когда пользователь кликает по подписи label , radiobutton переключается. Значит можно кастомизировать не radiobutton , а label .
Рассмотрим пример кода HTML:
Здесь нет ничего необычного. Обычные radiobutton и подписи к ним.
Теперь CSS:
// скрываем radiobutton
input{display: none;}
// кастомизируем label
label{
width: 20px;
height: 20px;
}
label.blue{background-color: blue;}
label.cyan{background-color: #00ffff;}
// Для выбранного объекта
input:checked+label{
border: black solid 2px;
}
Здесь мы скрываем radiobutton и рисуем, как нам хочется label . Рисуем label для отмеченного состояния input:checked+label . Всё просто и элегантно.
На этом можно было бы закончить пост, если бы не одно «но».
Пара гнилых помидоров в сторону Apple
Мир был бы хорош и прекрасен, если бы в нём не было одной корпорации у которой особый путь развития. Это корпорация Apple, которая отказывает своим пользователям в праве тыкать по label . В следствии чего, мой способ не работает на iPhone и iPad. Самое интересное, что Safari на Windows пережевывает всё правильно. К сожалению не было под рукой ни одного iMac, чтобы проверить.Специально для хипстеров пришлось таки применить JS (код рассчитан на использование в связке с jQuery):
var deviceAgent = navigator.userAgent.toLowerCase();
var iOS = deviceAgent.match(/(iphone|ipod|ipad)/);
if (iOS) {
$("label").click(function (event) {
$("#" + $(event.target).attr("for")).attr("checked", true).change();
});
}
Пример использования
Long Twit — простой сервис, который рендерит текст в картинку и отправляет в Twitter. Можно выбрать цвет текста и фона.Последнее обновление: 08.04.2016
Флажок
Флажок представляет элемент, который может находиться в двух состояниях: отмеченном и неотмеченном. Флажок создается с помощью элемента input с атрибутом type="checkbox" :
Изучаемые технологии
Атрибут checked позволяет установить флажок в отмеченное состояние.
Переключатели
Переключатели или радиокнопки похожи на флажки, они также могут находиться в отмеченном или неотмеченном состоянии. Только для переключателей можно создать одну группу, в которой одновременно можно выбрать только один переключатель. Например:
Для создания радиокнопки надо указать атрибут type="radio" . И теперь другой атрибут name указывает не на имя элемента, а на имя группы, к которой принадлежит элемент-радиокнопка. В данном случае у нас две группы радиокнопок: gender и tech . Из каждой группы мы можем выбрать только один переключатель. Опять же чтобы отметить радиокнопку, у нее устанавливается атрибут checked:
Важное значение играет атрибут value , который при отправке формы позволяет серверу определить, какой именно переключатель был отмечен.
This page contains code for creating an HTML radio button. It also provides an explanation of radio buttons. Feel free to copy and paste the code into your own website or blog.
You create a radio button with the HTML tag. You add type="radio" to specify that it"s a radio button. This is because the tag does more than create radio buttons. It also allows you to make text input controls, submit buttons, checkboxes, and more.
Anyway, here is the code and some information on creating a radio button.
Basic Radio Button
This example uses the tag to create a basic radio button. Within the code, we use type="radio" to set the control to a radio button.
You will notice that, although all radio buttons had different values (i.e. within the value attribute) all radio buttons shared the same name (within the name attribute). I"ll explain how this works shortly. In the meantime, let"s look at multiple groups of radio buttons.
Groups of Radio Buttons
Here are two groups of radio buttons. Notice once again that the radio buttons in each group shares the name. The first group has a name of "preferred_color" and the second group has a name of "preferred_item".
Important points to note about radio buttons:
- All radio buttons within a group must share the same name. That is, the value of the name attribute should be the same. For example, all three radio buttons in the "Preferred Color" group have name="preferred_color" .
- All radio buttons within a group should have a different value for the value attribute. For example, if one radio button has value="red" , none of the others in that group should have a value of red, as this would defeat the purpose of having the extra radio button.
- The "label" for each radio button is determined by the text next to the radio button (not the value attribute). The value attribute is used by the form handler.
Understanding Radio Buttons
When you first learn how to create a radio button, you may find it a little difficult to understand how the name and value attributes work. This is probably because radio buttons are a little different to most form elements. I"ll explain.
The whole purpose of a radio button is to enable the user to make one selection - and one only - from a list. If you wanted the user to make multiple selections, you wouldn"t use a radio button - you"d use a checkbox.
Anyway, because the user can only make one selection from our group of radio buttons, all radio buttons in that group need to share the same name. This is how we group the list together - they all share the same name. This tells the form handler the name of the group, and the value of the selected radio button.
For example, if you want users to choose between a group of colors, you would create a radio button for each color. You would give all radio buttons the same name (for example, "preferred_color"), but you would give each radio button a different value (for example, "red").
So, let"s say a user submits a form that sends an email to the webmaster. The user selects their preferred color from a radio button and clicks the submit button. The webmaster might receive an email that looks like this:
I"m sure you could think of better things to do than to simply ask for your users" favorite color, but hopefully you get the idea! In this case, the form handler (i.e. a server-side script), has processed the form and emailed the name of the group (Preferred_color), and the value that was selected (Red).
Здравствуйте, уважаемые читатели сайта сайт. Следующий элемент, который сегодня мы успеем разобрать радиокнопки и чекбоксы в html . Обычно они используются в целях задания вопроса внутри формы (о создании форм мы говорили ) и, соответственно, через них мы можем предложить человеку варианты ответа. При этом он может выбрать только один из этих вариантов.
Радиокнопки - тип radio
Давайте приступим к реализации радиокнопок. Перейдем в код и для радиокнопок выделим отдельный абзац. В нем и создадим нашу радиокнопку. Кнопка создается при помощи тега input .
Тип укажем radio . Зададим кнопке имя и укажем значение, т.е. какое значение будет отослано обработчику, если эта кнопка будет активна. Для этой кнопке мы укажем значение «yes », т.к. эта кнопка будет отвечать за положительный ответ.
Давайте добавим метку label c ответом «Да » для того, чтобы человек кликнул по метке, и кнопка активировалась автоматически.
Теперь создадим ей противоположную кнопку с ответом «Нет ». Для этого скопируем label и вставим после первого label . Поменяем «Да» на «Нет» и меняем значение «yes» на «no». Обратите внимание, что имя мы должны оставить то же самое. Это скажет браузеру о том, что эти радиокнопки принадлежат к единой группе и что они взаимоисключающие друг друга. То есть, если активировать одну кнопку, то другая деактивируется. Если имена кнопкам дать разные, то можно одновременно активировать обе кнопки.
Вот таким образом можно передавать обработчику значение = выбор того или иного ответа.
Давайте добавим сам вопрос после открытия абзаца. Спросим человека, любит ли он экономить время?
Любите ли Вы экономить время?
И еще один момент, который может вам пригодиться – это автоматическая активация кнопок изначально. Для этого есть специальный атрибут, который можно добавить к нужной кнопке. Эта кнопка будет активирована изначально. Атрибут называется checked - можно перевести как отмеченный. Этому атрибуту не нужно указывать никакого значения.
Любите ли Вы экономить время?
А вот и конечный результат.
Чекбоксы - тип checkbox
Альтернативой радиокнопкам в HTML являются чекбоксы
, только в этом случае возможно выделять несколько элементов. Давайте для примера создадим новый абзац и спросим, какими инструментами для экономии времени вы любите пользоваться?
После вопроса укажем новый абзац для создания этих самых чекбоксов. Первый чекбокс будет для ежедневника.
Если проверить наш код в браузере, то выглядеть это будет так:
Теперь таким же образом создадим еще два чекбокса: хронометраж и свои наработки.
Какими инструментами для экономии времени Вы пользуетесь?
Обязательно каждый чекбокс называйте своим уникальным именем.
Если сохранить файл и проверить, то можно увидеть следующее:
