Делаем красивые кнопки выбора (стилизация radio input)

Дерево из checkbox

Задача:

  1. если хотя бы один чекбокс прямого потомка выделен, то родитель помечен :indeterminate,
  2. если все чекбоксы прямого потомка выделены, то родитель помечен галочкой :checked,
  3. родитель отвечает за снятие/установку галочек всех дочерних чекбоксов,
  4. семантический код,
  5. у дерева может быть неограниченное число уровней, но скрипт и CSS при этом не увеличиваются.

Что не удалось:

  1. если кликнуть по 2, а потом снять галку с 2.1.1, то у 2 и 2.1 будет :indeterminate. Всё верно. Но, если затем нажать на 2, то у 2.1 :indeterminate должно поменяться на :checked, а этого не происходит.

Вот до такой удачной реализации (мало кода для столь объёмного элемента) я дошла путём проб и ошибок. Именно поэтому здесь выложено больше, чем нужно. Это варианты, которые я прорабатывала.

Как сделать полноценное дерево из checkbox

  1. плюсик и минус работают только если ни один из потомков не выделен,
  2. если убрать выделение со всех пунктов, то список скроется, у родителя не будет checked,
  3. если поставить флажок на родителя, то будут выделены все потомки, но показаны только дочерние.
  4. если убрать флажок с родителя, то и потомки не будут выделены, кроме того они будут скрыты.
  5. доработав код, можно чтобы при переходе по разным ссылкам, расположенных, скажем, на разных страницах, на страницу дерева с чекбоксами, раскрывалось дерево на нужном уровне, помечались требуемые чебоксы галочками.

Значение атрибута type: url

Элемент <input> типа url адаптирован для ввода URL-адресов, например адреса какой-либо страницы во всемирной паутине. Строка <input type=»url»> заставляет браузер проверять, правильно ли пользователь ввел URL-адрес. При использовании поля ввода на устройствах с сенсорными экранами, внешний вид встроенной виртуальной клавиатуры будет оптимизирован для отображения символов, наиболее часто встречающихся в URL-дpecax.
Атрибуты для элемента <input> типа url совпадают с текстовым полем (<input type=»text»>).
Некоторые браузеры добавляют специфическую информацию в предупреждающие сообщения, выводимые на экран, при попытке отправить форму с некорректными значениями URL-адреса. Далее приведен пример кода, включающего атрибут placeholder (с англ. — заполнитель), значение которого в виде подсказки будет по умолчанию отображаться, пока поле ввода URL-адреса не получит фокус:

Значение атрибута type: tel

Элемент <input> типа tel применяется для того, чтобы сообщить браузеру, что в соответствующем поле формы пользователь должен ввести телефонный номер. Несмотря на то, что телефонный номер представляет из себя числовой формат вводимых данных, в браузерах поле типа tel ведет себя как обычное текстовое поле ввода. Однако, применение типа поля ввода tel приводит к появлению на экранах мобильных устройств специальной клавиатуры, предназначенной для облегчения ввода информации. Синтаксис поля ввода номера телефона:

  • Результат
  • HTML-код
  • Попробуй сам » /

Телефон:

Значение
Описание

button
Создает кнопку с произвольным действием, действие по умолчанию не определено:

checkbox
Создает флажки, которые напоминают переключатели тем, что дают пользователю возможность выбирать из предложенных вариантов:Я знаю HTML

color

Генерирует палитры цветов обеспечивая пользователям возможность выбирать значения цветов в шестнадцатеричном формате RGB:

date

Позволяет вводить дату в формате дд.мм.гггг.:
День рождения:

datetime-local

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

email

Браузеры, поддерживающие язык HTML5, проверят, соответствует ли введенный посетителем адрес электронной почты принятому стандарту для данного типа адресов:
E-mail:

file
Позволяет загружать файлы с компьютера пользователя:
Выберите файл:

hidden
Создает скрытый элемент, не отображаемый пользователю. Информация,
хранящаяся в скрытом поле, всегда пересылается на сервер и не может быть изменена ни пользователем, ни браузером.

image
Создает элемент в виде графического изображения, действующий аналогично кнопке Submit:

month

Позволяет пользователю вводить год и номер месяца по шаблону гггг-мм:

number

Создает поле, в которое пользователь может вводить только числовое значение. Для типа ввода number браузер предоставляет виджет счетчика, который представляет собой поле, справа от которого находятся две кнопки со стрелками — для увеличения и уменьшения числового значения. Для указания минимальных и максимальных допустимых значений ввода предназначены атрибуты min и max, а также можно установить шаг приращения с помощью атрибута step:
Укажите число (от 1 до 10):

password
Текстовое поле для ввода пароля, в котором все вводимые символы заменяются звездочкой либо другим, установленным браузером значком:
Введите пароль:

radio
Создает элемент-переключатель в виде небольшого кружка (иногда их называют радио-кнопками):
Радио-кнопки:

range

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

reset
Создает кнопку, которая очищает поля формы от введенных пользователем данных:

search

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

submit
Создает стандартную кнопку, активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее на сервер обработчику:

text
Создает однострочное поле ввода текста:

time

Допускает ввод значений в 24-часовом формате, например 17:30. Браузеры отображают его как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускают ввод только значений времени:
Выберите время:

url

Заставляет браузер проверять, правильно ли пользователь ввел URL-адрес. Некоторые браузеры добавляют специфическую информацию в предупреждающие сообщения, выводимые на экран, при попытке отправить форму с некорректными значениями URL-адреса:
Главная страница:

week

Позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг:
Выберите неделю:

Атрибут value

Атрибут value — это строка DOM , содержащая значение радиокнопки. Это значение никогда не показывается пользователю его веб-браузером. Атрибут value используется для того, чтобы точно определить какая из радиокнопок была выбрана пользователем.

Создание группы радиокнопок

Группа радиокнопок определяется путём присвоения каждой радиокнопке в данной группе одного и того же значения атрибута ( name ). Выбор любой радиокнопки в этой группе автоматически отменяет выбор другой радиокнопки в той же группе.

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

HTML будет выглядеть следующим образом:

Здесь Вы видите три радиокнопки, каждая из которых имеет атрибут name со значением «contact» и уникальный атрибут value , который однозначно идентифицирует эту радиокнопку в данной группе. Каждой радиокнопке присвоен уникальный id , связанный с тегом представляет собой подпись к элементу пользовательского интерфейса.»> через атрибут for для установления связи между конкретной меткой и конкретной радиокнопкой.

Вы можете опробовать этот код здесь:

Представление данных группы радиокнопок

Когда представленная выше форма отправляется на сервер с информацией о выбранной радиокнопке, то её данные включают запись в виде «contact=name». Например, если пользователь кликает на радиокнопку «Phone», а затем отправляет форму на сервер, данные формы будут включать в себя строку «contact=phone» .

Если Вы пренебрежёте атрибутом value в Вашем HTML, то отправленные данные просто присвоят данной группе значение «on» . То есть, если пользователь кликнет на радиокнопку «Phone» и отправит форму, итоговые данные отобразятся как «contact=on» и будут абсолютно бесполезны. Поэтому никогда не забывайте указывать атрибут value !

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

Поскольку отправлять пустую форму в большинстве случаев не имеет никакого смысла, то разумно оставлять одну радиокнопку активированной по умолчанию с помощью атрибута «checked» . Смотрите здесь Selecting a radio button by default.

Давайте добавим немного кода в наш пример для того, чтобы изучить данные, полученные из этой формы. HTML изменяется путём добавления блока

Затем добавим немного JavaScript. Установим слушателя для события submit , которая будет отправляться при клике пользователя на кнопку «Отправить»:

Опробуйте этот пример и убедитесь, что для группы радиокнопок «contact» будет только один результат.

Как работают HTML формы

Формы состоят из двух частей: HTML разметка (то что отображается на веб-странице) и обработка данных на клиентской (проверка заполнения полей, проверка корректности введенной информации и т.д.) или серверной стороне (сохранение введенных данных, отправка электронных писем и т.д.). Обработка данных формы на сервере обычно написана на PHP, Ruby on Rails, Perl, Python, Node.js и Java.

Рассмотрим пошаговую работу формы:

  1. посетитель заходит на страницу с формой, заполняет ее и отсылает
  2. браузер отсылает данные из формы на сервер
  3. сервер получает данные и передает их сценарию для обработки
  4. серверный сценарий обрабатывает данные и создает новую HTML-страницу с ответом, которую он передает обратно веб-серверу
  5. веб-сервер отправляет страницу с ответом обратно браузеру
  6. браузер получает страницу и отображает ее

HTML Tutorial

HTML HOMEHTML IntroductionHTML EditorsHTML BasicHTML ElementsHTML AttributesHTML HeadingsHTML ParagraphsHTML StylesHTML FormattingHTML QuotationsHTML CommentsHTML Colors
Colors
RGB
HEX
HSL

HTML CSSHTML Links
Links
Link Colors
Link Bookmarks

HTML Images
Images
Image Map
Background Images
The Picture Element

HTML TablesHTML Lists
Lists
Unordered Lists
Ordered Lists
Other Lists

HTML Block & InlineHTML ClassesHTML IdHTML IframesHTML JavaScriptHTML File PathsHTML HeadHTML LayoutHTML ResponsiveHTML ComputercodeHTML SemanticsHTML Style GuideHTML EntitiesHTML SymbolsHTML EmojisHTML CharsetHTML URL EncodeHTML vs. XHTML

Definition and Usage

The defines a radio button.

Radio buttons are normally presented in radio groups (a collection of radio buttons
describing a set of related options). Only one radio button in a group can
be selected at the same time.

Note: The radio group must have share the same name (the
value of the attribute) to be treated as a group. Once the radio group is
created, selecting any radio button in that group automatically deselects any
other selected radio button in the same group. You can have as many radio groups
on a page as you want, as long as each group has its own name.

Note: The attribute defines the unique value
associated with each radio button. The value is not shown to the user, but is
the value that is sent to the server on «submit» to identify which radio button
that was selected.

Tip: Always add the tag
for best accessibility practices!

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()

Элементы

Наиболее часто используемым элементом в формах является <input>. Он позволяет добавить в форму различные элементы для ввода данных. Какой именно элемент ввода данных будет отображен на экране определяется с помощью атрибута type:

type=»text»
Значение text создает однострочное текстовое поле:

Попробовать »

Атрибут name требуется большинству элементов формы, так как его значение передается на сервер и используется серверными сценариями.
Примечание: обратите внимание, что элемент относится к пустым элементам и не имеет закрывающего тега, поэтому перед или после элемента обычно добавляют текст (метка), содержащий информацию о том, какую информацию нужно вводить в текущее поле.

type=»submit»
Создает кнопку, при нажатии на которую браузер отправляет форму на сервер:

Атрибут value задает текст, который будет отображен на кнопке, заменяя значение установленное по умолчанию.

type=»radio»
Создает элементы управления, позволяющие выбрать только один вариант из предложенных, то есть такие элементы управления являются взаимозаменяемыми. Они называются радио кнопками или переключателями:

данет

Попробовать »

Все радио кнопки, связанные с заданными вариантами значений, должны иметь одинаковое значение атрибута name, но каждая отдельная радио кнопка должна иметь уникальное значение атрибута value.

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

).

type=»checkbox»
Создает элементы управления, позволяющие пользователям отмечать любое количество вариантов или отменить выбор, не выбрав ни одно из предложенных значений

Такие элементы управления называют флажками.

Соль

Перец

Чеснок

Попробовать »

Все флажки, относящиеся к одной группе, должны иметь одинаковое значение атрибута name, но каждый отдельный вариант должен иметь уникальное значение атрибута value.

Примечание: все допустимые значения атрибута type смотрите в нашем HTML справочнике в описании элемента <input>.

Input Type Submit

defines a button for
submitting form data to a form-handler.

The form-handler is typically a server page with a script for processing
input data.

The form-handler is specified in the form’s
attribute:

Example

<form action=»/action_page.php»>  <label for=»fname»>First
name:</label><br>  <input type=»text» id=»fname» name=»fname»
value=»John»><br>  <label for=»lname»>Last name:</label><br> 
<input type=»text» id=»lname» name=»lname» value=»Doe»><br><br> 
<input type=»submit» value=»Submit»></form>

This is how the HTML code above will be displayed in a browser:

If you omit the submit button’s value attribute, the button will get a default text:

Example

<form action=»/action_page.php»>  <label for=»fname»>First
name:</label><br>  <input type=»text» id=»fname» name=»fname»
value=»John»><br>  <label for=»lname»>Last name:</label><br> 
<input type=»text» id=»lname» name=»lname» value=»Doe»><br><br> 
<input type=»submit»></form>

HTML Tags

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

How To Create a Custom Checkbox

Step 1) Add HTML:

<label class=»container»>One  <input type=»checkbox»
checked=»checked»>  <span class=»checkmark»></span></label><label class=»container»>Two  <input type=»checkbox»> 
<span class=»checkmark»></span></label>
<label class=»container»>Three  <input type=»checkbox»> 
<span class=»checkmark»></span></label><label class=»container»>Four 
<input type=»checkbox»>  <span class=»checkmark»></span></label>

Step 2) Add CSS:

/* Customize the label (the container) */.container {  display: block; 
position: relative;  padding-left: 35px;  margin-bottom:
12px;  cursor: pointer;  font-size: 22px;  -webkit-user-select:
none;  -moz-user-select: none;  -ms-user-select: none; 
user-select: none;}/* Hide the
browser’s default checkbox */.container input {  position: absolute; 
opacity: 0;  cursor: pointer;  height: 0;  width:
0;
}/* Create a custom checkbox */.checkmark {  position:
absolute;  top: 0;  left: 0;  height: 25px; 
width: 25px;  background-color: #eee;}/* On mouse-over, add a grey background color */.container:hover
input ~ .checkmark {  background-color: #ccc;}/* When the
checkbox is checked, add a blue background */.container input:checked ~
.checkmark {  background-color: #2196F3;}/* Create the
checkmark/indicator (hidden when not checked) */.checkmark:after { 
content: «»;  position: absolute;  display: none;}/* Show the
checkmark when checked */.container input:checked ~ .checkmark:after { 
display: block;}/* Style the checkmark/indicator */.container
.checkmark:after {  left: 9px;  top: 5px;  width:
5px;  height: 10px;  border: solid white; 
border-width: 0 3px 3px 0;  -webkit-transform: rotate(45deg); 
-ms-transform: rotate(45deg);  transform: rotate(45deg);}

HTML Reference

HTML by AlphabetHTML by CategoryHTML Browser SupportHTML AttributesHTML Global AttributesHTML EventsHTML ColorsHTML CanvasHTML Audio/VideoHTML Character SetsHTML DoctypesHTML URL EncodeHTML Language CodesHTML Country CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts

HTML Tags

<!—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>

HTML тег

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

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

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

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

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

Input Type Reset

defines a reset button
that will reset all form values to their default values:

Example

<form action=»/action_page.php»>  <label for=»fname»>First
name:</label><br>  <input type=»text» id=»fname» name=»fname»
value=»John»><br>  <label for=»lname»>Last name:</label><br> 
<input type=»text» id=»lname» name=»lname» value=»Doe»><br><br> 
<input type=»submit» value=»Submit»>  <input type=»reset»></form>

This is how the HTML code above will be displayed in a browser:

If you change the input values and then click the «Reset» button, the form-data will be reset to the default values.

Элементы и

Для визуального выделения взаимосвязанных элементов формы можно воспользоваться элементом <fieldset>, который добавляет рамку вокруг своих дочерних элементов:

<form action="myform.php" method="post">

  <input type="radio" name="response" value="yes">да<br>
  <input type="radio" name="response" value="no">нет
  
  <fieldset>
    <p><input type="checkbox" name="spice" value="Salt">Соль</p>
    <p><input type="checkbox" name="spice" value="Pepper">Перец</p>
    <p><input type="checkbox" name="spice" value="Garlic">Чеснок</p>
  </fieldset>
  
</form>

Попробовать »

Название (заголовок) для такой группы элементов можно указать с помощью элемента <legend>, который должен быть первым дочерним элементом внутри элемента <fieldset>:

<form action="myform.php" method="post">

  <input type="radio" name="response" value="yes">да<br>
  <input type="radio" name="response" value="no">нет
  
  <fieldset>
    <legend>Специи</legend>
    <p><input type="checkbox" name="spice" value="Salt">Соль</p>
    <p><input type="checkbox" name="spice" value="Pepper">Перец</p>
    <p><input type="checkbox" name="spice" value="Garlic">Чеснок</p>
  </fieldset>
  
</form>

Попробовать »

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