Чекбоксы/Checkbox и радиокнопки/radiobottom

Атрибут 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 что будет означать — поле обязано быть заполненным.

Пример.

Посмотреть Demo

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;
}

Обзор радиокнопок с несколькими примерами думаю будет весьма полезно для информации.

6 комментариев
  1. доброго времени суток! спасибо очень интересный и нужный материал! у меня вопрос в этом направлении но немного другого характера — как вывести окна выбора размера (ну допустим одежды) таким образом, что бы при выгрузке товара, появлялось нужное количество окон с данными из CSV???

    1. Здравствуйте. Я не совсем понял. Окна? Может радиокнопки, где при выборе появляется соответствующий товар?

    1. Примерно так

      <span class="checkbox">
          <input id="checkbox1" checked="" type="checkbox">
          <label for="checkbox1">Чек</label>
      </span>
      
      .checkbox {
          display: inline-block;
          padding: 0;
          margin: 0;
      }
      

Оставить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *