Чекбоксы/Checkbox и радиокнопки/radiobottom
Атрибут checkbox применяются в форме для выбора нескольких значений. В отличие от атрибута radio , который создает переключать между вариантами и позволяет выбрать только один из них. То атрибут checkbox дает возможность поставить два флажка или более в зависимости от потребности. Checkbox считается как альтернатива атрибута radio .
С атрибутом checkbox используется другие атрибуты, таки как:
Name – уникальное имя элемента. Служит для дальнейшей отправки данных на сервер.
Value – значение элемента.
Checked – устанавливает активный флажок по умолчанию.
Также можно использовать атрибут label , который значительно улучшает юзабилити радиокнопок. При его использование необязательно кликать на саму радио точку, достаточно кликнуть на надпись находящийся рядом возле переключателя.
Пример без использования атрибута label.
Пример с использованием атрибута label.
Yes Label
По спецификации атрибут label используется с атрибутом for для связи с элементом формы. Применяется в том случае если часть элемента формы и текст разделены, то связываются атрибутом for через идентификатор.
Стили Checkbox`в.
К стилизации checkbox`в и radio кнопок применяется псевдокласс :checked в состояние «включено». Данный псевдокласс появился с обновлением каскадной таблице CSS3. Что дает больше возможностей в оформлении радиокнопок.
.gtr < display: block; line-height: 24px; padding: 12px 15px; cursor: pointer; float:left; >.gtr + .gtr < border-top: 1px solid #f0f2f3; >.rtg < display: none; >.mrt < position: relative; display: inline-block; vertical-align: top; margin-right: 12px; width: 20px; height: 20px; border: 2px solid red; border-radius: 12px; >.mrt:before < content: ''; display: none; position: absolute; top: 50%; left: 50%; margin: -5px 0 0 -6px; height: 4px; width: 8px; border: solid #39ca74; border-width: 0 0 4px 4px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); >.rtg:checked ~ .mrt < border-color: #39ca74; >.rtg:checked ~ .mrt:before < display: block; >.lst < font-weight: bold; color: #39A9E1; >.rtg:checked ~ .lst
.cenchek3 input < position:absolute; left:-9999px; >.cenchek3 label < margin:0 15px; >.cenchek3 < margin:10px auto; width:300px; >.sliderce < position: relative; display: block; width: 7em; height: 3em; cursor: pointer; border-radius: 1.5em; transition: 350ms; background: #ddd; float:left; margin:10px 10px 0; >.sliderce::after < position: absolute; content:''; width: 2em; height: 2em; top: 0.5em; left: 0.5em; border-radius: 1.5em; transition: width 200ms ease-out, height 300ms 50ms ease-in, top 300ms 50ms ease-in, left 250ms 50ms ease-in, box-shadow 300ms ease-in; background: #D06ACD; box-shadow: 0 0 0 1.5em #f2f2f2 inset; >input:checked + .sliderce::after < width: 4em; height: 3em; top: 0; left: 3em; box-shadow: 0 0 0 0 #f2f2f2 inset; >.cek3
Атрибут radio.
В свою очередь атрибут radio позволяет задать пользователю вопрос лишь с одним вариантом выбора. Таким образом создает переключатель между кнопками. Для того чтобы переключатель работал, следует связать между собой кнопки через атрибут NAME .
В создание формы часто необходимо выделить пункт, который обязан быть заполнен. Если его оставить пустым и попытаться отправить данные формы на сервер, то браузер выдаст сообщение что заполнены не все пункты формы. Такие элементы формы выделяются атрибутом required что будет означать — поле обязано быть заполненным.
form < padding:30px; border-radius:3px; margin:50px auto; width:150px; background:#fff; border-top:6px solid #D05B50; >.radioP < display: block; position: relative; margin: 20px 0; padding-left:40px; font-family:arial; >.radioP:first-child < margin:0 0 20px 0; >input[type=»radio»] < display: block; position: absolute; top:0; left:0; z-index: 0; >input[type=»radio»] + label span.rerrq < appearance: none; z-index: 20; position: absolute; top:-3px; left:0; display: inline-block; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; vertical-align: middle; box-shadow: hsla(0,0%,100%,.15) 0 1px 1px, inset hsla(0,0%,0%,.5) 0 0 0 1px; background: #efefef; background-image: radial-gradient(ellipse at center, #D06E4B 0%,#D06E4B 40%,#efefef 45%); background-repeat: no-repeat; transition: background-position .15s cubic-bezier(.8, 0, 1, 1); >input[type=»radio»]:checked + label span.rerrq < transition: background-position .2s .15s cubic-bezier(0, 0, .2, 1); >input[type=»radio»] + label span.rerrq < background-position: -24px 0; >input[type=»radio»]:checked + label span.rerrq < background-position: 0 0; >input[type=»submit»] < border:none; background:#D06E4B; color:#fff; font-size:20px; padding:10px 0; border-radius:3px; cursor:pointer; width:100%; >input[type=»submit»]:hover input[type=»submit»]:active
Стили радиокнопок.
#rfam < position: absolute; top: 75px; left: 0; right: 0; bottom: 0; width: 150px; height: 40px; padding: 10px; margin: auto; border-radius: 40px; border: 1px solid #d5d5d5; >#rfam .radio ,#rfam .radio1,#rfam .radio2 < display: none; >#rfam .trigger < cursor: pointer; position: relative; float: left; width: 30px; height: 20px; margin: 10px; border-radius: 20px; background: #666; overflow: hidden; -webkit-transition: background .15s linear; >#rfam .radio:checked + .trigger < background: #D04441; >#rfam .radio1:checked + .trigger < background: #63D04B; >#rfam .radio2:checked + .trigger < background: #CAD025; >#rfam .trigger:before < content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 10px; height: 10px; margin: auto 5px; border-radius: 100%; box-shadow: 0 0 0 100px hsla(0, 0%, 0%, .3); -webkit-transition: left .15s linear; >#rfam .radio:checked + .trigger:before
.rabs input[type=»radio»] < display: none; >.rabs label < background: #ffffff; border: 1px solid #ddd; color: #999; display: inline-block; font-family: Arial; font-size: 16px; margin: 18px; padding: 6px 12px; cursor:pointer; -moz-box-shadow: #ccc 0 0px 1px; -webkit-box-shadow: #ccc 0 0px 1px; box-shadow: #ccc 0 0px 1px; >.rabs input[type=»radio»]:checked + label
Обзор радиокнопок с несколькими примерами думаю будет весьма полезно для информации.
Читайте также:
доброго времени суток! спасибо очень интересный и нужный материал! у меня вопрос в этом направлении но немного другого характера — как вывести окна выбора размера (ну допустим одежды) таким образом, что бы при выгрузке товара, появлялось нужное количество окон с данными из CSV.
Здравствуйте. Я не совсем понял. Окна? Может радиокнопки, где при выборе появляется соответствующий товар?
HTML Input Control Elements Checkbox and Radio Buttons
Checkboxes and radio buttons are written with the HTML tag , and their behavior is defined in the HTML specification.
The simplest checkbox or radio button is an element with a type attribute of checkbox or radio , respectively:
A single stand-alone checkbox element is used for a single binary option such as a yes-or-no question. Checkboxes are independent, meaning the user may select as many choices as they would like in a group of checkboxes. In other words, checking one checkbox does not uncheck the other checkboxes in checkbox group.
Radio buttons usually come in groups (if it’s not grouped with another radio button, you probably meant to use a checkbox instead) identified by using the same name attribute on all buttons within that group. The selection of radio buttons are mutually exclusive, meaning the user may only select one choice from a group of radio buttons. When a radio button is checked, any other radio button with the same name that was previously checked becomes unchecked.
When viewed, radio buttons appear as a circle (unchecked) or a filled circle (checked). Checkboxes appear as a square (unchecked) or a filled square (checked). Depending on the browser and operating system, the square sometimes has rounded corners.
Attributes
checkboxes and radio buttons have a number of attributes to control their behavior:
value
Like any other input element, the value attribute specifies the string value to associate with the button in the event of form submission. However, checkboxes and radio buttons are special in that when the value is omitted, it defaults to on when submitted, rather than sending a blank value. The value attribute is not reflected in the button’s appearance.
checked
The checked attribute specifies the initial state of a checkbox or radio button. This is a boolean attribute and may be omitted.
Each of these are valid, equivalent ways to define a checked radio button:
The absence of the checked attribute is the only valid syntax for an unchecked button:
When resetting a , checkboxes and radio buttons revert to the state of their checked attribute.
Accessibility
Labels
To give context to the buttons and show users what each button is for, each of them should have a label. This can be done using a element to wrap the button. Also, this makes the label clickable, so you select the corresponding button.
or with a element with a for attribute set to the id attribute of the button:
Button Groups
Since each radio button affects the others in the group, it is common to provide a label or context for the entire group of radio buttons.
To provide a label for the entire group, the radio buttons should be included in a element with a element within it.
Checkboxes can also be grouped in a similar fashion, with a fieldset and legend identifying the group of related checkboxes. However, keep in mind that checkboxes should not share the same name because they are not mutually exclusive. Doing this will result in the form submitting multiple values for the same key and not all server-side languages handle this in the same way (undefined behavior). Each checkbox should either have a unique name, or use a set of square brackets ( [] ) to indicate that the form should submit an array of values for that key. Which method you choose should depend on how you plan to handle the form data client-side or server-side. You should also keep the legend short, since some combinations of browsers and screen readers read the legend before each input field in the fieldset.
PDF — Download HTML for free