Стилизация переключателей (радио-кнопок) в CSS

Радио-кнопки подразумевают, что вы выбираете один элемент из некоторого количества, поэтому элемент <input type="radio"> получил название переключателя в отличие от флажков, которые подразумевают множественный выбор. Браузеры довольно неплохо отображают радиокнопки по умолчанию.

Выбор 1 Выбор 2 Выбор 2

Однако, вам может понадобится как-то стилизовать эти элементы для своего сайта.

Как правило, стилизация радио-кнопок основана на использовании такого элемента, как label, клик на котором приводит к выбору определенного переключателя, с которым <label> связан с помощью атрибута for, в котором указывается id переключателя. Второй вариант — это когда в разметке радио-переключатель находится внутри элемента label.

Простой пример

Радио-кнопки, похожие на флажки

Если вы хотите стилизовать переключатели в виде флажков — пример от Andrew Vereshchak — как раз то, что нужно.

See the Pen Toggle radio intput with the label by Andrew Vereshchak (@multum) on CodePen.18892

Переключатели с изменением цвета и иконки

Здесь автор Andrew использовал абсолютное позиционирование для отдельного блока с классом .switch, в который входят 2 <label> и <span>. Также здесь не обошлось без

See the Pen Awesome Toggle Button by Andrew (@theawesomecoder61) on CodePen.18892

Разноцветные радио-кнопки

В этом примере от Dronca Raul каждый переключатель имеет свой цвет и галочку внутри при щелчке на элементе.

Используем переключатели для выбора цвета

В этом примере тема цветов для переключателей продолжается. Здесь мы не только прячем элемент <input type="radio"> с помощью CSS, но и изменяем фоновый цвет элемента с id="output" на тот, который указан в качестве value для <input> и фона для span-элемента, вло женного в <label>.

See the Pen Radio Color Picker by Elen (@ambassador) on CodePen.18892

Переключатели Да-Нет-Возможно

Еще одно цветовое решение от Matthew Blode.

See the Pen Flat Radio — Yes/No by Matthew Blode (@mblode) on CodePen. 18892

Переключатель макета

Этот пример от Naoya очень удобен для демонстрации макетов с разной шириной. Интересно, что радио-кнопки, а точнее заменяющие их элементы label выглядят как … ссылки с подчеркиванием выбранного (

See the Pen CSS Switch Layout by Naoya (@nxworld) on CodePen.18892

Переключатель для света

Автор Ryan Mulligan

See the Pen Isometric Light Switch by Elen (@ambassador)
on CodePen.0

Выбор блюд

В этом примере от Kris Hedstrom радио-кнопки в какой-то степени похожи на чекбоксы (флажки) — они отмечают ваш выбор в виде галочки.

See the Pen Snacks? Flat radio button inputs… by Kris Hedstrom (@kristofferh) on CodePen.18892

Использование радио-кнопок для выставления рейтинга в виде звездочек

Автор Stas Melnikov 

See the Pen Pure CSS Rating via CSS Custom Properties as API by Stas Melnikov (@melnik909) on CodePen.18892

Анимация при переключении выбора

Несколько примеров, в которых использована анимация при переключении между радио-кнопками.

Автор: Tommaso Poletti

See the Pen Jelly Radio Button by Tommaso Poletti (@tomma5o) on CodePen. 18892

Простые переключения с эффектом вдавливания от Pamela Dayne

See the Pen Just very simple radio buttons by Pamela Dayne (@pamdayne) on CodePen.18892

Переключение с перепрыгиванием  от Jon Kantner

See the Pen Radio Hopping by Jon Kantner (@jkantner)
on CodePen.0

Автор Liam использовал для анимации JS-код.

See the Pen Bulgy radios by Liam (@liamj) on CodePen.18892

Интересное решение с радио-кнопками на темном фоне от Andrej Sharapov

See the Pen Animated SVG radio buttons by Andrej Sharapov (@andrejsharapov) on CodePen.

Анимация и стили как для радио-кнопок, так и для флажков от WILDER TAYPE.

See the Pen Ripple animation on input type radio and Checkbox by WILDER TAYPE (@wilder_taype) on CodePen.18892

Использование маски

See the Pen Underground radios by Mikael Ainalem (@ainalem) on CodePen.18892

«Текущая» кнопка

Замечательное решение для переключения кнопок меню

See the Pen Material Radio Button by CODEARMADA (@montechristos) on CodePen. 18892

Последовательное и быстрое заполнение кнопки

Выбираем кредитную карту вместе с Dean

See the Pen Recreation: Card theme switcher by Dean (@visualcookie) on CodePen.18892

Перепрыгивающий шарик от Jon Kantner

Вариант 1

See the Pen Radio Buttons With Marble and Wood by Jon Kantner (@jkantner) on CodePen.18892

Вариант 2

Вариант 3 от web-tiki 

See the Pen CSS only input radio select concept by web-tiki (@web-tiki) on CodePen.18892

Переключатели в виде блоков с иконками

Автор Gabriel Ferreira предлагает использовать переключатели в виде блоков с анимированными иконками. Это можно сделать не только для Front-End/Back-End, но и для любых других текстов.

See the Pen Radio Button Big Square [Just CSS] by Gabriel Ferreira (@gabrielferreira) on CodePen.18892

Переключатель мужчина-женщина

See the Pen Radio button styling by Morten Olsen (@morten-olsen) on CodePen. 18892

Соединительные линии, ведущие к радио-кнопкам

See the Pen Radio Button Circuit by LukasOe (@lukasoe) on CodePen.18892

Переключатели с отметкой в верхнем углу блока

При клике на блоке выбор отмечается сменой цвета и галочкой в круге от Rosa.

See the Pen Checkout Form by Rosa (@RRoberts) on CodePen.18892

Радио-кнопки как переключатели для радио от Jon Kantner

Вариант 1

See the Pen Literal Radio Buttons by Jon Kantner (@jkantner) on CodePen.18892

Вариант 2

See the Pen Literal Radio Buttons (Neumorphic Version) by Jon Kantner (@jkantner) on CodePen. 18892

Радио-кнопки для вкладок (табов)

Ronny Siikaluoma предлагает вам использовать радио-кнопки для формирования отзывчивых (адаптивных) вкладок. Заметьте, без всякого JavaScript.

See the Pen Responsive Tabs with Pure CSS by Ronny Siikaluoma (@siiron) on CodePen.18892

Еще один вариант вкладок от Tristan White

See the Pen Tabs (checkbox-hack) by Tristan White (@triss90) on CodePen.18892

Выбор билетов с ценой и временем от Dannie Vinther

See the Pen Choose Ticket [a11y] by Dannie Vinther (@dannievinther) on CodePen. 18892

Социальные кнопки

В этом примере от Aron использованы не только радио-кнопки, но и флажки (чекбоксы). При клике на элемент вы увидите pop-up окно с названием выбранной компании или соцсети.

See the Pen Pure CSS Option ( radio & checkbox ) No JS by Aron (@Aoyue) on CodePen.18892

Переключение иконок Google maps

See the Pen Google maps radio buttons CSS only by Elias Meire (@eliasmeire) on CodePen.18892

Переключение цветовых блоков

В этом примере от Ivan Grozdic элементы label выглядят и работают как ссылки, но без JavaScript, сортируя цветовые блоки.

See the Pen Content filter v2 — pure css — #09 by Ivan Grozdic (@ig_design) on CodePen. 18892

Использование радио-кнопок для фильтации по категориям

Автор примера от ресурса Envato Tuts+ предлагают css-код, который без JavaScript служит для фильтрации категорий портфолио.

See the Pen
Build a Filtering Component in Pure CSS by Envato Tuts+ (@tutsplus)
on CodePen.0

Просмотров: 3 001

Стильные чекбоксы и радиокнопки на CSS3

Мы все хорошо знакомы с HTML чекбоксами и радиокнопками. Больше всего расстраивает то, что нет способа изменить их внешний вид. Они могут выглядеть по-другому в зависимости от вашей операционной системы или браузера, но мы не можем изменить их используя CSS.

Это может раздражать большинство дизайнеров, которые хотят сделать эти элементы привлекательными, чтобы они не испортили дизайн. В этом посте я покажу вам, как заставить их выглядеть очень мило с помощью простого трюка. Давайте приступим!

Скройте чекбоксы

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

.section input[type="radio"],
.section input[type="checkbox"]{
  display: none;
}

Вы можете спросить, а что же мы будем делать без них? Но не переживайте, мы сделаем наши собственные чекбоксы.

Радиокнопки

Во-первых, вот наша разметка:

<section>
    <div>
      <input type="radio" name="group1">
      <label for="radio-1"><span>Coffee</span></label>
    </div>
    <div>
      <input type="radio" name="group1">
      <label for="radio-2"><span>Tea</span></label>
    </div>
    <div>
      <input type="radio" name="group1">
      <label for="radio-3"><span>Cappuccino</span></label>
    </div>
</section>

Теперь у нас есть раздел с тремя радиокнопками. Мы рассмотрим чекбоксы чуть позже в этом посте, по тому же принципу. Каждый input обернут в div с классом container. Кроме того, каждый input имеет label со span в нём.

Поскольку мы скрыли входы радио и чекбоксов, единственный способ для нас получить к ним доступ — использовать label тег. Для правильной работы тег label должен содержать атрибут «for» с идентификатором соответствующего ввода. Если вход имеет идентификатор «radio-1», то атрибут «for» также должен быть «radio-1». Вы можете удивиться, почему текст внутри каждого label обернут в span:

<div>
      <input type="radio" name="group1">
      <label for="radio-1"><span>Coffee</span></label>
</div>

Так как мы собираемся стилить кнопки с псевдоэлементами «::before и «::after, нам понадобиться родительский элемент, на основе которого они могут быть расположены. В этом случае это будет наш label:

.container label {
  position: relative;
}

Вот стили, которые подходят как для чекбоксов, так и для радиокнопок:

. container span::before,
.container span::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

Свойства top и bottom установлены на ноль и объединены с «margin: auto;» это позволяет нашим элементам иметь центральное горизонтальное положение.

Вот как выглядят остальные стили:

.container span.radio:hover {
  cursor: pointer;
}
.container span.radio::before {
  left: -52px;
  width: 45px;
  height: 25px;
  background-color: #A8AAC1;
  border-radius: 50px;
}
.container span.radio::after {
  left: -49px;
  width: 17px;
  height: 17px;
  border-radius: 10px;
  background-color: #6C788A;
  transition: left .25s, background-color .25s;
}
input[type="radio"]:checked + label span.radio::after {
  left: -27px;
  background-color: #EBFF43;
}

Самая важная часть — последний набор правил, в котором в основном и заключается вся фишка. Псевдокласс «: checked» позволяет нам вносить изменения в элементы при проверке ввода. С помощью селектора ‘+’ мы можем выбрать следующий родственный элемент и нацелить наш «span.radio», где мы применяем новые правила к псевдоэлементу «:: after». В этом случае мы меняем его горизонтальное положение и цвет. Чтобы сделать переключение плавным, мы назначаем переход 0,25 секунды для свойства left и background-color. Теперь, когда мы нажимаем переключатель, переключатель движется плавно, а не быстро.

Чекбоксы

Если вам нужно создать настраиваемые чекбоксы, метод тот же. Взгляните на стили:

.container span.checkbox::before {
  width: 27px;
  height: 27px;
  background-color: #fff;
  left: -35px;
  box-sizing: border-box;
  border: 3px solid transparent;
  transition: border-color .2s;
}
.container span.checkbox:hover::before {
  border: 3px solid #F0FF76;
}
.container span.checkbox::after {
  content: '\f00c';
  font-family: 'FontAwesome';
  left: -31px;
  top: 2px;
  color: transparent;
  transition: color . 2s;
}
input[type="checkbox"]:checked + label span.checkbox::after {
  color: #62AFFF;
}

Единственная разница в том, что мы будем использовать иконку из семейства FontAwesome, в качестве нашего псевдоэлемента «::after». По умолчанию она прозрачная, но когда флажок установлен, иконка станет синей.

Если вы хотите использовать иконку FontAwesome в своем псевдоэлементе, вы должны включить её код в свойство content и указать свойство font-family как «FontAwesome». Например:

{
content: '\f00c';
font-family: 'FontAwesome';
}

Коду «f00c» предшествует обратный слеш, который нужен для отображения символа Юникода.

Юникод можно найти на странице выбранной вами иконки:

Финал

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

Но, как говориться лучше один раз увидеть, чем сто раз прочитать. Поэтому предлагаю посмотреть несколько туториалов, чтобы лучше разобраться в процессе.

***

Надеюсь, в этом посте вы нашли полезную и понятную для себя информацию. Буду рада вашим комментариям 🙂

Как структурировать HTML-формы — Изучение веб-разработки

Получив базовые знания, теперь мы более подробно рассмотрим элементы, используемые для придания структуры и значения различным частям форм.

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

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

Элемент <form> формально определяет форму и атрибуты, которые определяют поведение этой формы. Каждый раз, когда вы хотите создать HTML-форму, вам нужно начать с создания элемента <form>, поместив внутрь него всё содержимое. Многие вспомогательные технологии или браузерные плагины могут обнаруживать элементы <form> и реализовывать специальные хуки, чтобы их было проще использовать.

Мы уже встречались с этим в предыдущей статье.

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

Стоит учесть, что всегда можно использовать элементы формы вне <form>. Тогда по умолчанию этот элемент формы не имеет ничего общего со всеми формами. Вы можете связать его с формой с помощью атрибута form. В HTML5 был представлен атрибут form для элементов HTML форм, который позволяет  явно связать элемент с формой, даже если он не заключён внутри <form>.

Элемент <fieldset> — это удобный способ стилистической и семантической группировки элементов формы. Вы можете установить заголовок <fieldset>, добавив элемент <legend> сразу после открывающего тега <fieldset>. Текст элемента <legend> формально описывает назначение содержимого <fieldset>.

Различные вспомогательные технологии будут использовать <legend> как часть метки label всех элементов внутри <fieldset>.  Например, такие экранные дикторы как Jaws или NVDA произносят заголовок формы <legend> перед произношением названия меток элементов.

Небольшой пример:

<form>
  <fieldset>
    <legend>Fruit juice size</legend>
    <p>
      <input type="radio" name="size" value="small">
      <label for="size_1">Small</label>
    </p>
    <p>
      <input type="radio" name="size" value="medium">
      <label for="size_2">Medium</label>
    </p>
    <p>
      <input type="radio" name="size" value="large">
      <label for="size_3">Large</label>
    </p>
  </fieldset>
</form>

Читая эту форму, экранный диктор произнесёт «Fruit juice size small» для первого элемента, «Fruit juice size medium» — для второго, «Fruit juice size large» — для третьего.

Вариант использования в этом примере является одним из наиболее важных. Каждый раз, когда у вас есть набор переключателей, вам нужно поместить их внутри <fieldset>. Также <fieldset> можно использовать для разделения формы. В идеале, длинную форму разделяют на несколько страниц, однако, если она должна находиться на одной странице, распределение связанных элементов в разные <fieldset> может повысить удобство использования.

Из-за своего влияния на вспомогательные технологии элемент <fieldset> является одним из ключевых элементов для построения доступных форм; однако вы не должны им злоупотреблять. Если возможно, старайтесь проверять, как экранный диктор интерпретирует вашу форму. 

В предыдущей статье мы увидели, что элемент <label> принято использовать для указания текстов-подсказок (лейблов) в HTML-формах. Это самый важный элемент для построения доступных форм — при правильной реализации скринридеры будут озвучивать текст-подсказку вместе со связанными элементами. Посмотрите на этот пример из предыдущей статьи:

<label for="name">Name:</label> <input type="text" name="user_name">

При правильно связанном элементе <label> с элементом <input> через атрибуты for и id соответственно (атрибут for ссылается на атрибут id соответствующего виджета формы), скринридер прочтёт вслух что-то наподобие «Name, edit text».

Если <label> не правильно установлен, скринридер прочитает это как «Edit text blank», что не несёт в себе никакой уточняющей информации, позволяющей понять предназначение данного текстового поля.

Обратите внимание на то, что виджет формы может быть вложен в элемент <label>, как на примере:

<label for="name">
  Name: <input type="text" name="user_name">
</label>

Однако даже в таких случаях лучше всё равно указывать атрибут for, так как некоторые вспомогательные технологии не распознают неявную связь между текстами-подсказками и виджетами.

Лейблы тоже кликабельны!

Ещё одно преимущество при правильно установленных текстах-подсказках заключается в том, что по ним можно кликнуть для активации связанных с ними виджетов. Это поддерживается во всех браузерах. Это удобно как для текстовых полей ввода, в которых устанавливается фокус при клике на текст-подсказку, так и для радио-кнопок и чекбоксов — область попадания такого элемента управления может быть очень маленькой, поэтому полезно сделать её как можно больше.

Например:

<form>
  <p>
    <label for="taste_1">I like cherry</label>
    <input type="checkbox" name="taste_cherry" value="1">
  </p>
  <p>
    <label for="taste_2">I like banana</label>
    <input type="checkbox" name="taste_banana" value="2">
  </p>
</form>

Несколько лейблов

На самом деле вы можете добавить несколько текстов-подсказок на один виджет формы, но это не очень хорошая идея, так как у некоторых вспомогательных технологий могут возникнуть проблемы с обработкой такой структуры. Вместо использования нескольких лейблов, лучше вложить виджет формы внутрь одного элемента <label>. 

Рассмотрим этот пример:

<p>Required fields are followed by <abbr title="required">*</abbr>.</p>


<div>
  <label for="username">Name:</label>
  <input type="text" name="username">
  <label for="username"><abbr title="required">*</abbr></label>
</div>


<div>
  <label for="username">
    <span>Name:</span>
    <input type="text" name="username">
    <abbr title="required">*</abbr>
  </label>
</div>


<div>
  <label for="username">Name: <abbr title="required">*</abbr></label>
  <input type="text" name="username">
</div>

Параграф на первой строке примера описывает правило для обязательных элементов. Вначале необходимо убедиться, что вспомогательные технологии, такие как программы чтения с экрана, отображают или озвучивают их пользователю, прежде чем он найдёт требуемый элемент.  Таким образом они будут знать, что означает звёздочка. Программа чтения с экрана будет произносить звёздочку как «звёздочку» или «обязательно», в зависимости от настроек программы чтения с экрана — в любом случае, первый абзац даёт понимание того, что будет означать звёздочка далее в форме.

• В первом примере лейбл не будет прочитан вместе с текстовым полем — получится лишь «edit text blank» и отдельно читаемые тексты-подсказки. Множественные элементы <label> могут быть неправильно интерпретированы программой чтения с экрана.
• Второй пример немного лучше — лейбл будет прочитан вместе с текстовым полем и будет звучать как «name star name edit text», однако тексты-подсказки всё ещё разделены. Это всё ещё немного сбивает с толку, но на этот раз ситуация немного лучше, потому что с текстовое поле связано с текстом-подсказкой.
• Третий пример — лучший, так как весь лейбл будет связан с текстовым полем и озвучен целиком, а при чтении текст будет звучать как «name star edit text».

Примечание: В зависимости от программы для чтения с экрана результаты могут немного отличаться. В данной статье для тестирования использовался VoiceOver (NVDA ведёт себя аналогично). Также мы были бы рады, если бы вы поделились своим опытом.

Примечание: вы можете найти этот пример на GitHub required-labels.html (также можно посмотреть вживую). Запускайте пример, закомментировав остальные, иначе скриридеры не смогут правильно распознать контент, если у вас будет несколько лейблов и несколько текстовых полей с одинаковым ID!

Помимо структур, характерных только для HTML-форм, хорошо помнить, что формы — это просто HTML. Это означает, что вы можете использовать всю мощь HTML для структурирования HTML-формы.

Как вы можете заметить в примерах, оборачивать лейбл и виджет формы в элемент <div> — это общепринятая практика. Элемент <p> также часто используется, как и HTML-списки (последние часто используются для структурирования множественных чекбоксом или радио-кнопок).

В добавок к элементу <fieldset> часто используют HTML-заголовки (например, <h2> (en-US), <h3> (en-US)) и секционирование (например, <section>) для структурирования сложных форм.

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

Каждый отдельный раздел функциональности содержится в элементах <section> и <fieldset>, содержащий переключатели. Каждый отдельный раздел функциональности должен находиться в отдельном элементе <section> с элементами <fieldset>, содержащими переключатели.

Активное обучение: построение структуры формы

Давайте применим эти идеи на практике и построим более сложноструктурируемую форму — формы оплаты. Форма будет содержать некоторые типы виджетов формы, которые вы можете пока не понять — не переживайте об этом, вы найдёте информацию в следующей статье (Основные нативные элементы управления формами). А пока внимательно прочитайте описание, следуя приведённым ниже инструкциям, и начинайте формировать представление о том, какие элементы обёртки мы используем для структурирования формы и почему.

1. Для начала сделайте локальную копию пустого шаблона и CSS для нашей платёжной формы в новой директории на вашем компьютере.
2. Сначала подключите CSS к HTML, добавив следующую строку кода внутрь HTML-элемента <head>:

   <link href="payment-form.css" rel="stylesheet">

3. Далее начните создавать свою форму с добавления внешнего элемента <form>:
4. Внутри тега <form>, добавьте заголовок и параграф, информирующий пользователей о том, как помечены поля, обязательные для заполнения:

   <h2>Payment form</h2>
   <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>

5. Далее нам надо добавить более крупный кусок кода под нашей предыдущей записью. Здесь вы можете увидеть, что мы оборачиваем поля с контактной информацией в отдельный элемент <section>. Более того, у нас есть набор из двух радио-кнопок, каждую из которых мы помещаем в отдельный элемент списка (<li>). Наконец, у нас есть два текстовых поля <input> и связанные с ними элементы <label>, которые находятся внутри элементов <p>, а также поле для ввода пароля. Добавьте этот код в вашу форму:

   <section>
       <h3>Contact information</h3>
       <fieldset>
         <legend>Title</legend>
         <ul>
             <li>
               <label for="title_1">
                 <input type="radio" name="title" value="M." >
                 Mister
               </label>
             </li>
             <li>
               <label for="title_2">
                 <input type="radio" name="title" value="Ms.">
                 Miss
               </label>
             </li>
         </ul>
       </fieldset>
       <p>
         <label for="name">
           <span>Name: </span>
           <strong><abbr title="required">*</abbr></strong>
         </label>
         <input type="text" name="username">
       </p>
       <p>
         <label for="mail">
           <span>E-mail: </span>
           <strong><abbr title="required">*</abbr></strong>
         </label>
         <input type="email" name="usermail">
       </p>
       <p>
         <label for="pwd">
           <span>Password: </span>
           <strong><abbr title="required">*</abbr></strong>
         </label>
         <input type="password" name="password">
       </p>
   </section>

6. Сейчас мы перейдём к второму разделу <section> нашей формы — платёжной информации. В этом разделе у нас есть три отдельных виджета формы со связанными с ними лейблами, находящимися внутри тега <p>. Первый — это выпадающее меню (<select>) для выбора типа кредитной карты. Второй — это элемент <input> с типом number для ввода номера карты. Последний виджет — это элемент <input> с типом date для указания даты окончания действия карты (должен будет появиться виджет с выбором даты или обычное текстовое поле в браузерах, не поддерживающих данные тип). Более новые типы полей описаны в статье The HTML5 input types.

   Вставьте следующий код под предыдущим разделом:

   <section>
       <h3>Payment information</h3>
       <p>
         <label for="card">
           <span>Card type:</span>
         </label>
         <select name="usercard">
           <option value="visa">Visa</option>
           <option value="mc">Mastercard</option>
           <option value="amex">American Express</option>
         </select>
       </p>
       <p>
         <label for="number">
           <span>Card number:</span>
           <strong><abbr title="required">*</abbr></strong>
         </label>
         <input type="number" name="cardnumber">
       </p>
       <p>
         <label for="date">
           <span>Expiration date:</span>
           <strong><abbr title="required">*</abbr></strong>
           <em>formatted as mm/yy</em>
         </label>
         <input type="date" name="expiration">
       </p>
   </section>

7. Последняя секция, которую мы добавим выглядит намного проще и содержит в себе только элемент <button> с типом submit, для отправки данных. Добавьте этот код в конец вашей формы:

   <p> <button type="submit">Validate the payment</button> </p>

Вы можете увидеть законченную форму в действии ниже (также её можно найти на GitHub — посмотрите payment-form.html и живой пример):

Вы дошли до конца статьи, но можете ли вспомнить самую важную информацию? Далее вы можете найти тест, который поможет убедиться, что вы усвоили знания прежде чем двигаться дальше — посмотрите Test your skills: Form structure.

Теперь у вас есть все необходимые знания для того, чтобы правильно структурировать вашу HTML-форму. Мы подробнее раскроем затронутые здесь темы в нескольких последующих статьях. В следующей же статье мы изучим все возможные типы виджетов форм, которые могут понадобиться для сбора информации от ваших пользователей.

Дополнительные темы

Подборка оформления кнопок, форм и прочих элементов для сайта

1. Анимированные jQuery CSS3 кнопки

Много различных анимированных CSS3 эффектов для создания потрясающих кнопок для вашего сайта. Просто обалденные эффекты при наведении.

2. Оригинальное оформление чекбоксов с помощью jQuery

3. jQuery оформление элементов пользовательского интерфейса

Плагин jQuery «Uniform». Симпатичное оформление элементов пользовательского интерфейса: чекбоксы, выпадающие списки, радиокнопки.

4. Потрясающее оформление «чекбокосов» на сайте

Очень необычное оформление такого элемента пользовательского интерфейса как «чекбокс». Используемые технологии: jQuery и CSS.

5. Оформление элементов пользовательского интерфейса

Несколько тем оформления веб-форм и элементов пользовательского интерфейса.

6. Оформление поискового поля с применением jQuery

Анимированное оформление поля для ввода поискового запроса. Эффект можно наблюдать при клике мышкой в поле ввода. Кнопка для начала поиска появляется после ввода запроса с клавиатуры.

7. Стильное оформление HTML форм «Ideal Forms»

Эффектные формы с использованим jQuery.

8. jQuery стилизованные чекбоксы и радио-кнопки

9. Checkbox

Интересное оформление чекбоксов с помощью jQuery

10. CSS3 и jQuery кнопки

При наведении курсора мыши появляется описание кнопки или подсказка.

11. Эффектные CSS3 кнопки

Анимированные CSS3 кнопки. Отличный веселый эффект при наведении.

12. Cusor Hover Buttons

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

13. Чекбоксы и радиокнопки

Стильное оформление чекбоксов и радиокнопок с использованием CSS.

14. Плагин «jqTransform»

15. FancyForm

Стильное оформление чекбоксов и радиокнопок.

16. Чекбоксы и радиокнопки «jQuery Checkbox»

Стильное оформление чекбоксов и радиокнопок с использованием CSS.

17. Плагин «ezMark»

18. Чекбоксы и радиокнопки

19. Создание объемных кнопок с помощью CSS3 и jQuery

20. Эффектный календарь для выбора даты с использованием jQuery

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

21. Mootools календарь для выбора даты, плагин «DatePicker»

Мощный плагин. Удобное решение для заполнения поля с датой и временем. Очень много возможных вариантов реализации, с которыми Вы сможете ознакомиться на демонстрационной странице.

Формы в Bootstrap. Часть 2. Оформление для Select, Checkbox и Radio кнопок в Bootstrap « Марк и Марта.Ру. Записки отца-программиста

Элементы управления Checkbox и Radio используются соответственно для множественного или одиночного выбора.

Пример checkbox-кнопок

                <h3>Вертикальные чекбоксы</h3>
                <form role="form">
                    <div>
                        <label>
                            <input type="checkbox" name="cb1" />Обычный чекбокс 1
                        </label>
                    </div>
                    <div>
                        <label>
                            <input type="checkbox" name="cb2" />Обычный чекбокс 2
                        </label>
                    </div>
                    <div>
                        <label>
                            <input type="checkbox" name="cb3" disabled />Заблокированный чекбокс 3
                        </label>
                    </div>
                </form>

Пример radio-кнопок

               <h3>Вертикальные радиокнопки</h3>
                <form role="form">
                    <div>
                        <label>
                            <input type="radio" name="rb" value="radio1" />Радиокнопка обычная 1
                        </label>
                    </div>
                    <div>
                        <label>
                            <input type="radio" name="rb" value="radio2" />Радиокнопка обычная 1
                        </label>
                    </div>
                    <div>
                        <label>
                            <input type="radio" name="rb" value="radio3" disabled />Радиокнопка заблокированная 3
                        </label>
                    </div>
                </form>

Чтобы заблокировать кнопку Checkbox или Radio, нужно добавить класс . disabled в контейнер с кнопкой, а также добавить атрибут disabled для кнопки.

Рис.4. Кнопки Radio и Checkbox вертикально

Радиокнопки и чекбоксы в строку

        <div>
            <div>
                <h2>Радиокнопки в строку</h2>
                <form role="form">
                    <label>
                        <input type="radio" name="rb" value="rb1" /> Значение 1
                    </label>
                    <label>
                        <input type="radio" name="rb" value="rb2" /> Значение 2
                    </label>
                    <label>
                        <input type="radio" name="rb" value="rb3" disabled /> Значение 3
                    </label>
                </form>
            </div>
            <div>
                <h2>Чекбоксы в строку</h2>
                <form role="form">
                    <label >
                        <input type="checkbox" name="cb1" value="cb1" /> Значение 1
                    </label>
                    <label>
                        <input type="checkbox" name="cb2" value="cb2" /> Значение 2
                    </label>
                    <label>
                        <input type="checkbox" name="cb3" value="cb3" disabled /> Значение 3
                    </label>
                </form>
            </div>

Рис. 5. Кнопки Radio и Checkbox в строку

Использование тэга Select в Bootstrap

Тэг <select> оказался наименее описанным в Bootstrap. Единственное, что нужно указать при использовании <select> — это класс .form-control.

        <select >
           <option value="1">Значение 1</option>
           <option value="2">Значение 2</option>
           <option value="3">Значение 3</option>
           <option value="4">Значение 4</option>
           <option value="5">Значение 5</option>
        </select>

Чтобы у <select> была возможность выбора нескольких значений, нужно добавить атрибут multiple:

         <select multiple>
             <option value="1">Значение 1</option>
             <option value="2">Значение 2</option>
             <option value="3">Значение 3</option>
             <option value="4">Значение 4</option>
             <option value="5">Значение 5</option>
         </select>

Нередактируемые поля в Bootstrap

Вместо полей формы для отображения и передачи данных можно использовать текстовый элемент <p>. Для этого ему нужно указать класс .form-control-static.

                <h2>Демо-вход</h2>
                <form role="form">
                    <div>
                        <label for="login">Логин</label>
                        <div>
                            <p>demologin</p>
                        </div>
                    </div>
                    <div>
                        <label for="pass">Пароль</label>
                        <div>
                            <input type="password" placeholder="Пароль">
                        </div>
                    </div>
                    <div>
                        <div>
                            <button type="submit">Войти</button>
                        </div>
                    </div>
                </form>

Рис. 6. Использование текстовых полей для данных формы

Тег | htmlbook.ru

Спецификация

Описание

Тег <input> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент <input> не требуется помещать внутрь контейнера <form>, определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает серверная программа, то указывать <form> обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.

Основной атрибут тега <input>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image). Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено еще более десятка новых элементов.

Синтаксис

<input атрибуты>

<input атрибуты />

Атрибуты

accept

Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.

accesskey

Переход к элементу с помощью комбинации клавиш.

align

Определяет выравнивание изображения.

alt

Альтернативный текст для кнопки с изображением.

autocomplete

Включает или отключает автозаполнение.

autofocus

Устанавливает фокус в поле формы.

border

Толщина рамки вокруг изображения.

checked

Предварительно активированный переключатель или флажок.

disabled

Блокирует доступ и изменение элемента.

form

Связывает поле с формой по её идентификатору.

formaction

Определяет адрес обработчика формы.

formenctype

Устанавливает способ кодирования данных формы при их отправке на сервер.

formmethod

Сообщает браузеру каким методом следует передавать данные формы на сервер.

formnovalidate

Отменяет встроенную проверку данных на корректность.

formtarget

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

list

Указывает на список вариантов, которые можно выбирать при вводе текста.

max

Верхнее значение для ввода числа или даты.

maxlength

Максимальное количество символов разрешенных в тексте.

min

Нижнее значение для ввода числа или даты.

multiple

Позволяет загрузить несколько файлов одновременно.

name

Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.

pattern

Устанавливает шаблон ввода.

placeholder

Выводит подсказывающий текст.

readonly

Устанавливает, что поле не может изменяться пользователем.

required

Обязательное для заполнения поле.

size

Ширина текстового поля.

src

Адрес графического файла для поля с изображением.

step

Шаг приращения для числовых полей.

tabindex

Определяет порядок перехода между элементами с помощью клавиши Tab.

type

Сообщает браузеру, к какому типу относится элемент формы.

value

Значение элемента.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не требуется.

Пример

HTML5IECrOpSaFx6

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег INPUT</title>
 </head>
 <body>

 <form name="test" method="post" action="input1.php">
  <p><b>Ваше имя:</b><br>
   <input type="text" size="40">
  </p>
  <p><b>Каким браузером в основном пользуетесь:</b><Br>
   <input type="radio" name="browser" value="ie"> Internet Explorer<Br>
   <input type="radio" name="browser" value="opera"> Opera<Br>
   <input type="radio" name="browser" value="firefox"> Firefox<Br>
  </p>
  <p>Комментарий<Br>
   <textarea name="comment" cols="40" rows="3"></textarea></p>
  <p><input type="submit" value="Отправить">
   <input type="reset" value="Очистить"></p>
 </form>

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид элементов формы в браузере

CSS ❖ Twitter Bootstrap

Все в едином файле (спрайт)

Вместо того, что бы использовать отдельную картинку для каждой из иконок, мы поместили их в один файл (спрайт)—при помощи CSS и background-position мы устанавливаем выбор на конкретной иконке. Такой же метод мы применили на Twitter.com и это отлично работает, так как браузеру достаточно один раз загрузить единый файл и закешировать его.

Все классы иконок начинаются с .icon-*. Это поможет Вам избежать ошибки.

Glyphicons позволили нам использовать набор иконок Halflings, который является частью open-source проекта. По соглашению мы приводим ссылку на оригинал их проекта и на автора работы. Пожалуйста, не забудьте и вы, благодарно разместив ссылки на Вашем проекте.

Как использовать?

Bootstrap использует тег <i> для всех иконок, они не имеют единого класса—только единый префикс класса . icon-*. Для использования поместите код с примера ниже, куда Вам необходимо:

<i></i>

Так же иконки доступны в белом виде (inverted), и доступны при дополнительном классе:

<i></i>

У нас имеется 120 классов для каждой иконки. Просто добавьте тег <i> с необходимым классом нужной Вам иконки. Полный список классов доступен в sprites.less. А так же полный список классов доступен здесь, смотрите выше.

Внимание! При использовании с текстом, кнопками, ссылками или навигацией не забудьте оставить пробел после тега <i> для корректного расположения элемента.

Идеи для использования

Иконки это хорошо, но когда их стоит использовать? Вот вам идеи:

• Визуальное обозначение пунктов меню (сайдбар)
• Для навигации иконками
• Для кнопок, визуально отображая их непосредственное действие
• Для ссылок, визуально показывая куда попадет пользователь

Вообще везде, где уместен тег <i> Вы сможете добавить иконку.

Как создается стиль радиокнопки CSS? [CSS-трюки]

Мы все знакомы с флажком HTML и переключателем CSS . Больше всего в них разочаровывает то, что мы никак не можем изменить их внешний вид. Они выглядят по-разному в зависимости от вашей операционной системы и браузера, и мы не можем стилизовать их с помощью CSS.

Это может раздражать большинство дизайнеров, которые хотят сделать эти элементы привлекательными, чтобы они не портили дизайн.В этом уроке я покажу вам, как сделать их очень милыми с помощью простого трюка. Давайте копать!

Будь сильным. Скройте свои флажки

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

 .section input[type="radio"],
.раздел ввода[тип="флажок"]{
  дисплей: нет;
}
 

Но Матвей, спросите вы, что же мы будем делать без них? Не беспокойтесь, мы создадим свои собственные флажки, с блэкджеком и… ну, давайте приступим к делу.

Радиокнопка CSS

Во-первых, наша разметка:

 <раздел>
    <дел>
      
      Кофе