Атрибут checkbox
применяются в форме для выбора нескольких значений. В отличие от атрибута radio
, который создает переключать между вариантами и позволяет выбрать только один из них. То атрибут checkbox
дает возможность поставить два флажка или более в зависимости от потребности. Checkbox
считается как альтернатива атрибута radio
.
С атрибутом checkbox
используется другие атрибуты, таки как:
Name – уникальное имя элемента. Служит для дальнейшей отправки данных на сервер.
Value – значение элемента.
Checked – устанавливает активный флажок по умолчанию.
Пример.
<input type="checkbox" name="mail" value="yes" checked>
Также можно использовать атрибут label
, который значительно улучшает юзабилити радиокнопок. При его использование необязательно кликать на саму радио точку, достаточно кликнуть на надпись находящийся рядом возле переключателя.
Пример без использования атрибута label.
No Label<input id="in1" type="checkbox" name="a2"><span>No Label</span>
Пример с использованием атрибута label.
<label><input id="in1" type="checkbox" name="a2"><span>Yes Label</span></label>
По спецификации атрибут label
используется с атрибутом for
для связи с элементом формы. Применяется в том случае если часть элемента формы и текст разделены, то связываются атрибутом for
через идентификатор.
<label for="идентификатор">...</label>
Использование необязательное.
Стили Checkbox`в.
К стилизации checkbox`в
и radio
кнопок применяется псевдокласс :checked
в состояние «включено». Данный псевдокласс появился с обновлением каскадной таблице CSS3. Что дает больше возможностей в оформлении радиокнопок.
HTML
<label class="gtr"> <input type="checkbox" name="check1" value="1" class="rtg" > <span class="mrt"></span> <span class="lst">Apple</span> </label> <label class="gtr"> <input type="checkbox" name="check2" value="1" class="rtg" > <span class="mrt"></span> <span class="lst">Samsung</span> </label> <label class="gtr"> <input type="checkbox" name="check3" value="1" class="rtg"> <span class="mrt"></span> <span class="lst">Nokia</span> </label>
CSS
.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 { color: #34bf6e; }
HTML
<div class="cenchek3"> <div class="cek3"> <input type="checkbox" id="s5" /> <label class="sliderce" for="s5"></label> </div> <div class="cek3"> <input type="checkbox" id="s6" checked="" /> <label class="sliderce" for="s6"></label> </div> </div>
CSS
.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{ float:left; }
Атрибут radio.
В свою очередь атрибут radio
позволяет задать пользователю вопрос лишь с одним вариантом выбора. Таким образом создает переключатель между кнопками. Для того чтобы переключатель работал, следует связать между собой кнопки через атрибут NAME
.
Пример.
<input type="radio" name="radio"/><label>Yes</label> <input type="radio" name="radio"/><label>No</label>
В создание формы часто необходимо выделить пункт, который обязан быть заполнен. Если его оставить пустым и попытаться отправить данные формы на сервер, то браузер выдаст сообщение что заполнены не все пункты формы. Такие элементы формы выделяются атрибутом required
что будет означать — поле обязано быть заполненным.
Пример.
HTML
<form> <p class="radioP"> <input type="radio" name="name" id="r1" required /> <label for="r1"> <span class="rerrq"></span> Нравится </label> </p> <p class="radioP"> <input type="radio" name="name" id="r2" required /> <label for="r2"> <span class="rerrq"></span> Не нравится </label> </p> <p class="radioP"> <input type="radio" name="name" id="r3" required /> <label for="r3"> <span class="rerrq"></span> Нейтрально </label> </p> <p> <input type="submit" value="Отправить"> </p> </form>
CSS
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 {opacity:.8;} input[type="submit"]:active {opacity:1;}
Стили радиокнопок.
HTML
<section id="rfam"> <input id="radio_1" class="radio" name="radio" type="radio" checked> <label for="radio_1" class="trigger"></label> <input id="radio_2" class="radio1" name="radio" type="radio"> <label for="radio_2" class="trigger"></label> <input id="radio_3" class="radio2" name="radio" type="radio"> <label for="radio_3" class="trigger"></label> </section>
CSS
#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 { left: 10px; }
HTML
<div class="rabs"> <input type="radio" id="tab-1" name="radioname" checked> <label for="tab-1">Больше</label> <input type="radio" id="tab-2" name="radioname"> <label for="tab-2">Меньше</label> <input type="radio" id="tab-3" name="radioname" > <label for="tab-3">Среднее</label> </div>
CSS
.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 { background: #fff; color: #000; border: 1px solid #0fa0bd; -webkit-box-shadow: 0px 0px 9px #50D029; -moz-box-shadow: 0px 0px 9px #50D029; -ms-box-shadow: 0px 0px 9px #50D029; -o-box-shadow: 0px 0px 9px #50D029; box-shadow: 0px 0px 9px #50D029; }
Обзор радиокнопок с несколькими примерами думаю будет весьма полезно для информации.
доброго времени суток! спасибо очень интересный и нужный материал! у меня вопрос в этом направлении но немного другого характера — как вывести окна выбора размера (ну допустим одежды) таким образом, что бы при выгрузке товара, появлялось нужное количество окон с данными из CSV???
Здравствуйте. Я не совсем понял. Окна? Может радиокнопки, где при выборе появляется соответствующий товар?
как сделать отображение чебоксов по горизонтали?
Спасибо
Примерно так
Спасибо! Очень помогли!
Не за что!