HTML-формы. Создание и работа с формами в html Атрибуты тега Option

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

Name: Определяет имя для раскрывающегося списка. Оно может быть использовано для доступа к данным формы после ее отправки или для ссылки на элемент в JavaScript. size: Указывает количество видимых вариантов в раскрывающимся списке. Если значение атрибута size больше 1, но меньше общего количества вариантов списка, то браузер автоматически добавит полосу прокрутки, чтобы указать, что есть еще варианты для просмотра.

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

Сегодня мы разберем, как создавать выпадающие (раскрывающиеся) списки , в том числе со множественным выбором, при помощи select и option, каким образом сконструировать текстовое поле посредством textarea, а также поговорим о возможности расширения функциональности форм путем применения тегов fieldset, label и legend .

Напомню, что любая форма, присутствующая на странице, создается при помощи и предназначена для ввода какой-либо информации от пользователя и отправки ее на сервер (пример — ).

К сожалению, средства языка гипертекстовой разметки не позволяют напрямую обрабатывать эту информацию, поэтому с помощью HTML мы создаем лишь внешний вид формы, а необходимые данные отправляются для обработки. С этой целью на вебсервере целенаправленно создается специальный файл, написанный на одном из серверных языков (чаще всего, PHP). Скажем, для обратной связи можно сотворить файлик mail.php, который и будет являться обработчиком.

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

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

2. Multiple — этот атрибут, не имеющий параметров, дает возможность множественного выбора в отличие от выше приведенного примера, где можно выбрать только один элемент (строчку). Попробуйте выделить в данном списке мышкой сразу несколько строк (по одной в любых местах, удерживая клавишу Ctrl, либо посредством Shift следующих подряд одна за одной):

3. Size — устанавливает высоту выпадающего списка, то есть количество отображаемых строк. Если присутствует атрибут multiple, а значение size не указано (как в примере выше), то по умолчанию отображается четыре строки , а, например, при size="5" будут видны уже пять:

4. Required (параметров не имеет) — определяет, что обязательно нужно сделать выбор перед отправкой данных обработчику. Если элемент из списка не выбран, то данные формы отправлены не будут:

5. Autofocus (значений не имеет) — устанавливает фокус на список сразу после загрузки страницы. Кроме того, если пользователь привык основную часть действий производить клавишами, то как раз такое предварительно настроенное фокусирование поможет делать выбор из списка посредством стрелок на клавиатуре без всякого использования мышки:

6. Disabled (параметров нет) — блокирует доступ к списку (отключает его). На практике обычно используется вместе со скриптами в тех случаях, когда нужно включать раскрывающийся список только при выполнении определенных условий:

7. Form — осуществляет связь списка с одной или несколькими формами, к которым он принадлежит, но находится вне контейнера

Не путайте атрибут тега select и основной тэг для создания формы. В примере выше к тегу form добавлен атрибут id="data", а к select — form="data", что и позволило связать выпадающий список с конкретной формой.

Атрибуты тега option

1. Value — определяет то значение из выпадающего списка, которое будет отправлено на сервер (обработчику формы). Собственно, обработчику отправляется имя, которое задается атрибутом name тега select, и значение value (для данного примера — 1, 2, 3, 4, 5), соответствующее выбранной строке выпадающего списка:

2. Disabled — блокирует для выбора элемент выпадающего списка.

Как видно из примера, строчка «Option» неактивна и выбрать ее невозможно.

3. Label — отображает текстовое содержание (являющееся его значением) того или иного элемента списка. Если label присутствует, то выводится строчка, тождественная значению этого атрибута и игнорируется текстовое содержание, находящееся внутри тега option. То же самое происходит, ежели содержимое между и вовсе отсутствует.

Смотрите. В выше предоставленном примере первая строка для option в коде пустая (в левой части таблицы), но прописан параметр label="Тег Option", в результате именно этот текст появился в списке (в правой части). Вторая строка кода в качестве содержимого тега option содержит текст «Тег Textarea», но в раскрывающемся списке справа отображается слово «Textarea», совпадающее со значением label="Textarea".

4. Selected — выделяет текущий пункт выпадающего списка:

Если присутствует атрибут multiple, то есть возможность выделения более одного элемента:

Атрибуты тега optgroup

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

1. Label — устанавливает название каждой группы в качестве параметра:

То же самое, но с multiple и size="7" тега select:

2. Disabled (нет значений) — блокирует выбор элементов той группы, по отношению к которой он установлен, причем, неактивные пункты обычно выделены серым цветом:

Небольшой видеоролик будет здесь как нельзя кстати:

Текстовое поле в форме посредством textarea

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

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

Попробуем теперь добавить к первоначальному коду несколько атрибутов с параметрами:

1. Name — определяет имя текстовой области в качестве значения для ее идентификации после отправки данных формы при их обработке на сервере.

2. Cols — ширина поля, которая в роли параметра задается числом стоящих рядом одинаковых символов, размещенных по горизонтали. Значение по умолчанию — 20 .

3. Rows — высота текстового поля, определяемое количеством строк. Если число строк текста, вводимого пользователем, окажется больше значения, заданного этим атрибутом, то справа появится вертикальная полоса прокрутки.

4. Maxlength — указывает максимальное количество знаков, которые можно поместить в текстовое поле. При превышении лимита дальнейший ввод будет невозможен.

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

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

7. Readonly (без параметров) — ежели к textarea прикрутить данный атрибут, то текстовое поле окажется недоступным для изменения пользователями и будет предназначено только для чтения. Но на него можно навести фокус (подведите курсор к полю и щелкните левой кнопкой мышки), а также выделить и скопировать (частично или полностью) текст:

Еще несколько атрибутов, реализующих дополнительный функционал при заполнении полей:

8. Autoсomplete — указывает, должен ли браузер выдавать подсказки при заполнении формы пользователем на основании ранее вводимых данных и дает возможность автоматически вставлять подходящий текст.

Имеет всего два параметра : on (включен) и off (выключен). Вот пример кода:

Данный атрибут со значением «on» работает только тогда, когда в веб-обозревателе конкретного пользователя включено автозаполнение полей формы.

9. Wrap — устанавливает для браузера правила переноса строк в текстовой области с помощью трех значений:

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

Hard — переносы производятся автоматически, если текст не влезает в поле по ширине, причем, при отправке обработчику места таких переносов будут сохранены. Этот параметр используется только в связке с атрибутом cols :

Off — отключение переносов строк. Если напечатать текстовый фрагмент без механического переноса посредством клавиши «Enter», то весь текст будет помещен в одну строку, причем, появится горизонтальная полоса прокрутки:

10. Autofocus (не имеет параметров) — инициирует фокусирование на текстовое поле при загрузке страницы с формой.

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

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

Тег select и создание выпадающего списка

Итак, выпадающий список в html создается с помощью парного тега select , в который помещаются парные теги option . Именно в них записываются все варианты, которые будут предложены при клике на список. Пример:

Выберите животное Бык Корова Овца Конь

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

Список в html может быть обычным, и с множественным выбором. Чтобы сделать возможность выбирать несколько пунктов, нужно добавить в select пустой атрибут multiple . Чтобы выбрать несколько значений, удерживайте ctrl и жмите левую кнопку мыши.

Другой полезный атрибут – size . Он позволяет выбирать, сколько строк будет показывать в раскрывающемся списке.

Еще один атрибут – disabled . Он делает список недоступным для нажатия и просмотра пунктов, но при этом его видно на странице.

Required – html5-атрибут. Если он задан, форма не будет отправлена без выбора значения из раскрывающегося списка. В общем, он становится обязательным для выбора. Пока атрибут работает далеко не во всех браузерах.

Атрибуты тега option

Собственно, select служит лишь контейнером для пунктов списка, сами они задаются с помощью тега option . У него есть параметр value , как мы уже выяснили, но кроме этого еще есть и другие. Например:
Disabled – делает пункт списка недоступным для выбора. Отображается он будет, но кликнуть на него нельзя.

Selected – элемент будет выбранным по умолчанию. В обычном списке этот атрибут без значения можно задать только одному пункту, во множественном – нескольким.

Важное уточнение для правильной работы

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

Для чего нужен select

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

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

Select:focus{
outline: 1px solid orange;
}

Теперь рамка будет оранжевой.

Option тоже можно стилизовать, но вот при наведении на пункт его фон становится синим и через стили это почему-то не меняется.

Option{
color: brown;
background: aqua;
}

Кстати, может кто-то из вас знает, как изменить фоновый цвет при наведении на пункт через css?

Вот, собственно, пока и все по тегу select и его применению. Никаких дополнительных возможностей в html для него не предусмотрено. Все остальные операции с ним можно производить с помощью javascript и php. Например, если вам нужно создать список для выбора года рождения и там может быть 80-100 разных вариантов, не будете же вы вручную их писать?

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

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

), для первой и второй области атрибутом name мы задали уникальные имена. Для второй текстовой области атрибутом disabled мы указали, что она будет отключена при загрузке страницы.</p> <p>Кроме того, мы разместили внутри формы кнопку, которая служит для отправки формы (элемент <input> с типом кнопки "отправка формы": type = "submit" ).</p> <p>Результат нашего примера:</p> <h2>Подсказка для текстовой области</h2> <p>И так мы с Вами рассмотрим заключительный пример и перейдем к практическому заданию статьи этого учебника.</p> <p>Благодаря атрибуту (HTML тега <textarea>) допускается указывать текст подсказки, которая описывает ожидаемое значение для ввода пользователем в элемент.</p> <p>Текст подсказки скрывается, когда пользователь вводит значение (любой символ) в текстовое поле, если его убрать, то подсказка будет отображена снова.</p> <p>Рассмотрим пример использования:</p> <span><!DOCTYPE html> <html> <head> <title> </span>Атрибуты placeholder и readonly тега <textarea><span></title> </head> <body> <form> <textarea placeholder = <span>"Введите информацию в текстовое поле" </span>> "Поле доступно только для чтения" </span> readonly >
type = "submit" name = "submitInfo" value = "отправить" >

В этом примере мы создали две текстовые области (элемент ), для первой и второй области атрибутом мы задали подсказку для пользователя, которая отображается бледным цветом текста внутри элемента. Для второй текстовой области атрибутом readonly мы указали, что оно будет доступно только для чтения (содержимое не может быть изменено).</p> <p>Обратите внимание на то, что если текстовое поле доступно только для чтения, то при этом содержимое не может быть изменено, но пользователь при этом может перейти к содержимому, выделить и скопировать его.</p> <p>Кроме того, мы разместили внутри формы кнопку, которая служит для отправки формы (элемент <input> с типом кнопки "отправка формы": type = "submit" ).</p> <p>Результат нашего примера:</p> <h2>Вопросы и задачи по теме</h2> <p>Перед тем как перейти к изучению следующей темы пройдите практическое задание:</p> <ul><li>Используя полученные знания составьте следующую форму размещения вакансии:</li> </ul><p>Прежде чем преступить к выполнению задания откройте пример в новом окне и внимательно рассмотрите форму, чтобы повторить все её моменты. Для выполнения задания Вам потребуются знания из статьи . Если вы пропустили её, то вернитесь для её изучения.</p> <p>После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.</p> <p>В процессе создания сайта или блога и дальнейшего его наполнения содержанием, по разным причинам, порой возникает необходимость скрыть какую-то часть текста, разместить более объёмную информацию в спрятанный до поры до времени блок, но при этом всё же указать пользователю на то, что имеется ещё кое что, и предоставить ему возможность просмотреть скрытое содержание без перехода на следующую строку или страницу.<br> Раньше для реализации такого решения использовалась груда javascript, теперь же всё это можно очень легко исполнить с помощью удивительных свойств .</p><p>Сегодня мы рассмотрим простейший способ создания на страницах сайта и в отдельных сообщениях, скрытых блоков с содержанием, раскрывающихся при нажатии на определенный элемент текста, используя исключительно свойства CSS3. Переключателем может служить и отдельное слово, и выделенное словосочетание, а так же целое предложение, или информативная иконка.<br> Такие блоки часто используются на страницах с большим количеством содержания, для того чтобы сделать его более структурированным и компактным, все содержание при этом делится на так называемые группы, в которых на обозрение пользователю представлены только заголовки, весь текст по умолчанию скрыт и увидеть его можно нажав на определенный элемент(см. выше).</p><p>Давайте, постараемся обойтись без лишней воды, посмотрите весь этот простейший механизм в действии, на наглядном примере, так же можете и подредактировать что-нибудь при желании:</p><h3>Пример №1</h3><p>В роли переключателей раскрывающихся блоков с дополнительной информацией используется никак не выделенный и не обозначенный текст, с недвусмысленным предложением нажать на него, что вы без страха и сомнений обязательно сделайте, чтобы увидеть )))<br></p><p>Как видите всё более-чем прекрасно работает, скрытое содержание, как появляется без проблем, так и исчезает от легкого нажатия мышкой, и при этом мы задействовали самый минимум исполняемого кода, и в html-каркасе, и в формировании стилей css. Без подключения дополнительных javascript библиотек, с извечной тревогой, а не отключены ли они на стороне пользователя.<br> Реализовать всё это действо, стало возможным благодаря CSS3 псевдоклассу <b>:checked </b>, применяемым к элементам интерфейса, таким как переключатели (). Что мы собственно и сделали, в теге <input type="text" /> атрибуту type мы присвоили значение checkbox , а так же идентификатор id="hd-1" соответствующий уникальному идентификатору <b>for="hd-1" </b> переключателя текущего блока. Чекбоксы спрячем основательно и навсегда, прописав в классе.hide свойство display: none; <br> Собственно здесь, объяснять-то особо и нечего, весь механизм включения и выключения скрытых блоков состоит из трех элементов:</p><ul><li>Флажок (Checkbox) — тег <input type="text" /> со значением <b>checkbox </b> атрибута <b>type </b> и с определённым связующим идентификатором</li><li>Заголовок (текст переключатель) — тег <label></label> со значением уникального идентификатора для атрибута <b>for </b>, (идентификатор обязательно должен быть таким же, как идентификатор тега <b>input </b> со значением <b>checkbox </b> атрибута <b>type </b>).</li><li>Блок с содержимым — тег div , в котором и будет содержаться до лучших времен, пока пользователь не кликнет, различный скрытый контент (текст, изображения и т.д. и т.п.)</li> </ul><p>Надеюсь, из моего сумбурного пояснения, все же стало понятно в чём вся фишка. CSS применяет новые стили (с помощью псевдокласса <b>checked </b>), чтобы показать блок контента, который до этого был скрыт, только тогда, когда пользователь нажимает на элемент, который связан с флажком(checkbox) по уникальному идентификатору.</p><p>Из всего этого следует <b>важное замечание </b>:</p><blockquote><p>когда вы используете несколько скрытых блоков на одной странице, каждый переключатель должен иметь уникальный идентификатор, который будет отличаться от идентификаторов в других блоках.</p> </blockquote><p>Так, на словах мы разобрали, что куда и зачем, теперь, давайте посмотрим на html-каркас всей коннструкции:<br></p><table><tr><td class="code"> < input class = "hide" id= "hd-1" type= "checkbox" > < label for = "hd-1" > Нажмите здесь, чтобы открыть!</ label> < div> Скрытое содержание......</ div> < input class = "hide" id= "hd-2" type= "checkbox" > < label for = "hd-2" > Нажмите здесь, чтобы прочитать больше!</ label> < div> Скрытое содержание...</ div> </td> </tr></table><p><input class="hide" id="hd-1" type="checkbox" > <label for="hd-1">Нажмите здесь, чтобы открыть!</label> <div>Скрытое содержание......</div> <input class="hide" id="hd-2" type="checkbox" > <label for="hd-2">Нажмите здесь, чтобы прочитать больше!</label> <div>Скрытое содержание...</div></p><p>Далее переходим непосредственно к формированию стилей CSS, без которых вся эта конструкция работать не будет. Самый минимум кода, без какого-нибудь оформления, только чуточку выделил фон для раскрывающегося блока, чтобы определить для вас и показать рамки скрытого текста. Вы же можете оформлять блоки как вам вздумается, навесить бордюры, скруглить углы, выделить текст, или же .</p><h3>1. CSS</h3><table><tr><td class="code"> . hide, . hide + label ~ div { display: none; } <span>/* вид текста label */ </span> . hide + label, . hide: checked + label { padding: 0 ; color: green; cursor: pointer; border- bottom: 1px dotted green; } . hide: checked + label + div { display: block; background: #efefef; - moz- box- shadow: inset 3px 3px 10px #7d8e8f; - webkit- box- shadow: inset 3px 3px 10px #7d8e8f; box- shadow: inset 3px 3px 10px #7d8e8f; padding: 10px; } </td> </tr></table><p>/* скрываем чекбоксы и блоки с содержанием */ .hide, .hide + label ~ div { display: none; } /* вид текста label */ .hide + label, .hide:checked + label { padding: 0; color: green; cursor: pointer; border-bottom: 1px dotted green; } /* вид текста label при активном переключателе */ .hide:checked + label { color: red; border-bottom: 0; } /* когда чекбокс активен показываем блоки с содержанием */ .hide:checked + label + div { display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f; box-shadow: inset 3px 3px 10px #7d8e8f; padding: 10px; }</p><p>Это всё, для аскетичного примера, вполне достаточный минимум. Но ведь, мы будем совсем не мы, если не навесим хоть каких-нибудь плюшек, да и пользователю лучше подсказать визуально, куда следует нажимать.<br> Во втором примере добавил простенький символ в виде плюса, который явно указывает на то, что здесь скрывается ещё что-то, при нажатии он моментально превращается в минус, а скрытым блокам с содержанием, прикрутил чуточку анимации при появлении, и всё это исключительно с помощью магии CSS3.<br></p><h3>2. CSS</h3><table><tr><td class="code"> <span>/* скрываем чекбоксы и блоки с содержанием */ </span> . hide, . hide + label ~ div { display: none; } <span>/* вид текста label */ </span> . hide + label { margin: 0 ; padding: 0 ; color: green; cursor: pointer; display: inline- block; } <span>/* вид текста label при активном переключателе */ </span> . hide: checked + label { color: red; border- bottom: 0 ; } <span>/* когда чекбокс активен показываем блоки с содержанием */ </span> . hide: checked + label + div { display: block; background: #efefef; - moz- box- shadow: inset 3px 3px 10px #7d8e8f; - webkit- box- shadow: inset 3px 3px 10px #7d8e8f; box- shadow: inset 3px 3px 10px #7d8e8f; margin- left: 20px; padding: 10px; <span>/* чуточку анимации при появлении */ </span> - webkit- animation: fade ease- in 0. 5s; - moz- animation: fade ease- in 0. 5s; animation: fade ease- in 0. 5s; } <span>/* анимация при появлении скрытых блоков */ </span> @- moz- keyframes fade { from { opacity: 0 ; } to { opacity: 1 } } @- webkit- keyframes fade { from { opacity: 0 ; } to { opacity: 1 } } @ keyframes fade { from { opacity: 0 ; } to { opacity: 1 } } . hide + label: before { background- color: #1e90ff; color: #fff; content: "<span>\002 B" </span>; display: block; float: left; font- size: 14px; font- weight: bold; height: 16px; line- height: 16px; margin: 3px 5px; text- align: center; width: 16px; - webkit- border- radius: 50 %; - moz- border- radius: 50 %; border- radius: 50 %; } . hide: checked + label: before { content: "<span>\221 2" </span>; } </td> </tr></table><p>/* скрываем чекбоксы и блоки с содержанием */ .hide, .hide + label ~ div { display: none; } /* вид текста label */ .hide + label { margin: 0; padding: 0; color: green; cursor: pointer; display: inline-block; } /* вид текста label при активном переключателе */ .hide:checked + label { color: red; border-bottom: 0; } /* когда чекбокс активен показываем блоки с содержанием */ .hide:checked + label + div { display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f; box-shadow: inset 3px 3px 10px #7d8e8f; margin-left: 20px; padding: 10px; /* чуточку анимации при появлении */ -webkit-animation:fade ease-in 0.5s; -moz-animation:fade ease-in 0.5s; animation:fade ease-in 0.5s; } /* анимация при появлении скрытых блоков */ @-moz-keyframes fade { from { opacity: 0; } to { opacity: 1 } } @-webkit-keyframes fade { from { opacity: 0; } to { opacity: 1 } } @keyframes fade { from { opacity: 0; } to { opacity: 1 } } .hide + label:before { background-color: #1e90ff; color: #fff; content: "\002B"; display: block; float: left; font-size: 14px; font-weight: bold; height: 16px; line-height: 16px; margin: 3px 5px; text-align: center; width: 16px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .hide:checked + label:before { content: "\2212"; }</p><p>По всем раскладам, способ несомненно хорош, но как всегда, даже не удивительно нисколько, проблемы возникают с вечным тормозом прогресса, браузером IE, псевдо-класс <b>checked </b> поддерживают только 9-я и более современные версии этого браузера. Для старых версий IE-шки, остаётся всё по-старому, вам придётся использовать javascript.</p><p>Используя скрытые чекбоксы, вы можете легко реализовать , блоки в стиле , слайдеры, галереи и многое другое.</p><p><i>С Уважением, Андрей</i></p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> <div id="ftwp-postcontent-end"></div> </div> <div style="clear:both"></div> <div class="thn_post_wrap wp_link_pages"></div> <div id="yandex_rtb_niz" style="text-align: center;"></div> <div class="post_foot"> <div class="post_meta"></div> </div> </div> </div> <div id="ast_nextprev" class="navigation "> <span class="div_middle"><i class="fa fa-stop"></i></span> <div class="nav-box ast-prev"> <a href="/sound-and-cards/mgts-servisnaya-sluzhba-telefon-ne-rabotaet-gorodskoi-telefon/" rel="prev"><i class="fa fa-angle-left"></i><br><span>Не работает городской телефон мгтс</span></a> <div class="prev_cat_name"> <a href="/category/sound-and-cards/">Звук и карты</a></div> </div> <!-- /next_post --> <div class="nav-box ast-next"> <a href="/various-problems/naushniki-besprovodnye-bluetooth-xiaomi-besprovodnye-naushniki-xiaomi-minusy-xiaomi/" rel="next"><i class="fa fa-angle-right"></i><br><span>Беспроводные наушники Xiaomi</span></a> <div class="next_cat_name"> <a href="/category/various-problems/">Различные проблемы</a></div> </div> <!-- /next_post --> </div> </div> </div> <div id="sidebar" class="home_sidebar "> <div class="widgets"> <div id="recent-posts-2" class="widget widget_recent_entries" data-widget-id="recent-posts-2"> <div class="widget_wrap"> <h3 class="widgettitle">Свежие записи</h3> <ul> <li> <a href="/windows/mak-zavisaet-na-yabloke-chto-delat-esli-ne-zagruzhaetsya-macbook-pro-izvlechenie/">Что делать, если не загружается MacBook Pro?</a></li> <li> <a href="/google-chrome/skachat-vatsap-vse-bystraya-ustanovka-vatsap-na-kompyuter/">Быстрая установка Ватсап на компьютер</a></li> <li> <a href="/software/otklyuchenie-filtra-smartscreen-v-windows-7-otklyuchenie-sluzhby-smartscreen-v-windows-chto-budet/">Отключение службы SmartScreen в Windows</a></li> <li> <a href="/browsers/php-sravnenie-chisla-i-stroki-praktika-php-sravnenie-strok/">Практика PHP: сравнение строк</a></li> <li> <a href="/notebooks-and-netbooks/kak-redaktirovat-pdf-dokumenty-kak-redaktirovat-tekst-v-pdf-proverennye/">Как редактировать текст в PDF – проверенные программы и онлайн-сервисы Редакторы PDF онлайн</a></li> <li> <a href="/windows-7/kak-sbrosit-aimak-na-zavodskie-nastroiki-kak-vypolnit-sbros-maka-do/">Как выполнить сброс мака до заводского состояния</a></li> <li> <a href="/windows-7/igry-na-megafon-login-igry-na-megafon-login-skachat-igry-na-telefon-login/">Игры на Мегафон Login Скачать игры на телефон логин</a></li> <li> <a href="/various-problems/vosstanavlivaem-dostup-k-zablokirovannym-uchetnym-zapisyam/">Восстанавливаем доступ к заблокированным учетным записям Windows Примеры использования Elcomsoft System Recovery</a></li> <li> <a href="/security/naladit-gromkost-v-noutbuke-kak-otregulirovat-zvuchanie-na/">Как отрегулировать звучание на своем ноуте</a></li> <li> <a href="/reviews/bat-seriinyi-nomer-the-bat-s-klyuchom-procedura-lecheniya-programmy/">Bat серийный номер. The Bat! с ключом. Процедура лечения программы</a></li> </ul> <span class="widget_corner"></span> </div> </div> <div id="text-4" class="widget widget_text" data-widget-id="text-4"> <div class="widget_wrap"> <div class="textwidget"> <div id="yandex_rtb_R-A-210521-45" class="yandex_rtb_R-A-210521-45" style="text-align: center;"></div> </div> <span class="widget_corner"></span></div> </div> </div> </div> </div> </div> </div> <a class="to_top "><i class="fa-angle-up fa-2x"></i></a> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700&subset=cyrillic-ext" rel="stylesheet"> <link rel="stylesheet" href="/css/font-awesome.min.css"> <div class="footer_wrap layer_wrapper "> <div id="footer"> <div class="center"></div> <div id="copyright" class="soc_right copyright_center"> <div class="center"> <div class="copytext">scsiberia.ru - Фишки по работе с ПК</div> <div class="foot_right_wrap"> <div class="foot_soc"></div> </div> </div> </div> </div> </div> <!--[if lte IE 9]> <script>(function($) { $(document).ready(function() { $( '#ftwp-container' ).addClass( 'ftwp-ie9' ); } ); } )(jQuery);</script> <![endif]--> <script type="text/javascript" defer src="https://scsiberia.ru/wp-content/cache/autoptimize/js/autoptimize_d190c113c8b6a6db43f296ae02ecb197.js"></script> </body> </html>