Чекбокс: что это или как обрабатывать события html checkbox

Радиокнопка

Но сильно с оформлением не разгуляешься, так как остальные переключатели тоже должны работать корректно. Давайте просто слегка приукрасим их:

label input {
  display: none;
}
label input ~ span {
  position: relative;
  display: inline-block;
  padding: 3px 0 3px 25px;
}
label input ~ span:before {
  content: "";
  position: absolute;
  display: block;
  width: 18px;
  height: 18px;
  background: #fff;
  margin-right: 5px;
  border: 1px solid #ccc;
  border-radius: 50%;
  left: 0;
  top: 0;
  box-sizing: border-box;
  transition: all 300ms ease-in-out;
}
label input:checked ~ span:before {
  border: 5px solid #29d;
}

На данный момент наша радиокнопка будет выглядеть следующим образом:

Чекбокс (флажок)

Давайте начнем с простого HTML input type checkbox. Сейчас я хочу превратить переключатель, который вы видите на скриншоте, в нечто подобное:

label.spin input {
  display: none; /*hides ugly toggle*/
}
label.spin input ~ span {
  position: relative;
  display: inline-block;
  padding: 3px 0 3px 25px; /*adds spacing on the left*/
}
/*create our new toggle*/
label.spin input ~ span:before {
  content: "2713"; /*add a new check mark*/
  text-align: center;
  font-size: 13px;
  position: absolute;
  display: block;
  width: 18px;
  height: 18px;
  background: #fff;
  color: #fff;
  margin-right: 5px;
  border: 1px solid #ccc;
  border-radius: 50%;
  left: 0;
  top: 0;
  box-sizing: border-box;
  transition: all 500ms ease-in-out;
}
/*if checked do this*/
label.spin input:checked ~ span:before {
  transform: rotatez(360deg);
  background: #29d;
  border-color: #29d;
}

Действительно красивый переключатель!

Наверняка вы видели input type checkbox, в которых тумблер скользит слева направо при нажатии. Такого эффекта можно легко добиться при помощи CSS. Давайте попробуем.

Сначала создадим обычный чекбокс без установленного флажка. Сейчас вы уже знаете, что нам потребуется скрыть стандартный переключатель:

label input {   display: none; }

Затем добавьте немного пространства с левой стороны при помощи свойства padding. После этого задайте чекбоксу относительное позиционирование, так как нам нужно, чтобы он содержал в себе и все остальные элементы внутри span:

label input ~ span {   position: relative;   display: inline-block;   padding: 3px 0 3px 35px; }

Перейдем к стилизации CSS input type checkbox при помощи псевдоэлементов :before и :after. Так сгенерированным CSS-кодом будет проще управлять:

label input ~ span:before, label.slide input ~ span:after {
content: "";
position: absolute;
display: block;
width: 18px;
height: 18px;
background: #fff;
margin-right: 5px;
border: 1px solid #ccc;
left: 0;
top: 0;
box-sizing: border-box;
transition: all 300ms ease-in-out;
}

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

Пришло время немного украсить эти псевдоэлементы. :after будет выступать в роли фона, а :before отвечать за переключение ползунка. Давайте отредактируем ширину элемента, чтобы он стал больше. Также не забудьте добавить inset shadow, чтобы он выглядел как бы вдавленным. Кроме этого не забываем про красный фон, который будет интуитивно указывать на “выключенный” режим:

label input ~ span:before { 
width: 30px;
border-radius: 20px;
box-shadow: inset 0 2px 5px -1px rgba(0, 0, 0, 0.4), inset 0 -2px 0 -1px rgba(255, 255, 255, 0.2); 
background: #F22613; 
}

Что касается :before, то нам нужно сделать так, чтобы элемент стал круглым, а также немного «приподнять» его при помощи эффекта box-shadow:

label.slide input ~ span:after {
box-shadow: 0 3px 4px -2px rgba(0, 0, 0, 0.5);
border-radius: 50%;
}

Во «включенном» режиме нам нужно сместить ползунок HTML input type checkbox в сторону, и изменить цвет фона с красного на оттенок голубого:

label.slide input:checked ~ span:before {
background: #29d;
}
label.slide input:checked ~ span:after {
left: 13px;
}

На этом все! Наши красивые чекбоксы и радиокнопки готовы!

Данная публикация является переводом статьи «Styling Radio and Check buttons with CSS» , подготовленная редакцией проекта.

Checked or not checked?

Notice how all the checkboxes so far have not been checked from the beginning — the user would have to interact with the checkbox to change its state from unchecked to checked. This might be what you want, but sometimes, you want the checkbox to be checked by default, either to suggest a choice to the user or because you are showing a checkbox with a value that corresponds to an existing setting, e.g. from a database. Fortunately, this is very simple — just add the checked attribute to the checkbox:

In the old days of XHTML, where each attribute should always have a value, even the boolean attributes, it would look like this:

Either way should work in all modern browsers, but the first way is shorter and more «HTML5-like».

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

2). Получение значения нескольких checkbox

Второй способ банальный, каждому checkbox присвоить уникальное имя(name)и каждый чекбокс обрабатывать индивидуально!

Я тут думал о самом простом примере получения value из кнопки checkbox Input!

В чем главная проблема!? В том, что нам нужно:

1). сделать какое то действие onclick,
2). потом определить тег(любой id — в смысле уникальный якорь(образно.))
3). и только уже после этого получить значение из value type checkbox Input4). И первый вариант — это когда кнопка радио 0- одиночная кнопка:

В нашей кнопке в данном случае, обязательное условие id — мы как-то должны обратиться к тегу

<input type=»checkbox» id=»my_id» value=»my_id_value»>Чекбокс пример получения value<br>
Ну и далее повесим на наш id onclick и внутри выведем содержание value чекбокса alert( my_id.value );

<script>

my_id.onclick = function(){

alert( my_id.value );

};

</script>

Вы можете проверить работоспособность данного получения значения value из type checkbox Input в js

Чекбокс пример получения value

Получение значений из нескольких чекбоксов инпута в js также просто, как и в php!

Для иллюстрации сбора чекбоксов нам потребуются эти чекбоксы и кнопка в виде ссылки с id:

<input type=»checkbox» value=»red» name=»co»>Красный

<input type=»checkbox» value=»green» name=»co»>Зеленый

<input type=»checkbox» value=»blue» name=»co»>Синий

<a id=»to_send»>отправить</a>

Скрипт, который соберет вся нажатые чекбоксы(checked)! Обращаю ваще внимание, что внутри скрипта checkbox — это не тип… checkbox — это переменная(массив)(почему такое возможно!? Всё просто : type=checkbox — это из html, а var checkbox из js), они из разных сред. После проверки, если чекбокс был отмечен, заносим данные в переменную(str) с пробелом, далее выводим результат через alert

После проверки, если чекбокс был отмечен, заносим данные в переменную(str) с пробелом, далее выводим результат через alert

<script>

window.onload = function() {

var checkbox;

to_send. onclick = function()

{

  checkbox = document.getElementsByName(«co»);

  var str = «»;

  for(var i=0; i<checkbox.length; i++){

  if(checkbox . checked) {str+=checkbox.value+» «;}

  }

  alert(str);

}

}

</script>

Для того, чтобы получить сразу несколько позиций checkbox — нажмите кнопку отправить!

Красный
Зеленый
Синий
отправить

Для того, чтобы получить значение value в переменную в php? то вам нужно в результата вывода поменять echo на любую переменную и уже там делать все, что вам захочется…

if( $_POST ) { $здесь_переменная = strip_tags($_POST);}

HTML тег

Все элементы тега форм создаются с помощью тега <input>.

Синтаксис <input>

Первое на что стоит обратить внимание, что тег не нужен закрывающий тег. У поля есть два самых важных параметра, которые я вынес в обязательные, это name и type

  • name=»name_field» — параметр для задания имени конкретному input. Это нужно, чтобы при дальнейшей обработке данных формы можно было получить значение этого поля.
  • type=»значение» — отвечает за тип элемента, т.е. что именно будет представлять из себя поле. И здесь есть множество возможных значений:
    • text — текстовое поле. Одно из самых часто используемых значений
    • password — текстовое поле, но с той особенностью, что при вводе символы скрыты
    • radio — радиокнопки
    • checkbox — переключатели
    • submit — кнопка для отправки значений формы (управление передается на адрес указанный в адрес, указанный в action атрибута формы)
    • reset — кнопка для очистки всей формы
    • hidden — скрытое поле
    • button — кнопки для обработки каких-то действий (не путать с submit!)
    • file — для загрузки файлов на сервер
    • image — поле с изображением (используется крайне редко)
  • value=»значение» — указывается значение по умолчанию

Теперь разберем более подробно каждый элемент

Оформление кнопок на чистом CSS

Чтобы оформить кнопки в соответствии с дизайном сайта, будем использовать только CSS. Спрячем оригинальный квадратик с помощью свойств z-index и opacity, в данном случае квадратики не сдвигаются с экрана, а просто становятся прозрачными (opacity:0).

CSS:

На том же самом месте отображаем кнопки с собственным дизайном.

Тег input может находится перед тегом label, тогда используем первый пример стилизации кнопок:

Если input — внутри тега label, тогда текст чекбокса помещаем в div с классом «text». Стили передаем с input:checked на div с классом «text» во втором примере:

HTML:

Таким образом, в зависимости от ситуации, всегда можно выбрать подходящий вариант расположения input и label. Если по какой-то причине не подходит вариант, когда input расположен перед label, можно расположить input внутрь тега label.

Стилизовать checkbox html можно также и с помощью скриптов (javascript, jQuery), современные браузеры прекрасно с ними справляются. Но если пользователь заходит на сайт со старого браузера, то предпочтение все же стоит отдать CSS.

Также нужно учесть, что на разных операционных системах стили «чекбоксов» будут смотреться по-разному. Если Google Chrome старается сглаживать эти различия, то на других браузерах дизайн кнопок может сильно отличаться.

Получение и обработка значений с помощью PHP

Рассмотрим для checkbox html примеры использования в формах, где возможно также получать значения (value = «мое_значение»).

Значения записываем в оператор value=»».

При отправке формы, массив $_POST будет содержать в ключе массива оператор name=»», а значение — value = «».

Если бы это был обычный массив, то выглядел он так:

или

Преобразуем массив $_POST в строку с помощью функции PHP implode() и присвоим значение $_POST переменой $ajax. Обычно для всех значений $_POST создают переменные, но для примера, запишем только одну, чтобы не перегружать код лишней информацией. Также необходимо проверять на безопасность входные данные $_POST, но здесь мы этого делать не будем, об этом много написано в других статьях.

PHP:

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

Вариант №1 проверки чокнутого checkbox

Нам потребуется тег input с уникальным идентификатором(id) и еще кнопка по которой мы будем нажимать!

<input type=»checkbox» id=»rules»><i>Я согласен с <a href=»ссылка»>Условиями</a></i>
<button id=»submit»>Создать аккаунт</button>

Далее нам понадобится скрипт, который сможет определить, msk kb накат чекбокс или нет:

if (rules.checked) { alert(«Чекбокс нажат -вариант №1»); } else { alert(«Чекбокс не нажат-вариант №1»); }

Теперь нам понадобится onclick, для отслеживания нажатия на кнопку! И соберем весь код вместе:

<input type=»checkbox» id=»rules»><i>Я согласен с <a href=»https://dwweb.ru/page/more/rules.html» target=»_blank»>Условиями</a></i>

<button id=»submit»>Создать аккаунт</button>

<script>

submit.onclick = function(){

if (rules.checked) { alert(«Чекбокс нажат -вариант №1»); } else { alert(«Чекбокс не нажат-вариант №1»); }

}

</script>

Обработка событий checkbox с использованием JavaScript

Теперь нужно привязать к чекбоксу событие, чтобы проверять его состояния, и выводить сообщение, если флажок не установлен

Обратите внимание, что я добавил к чекбоксу свойство checked, которое будет задано по умолчанию

Существует два события, которые можно привязать к чекбоксу. Они будут запускаться после изменения состояния элемента. Это события onclick и onchange.

Событие onchange не вызывается до тех пор, пока состояние checked не будет обновлено. Internet Explorer не запускает событие onсhange, пока с чекбокса не снят фокус ввода. Чтобы избежать этой проблемы, я рекомендую использовать событие onclick.

<input type="checkbox"onclick="checkFluency()"  id="fluency"checked />

В коде HTML я добавляю событие onclick, которое буде вызывать функцию checkFluency():

functioncheckFluency()
{
  varcheckbox=document.getElementById('fluency');
  if(checkbox.checked!=true)
  {
    alert("you need to be fluent in English to apply for the job");
  }
}

В checkFluency() мы отслеживаем состояние чекбокса. Если флажок не установлен, то отображаем предупреждение.

Посмотреть результат

  1. Создать HTML файл, сделать его разметку, применить форматирование и написать код.

Шаг 1. Создайте HTML файл, сделайте его разметку, примените стили и напишите код JavaScript.

Мы создали файл HTML и сохранили его как checkbox.html:

<html>
<head>
<script>
function check()
{
 var check=document.getElementsByTagName('input');
 for(var i=0;i<check.length;i++)
 {
  if(check.type=='checkbox')
  {
   check.checked=true;
  }
 }
}

function uncheck()
{
 var uncheck=document.getElementsByTagName('input');
 for(var i=0;i<uncheck.length;i++)
 {
  if(uncheck.type=='checkbox')
  {
   uncheck.checked=false;
  }
 }
}
</script>
<style>
body
{
 width:100%;
 margin:0 auto;
 padding:0px;
 background-color:#424242;
 font-family:helvetica;
}
#wrapper
{
 text-align:center;
 margin:0 auto;
 padding:0px;
 width:100%;
}
h1
{
 margin-top:50px;
 color:#D8D8D8;
}
h1 p
{
 font-size:14px;
 color:white;
}
input
{
 background:none;
 color:white;
 border:1px solid white;
 width:100px;
 height:50px;
 border-radius:50px;
 margin:10px;
 font-weight:bold;
}
input
{
 width:20px;
 height:20px;
}
td
{
 color:white;
 font-weight:bold;
}
</style>
</head>
<body>
<div id="wrapper">
<input type="button" value="Check All" onclick="check();">
<input type="button" value="Uncheck All" onclick="uncheck();">
<table align='center' cellspacing='10'>
 <tr>
  <td><input type="checkbox"></td><td>PHP</td>
 </tr>
 <tr>
  <td><input type="checkbox"></td><td>HTML</td>
 </tr>
 <tr>
  <td><input type="checkbox"></td><td>JavaScript</td>
 </tr>
 <tr>
  <td><input type="checkbox"></td><td>jQuery</td>
 </tr>
 <tr>
  <td><input type="checkbox"></td><td>CSS</td>
 </tr>
 <tr>
  <td><input type="checkbox"></td><td>MySQL</td>
 </tr>
</table>
</div>
</body>
</html>

Мы написали разметку для input type checkbox JavaScript, и создали две кнопки: одна для того, чтобы выбрать все элементы списка, другая – чтобы отменить выбор всех элементов списка. Две функции – check() и uncheck() ставят или убирают галочки всех чекбоксов. Функция check() проверяет, является ли элемент чекбоксом. Если да, она ставит в нем галочку. Функция uncheck() работает точно так же, как и check(), только снимает галочки со всех чекбоксов.

Вот и все, выбирать или снимать все флажки в input type checkbox при помощи JavaScript просто! Вы можете изменять этот код на ваше усмотрение. Пожалуйста, оставляйте комментарии в форме снизу.

Данная публикация является переводом статьи «Check And Uncheck Checkboxes Using JavaScript» , подготовленная редакцией проекта.

Комментарии

Если ThreeState свойство имеет значение , CheckState значение свойства может быть задано только в коде, а не при взаимодействии с пользователем.If the ThreeState property is set to , the CheckState property value can only be set to in code and not by user interaction.

В следующей таблице описаны System.Windows.Forms.Appearance CheckBox элементы управления в различных состояниях элемента управления стиля и CheckBox.Appearance .The following table describes the System.Windows.Forms.Appearance of the CheckBox control in its different states for the and style control CheckBox.Appearance.

Свойство CheckStateCheckState Внешний вид. ОбычнаяAppearance.Normal Внешний вид. КнопкаAppearance.Button
Отображает галочку CheckBox .The CheckBox displays a check mark. Элемент управления выглядит утопленным.The control appears sunken.
Очередь CheckBox является пустой.The CheckBox is empty. Элемент управления отображается как вызванный.The control appears raised.
Элемент CheckBox отображает галочку и затенен.The CheckBox displays a check mark and is shaded. Элемент управления выглядит плоским.The control appears flat.

Пример: как показать/скрыть веб-форму в зависимости от состояния чекбокса

В этом примере мы используем для jQuery input checkbox checked событие change. Когда ставится или убирается галочка, исполняется соответствующий код.

В демо, ссылка на который приведена ниже, мы скрываем элемент div, содержащий веб-форму. Форма сделана при помощи встроенных классов Bootstrap, поэтому вместе со ссылкой на библиотеку jQuery в разделе <head> также указан CSS-файл Bootstrap.

Отметьте или уберите галочку с чекбокса, чтобы скрыть или показать веб-форму. Для этого используются методы $.show и $.hide:

Посмотреть демо и код онлайн

Полный код примера:

<!DOCTYPE html>
 
<html>
 
<head>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 
 <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 
<script>
 
$(document).ready(function() {
 
$("#demochecked").change(function() {
 
    if(this.checked) {
 
       $("#chkboxdemo").show();
 
    }
 
    else
 
    {
 
       $("#chkboxdemo").hide();
 
    }
 
})
 
});
 
</script>
 
<style>
 
.divcls
 
{
 
width:auto;
 
height: auto;
 
padding:20px;
 
background-color:#4D9999;
 
color:#fff;
 
font-size:15px;
 
}
 
</style>
 
</head>
 
<body>
 
<div class="divcls"><p>jQuery checkbox check/uncheck demo with a form</p>
 
<input type="checkbox" checked id="demochecked"/>Create Account? Yes / No
 
</div>
 
<div class="container" id="chkboxdemo">
 
<h1>Fill in the form below for creating account</h1>
 
    <form class="form-horizontal" role="form">
 
      <div class="form-group">
 
        <label for="name1" class="col-sm-2 control-label">First Name:</label>
 
        <div class="col-sm-4">
 
          <input type="text" class="form-control" name="fname" placeholder="Your First Name">
 
        </div>
 
      </div>
 
      <div class="form-group">
 
        <label for="name1" class="col-sm-2 control-label">Last Name:</label>
 
        <div class="col-sm-4">
 
          <input type="text" class="form-control" name="lname" placeholder="Your Last Name">
 
        </div>
 
      </div>     
 
      <div class="form-group">
 
        <label for="gender1" class="col-sm-2 control-label">Gender:</label>
 
        <div class="col-sm-2">
 
        <select class="form-control" name="ygender">
 
          <option>Male</option>
 
          <option>Female</option>
 
        </select>         
 
        </div>
 
      </div>     
 
      <div class="form-group">
 
        <label for="email1" class="col-sm-2 control-label">Your Email:</label>
 
        <div class="col-sm-5">
 
          <input type="email" class="form-control" name="yemail" placeholder="Enter Email address">
 
        </div>
 
      </div>
 
      <div class="form-group">
 
        <label for="password1" class="col-sm-2 control-label">Password:</label>
 
        <div class="col-sm-3">
 
          <input type="password" class="form-control" name="ypassword" placeholder="(Must be 8 characters long)">
 
        </div>
 
      </div>
 
      <div class="form-group">
 
        <label for="address1" class="col-sm-2 control-label">Address:</label>
 
        <div class="col-sm-5">
 
          <input type="text" class="form-control" name="postaddress" placeholder="Where do you live?">
 
        </div>
 
      </div>           
 
        <div class="col-sm-offset-2 col-sm-5">  
 
        <p><input type="submit" class="btn btn-lg btn-block btn-success" value="Create My Account"></p>
 
        </div>
 
   </div>
 
     </form>
 
</body>
 
</html>

Обратите внимание, как происходит jQuery checkbox checked проверка, и реализуются условия if/else для показа или скрытия формы

Меню

Панель значковЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полной страницыВверх НавигацияОтзывчивый TopnavПанель поискаИсправлена ​​боковая панельБоковая навигацияПолноэкранная навигацияМеню Off-CanvasНаведение с помощью кнопокМеню горизонтальной прокруткиВертикальное менюНижняя навигацияОтзывчивый снимок NavСсылки на нижнюю границуСсылки справаЦентрированные ссылки менюИсправлено менюСлайд-шоу в прокруткеСкрыть Navbar в прокруткеПрикрепленное NavbarВыпадающие окна HoverНажмите «Раскрывающиеся окна»Раскрытие в ТопнавеРаспространение в СиденеОткроется панель NavbarDropupMega MenuпагинацияПанировочные сухариГруппа кнопокГруппа вертикальных кнопокВажная социальная панельОтзывчивый заголовок

Valeur

Une chaîne de caractères () qui représente la valeur de la case à cocher. Cette chaîne de caractères n’est pas affichée côté client mais est envoyée au serveur comme valeur associée à la donnée envoyée avec le nom de la case à cocher. Par exemple :

Dans cet exemple, on a le nom (l’attribut ) utilisé pour la case à cocher avec une valeur (l’attribut ) qui est . Lorsque le formulaire est envoyé, les données seront transmises sous la forme .

Si l’attribut n’était pas renseigné, la valeur par défaut sera (dans l’exemple, les données envoyées au serveur auraient la forme ).

Note : Si la case à cocher n’est pas cochée lorsque le formulaire est envoyé, aucune valeur n’est envoyée au serveur pour indiquer cet état (autrement dit, le client n’envoie pas quelque chose comme ) ; la valeur n’est pas transmise au serveur du tout.

All attributes of input

Attribute name Values Notes
step Specifies the interval between valid values in a number-based input.
required Specifies that the input field is required; disallows form submission and alerts the user if the required field is empty.
readonly Disallows the user from editing the value of the input.
placeholder Specifies placeholder text in a text-based input.
pattern Specifies a regular expression against which to validate the value of the input.
multiple Allows the user to enter multiple values into a file upload or email input.
min Specifies a minimum value for number and date input fields.
max Specifies a maximum value for number and date input fields.
list Specifies the id of a <datalist> element which provides a list of autocomplete suggestions for the input field.
height Specifies the height of an image input.
formtarget Specifies the browsing context in which to open the response from the server after form submission. For use only on input types of «submit» or «image».
formmethod Specifies the HTTP method (GET or POST) to be used when the form data is submitted to the server. Only for use on input types of «submit» or «image».
formenctype Specifies how form data should be submitted to the server. Only for use on input types «submit» and «image».
formaction Specifies the URL for form submission. Can only be used for type=»submit» and type=»image».
form Specifies a form to which the input field belongs.
autofocus Specifies that the input field should be in focus immediately upon page load.
accesskey Defines a keyboard shortcut for the element.
autocomplete Specifies whether the browser should attempt to automatically complete the input based on user inputs to similar fields.
border Was used to specify a border on an input. Deprecated. Use CSS instead.
checked Specifies whether a checkbox or radio button form input should be checked by default.
disabled Disables the input field.
maxlength Specifies the maximum number of characters that can be entered in a text-type input.
language Was used to indicate the scripting language used for events triggered by the input.
name Specifies the name of an input element. The name and value of each input element are included in the HTTP request when the form is submitted.
size Specifies the width of the input in characters.
src Defines the source URL for an image input.
type buttoncheckboxfilehiddenimagepasswordradioresetsubmittext Defines the input type.
value Defines an initial value or default selection for an input field.

チェックボックスの使用

上記で最も基本的なチェックボックスの使用を見てきました。他に必要になりそうなチェックボックスに関するよく使われる機能や技術を見てみましょう。

上記の例では、チェックボックスが1つしか含まれていませんでした。実際の状況では、複数のチェックボックスが発生する可能性があります。それらが互いに完全に無関係であれば、上記のようにすべて別々に処理できます。しかし、もしそれらがすべて関連していれば、事はそう単純ではありません。

例えば、次のデモにはユーザーが関心のあることを選択できるように、複数のチェックボックスが含まれています (完全な版は の章で確認してください)。

この例では、両方のチェックボックスに同じ を設定しました。両方のチェックボックスがチェックされてフォームが送信されると、名前/値の組み合わせの文字列は のように送信されます。データがサーバー側に届いたときには、連想配列以外の方法で解析して、 の値を持つ値を、最後の値だけでなくすべて拾う必要があります。 PHP を使用したやり方としては、例えば、単一のサーバー側の変数で複数のチェックボックスを扱うを参照してください。

チェックボックスを既定でチェック状態にするには、 属性を設定するだけです。次の例を見てください。

上記の例では、チェックボックス自身と同様に、関連する 要素をクリックするとチェックボックスを切り替えられることに気づいたかもしれません。これは HTML フォームのラベルの本当に便利な機能で、特にスマートフォンのような画面の小さい端末でオプションをクリックしやすくなります。

これがフォームに 要素を適切に設定する、アクセシビリティ以外のもう一つの理由です。

チェックボックスにはチェックと未チェックの状態に加え、第三の状態である未決定 (indeterminate) を持つことができます。この状態は項目がオンともオフとも言えない状態です。これは JavaScript から オブジェクトの プロパティを使用して設定されます (HTML の属性を使用して設定することはできません)。

多くのブラウザーでは、未決定の状態のチェックボックスにはボックス内にチェックの代わりに水平線 (ハイフンやマイナス記号のように見えるもの) が引かれます。

このプロパティを使用する機会は多くありません。最もよくある例では、チェックボックスが複数のサブオプション (チェックボックス) を「統括」している場合です。すべてのサブオプションがチェックされたとき、統括しているチェックボックスもチェックされ、すべてのチェックボックスのチェックが外れたとき、統括しているチェックボックスもチェックが外れます。1つ以上のサブオプションが他とは異なる状態にあるとき、統括しているチェックボックスは未決定の状態になります。

これは以下の例に見られます (この発想は CSS Tricks のおかげです)。この例では、製作手順のために収集する材料を追跡しています。材料のチェックボックスをオンまたはオフにすると、 JavaScript の関数はチェックされた材料の総数をチェックします。

  • チェックがない場合、製作手順名のチェックボックスは未チェックになります。
  • 1つまたは2つがチェックされた場合、製作手順名のチェックボックスは に設定されます。
  • 3つともチェックされた場合は、製作手順名のチェックボックスが に設定されます。

ですからこの場合は、材料を集め始めているものの、製作が完成していない状態に が使われます。

メモ: 未決定状態のチェックボックスを持つフォームを送信すると、チェックボックスがチェックされていない場合と同じ結果になります。 — チェックボックスを表すデータは送られません。

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
Добавить комментарий