Переключатели
Переключатели (жарг. радиокнопки) используют, когда необходимо выбрать один единственный вариант из нескольких предложенных. Создаются следующим образом.
Атрибуты переключателей перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| checked | Предварительное выделение переключателя. По определению, набор переключателей может иметь только один выделенный пункт, поэтому добавление checked сразу к нескольким полям не даст особого результата. В любом случае, будет отмечен элемент, находящийся в коде HTML последним. |
| name | Имя группы переключателей для идентификации поля. Поскольку переключатели являются групповыми элементами, то имя у всех элементов группы должно быть одинаковым. |
| value | Задаёт, какое значение будет отправлено на сервер. Здесь уже каждый элемент должен иметь свое уникальное значение, чтобы можно было идентифицировать, какой пункт был выбран пользователем. |
Создание группы переключателей показано в примере 1.
Пример 1. Создание переключателей
HTML5 IE Cr Op Sa Fx
Переключатели Какое у вас состояние разума?
Не дзен
Дзен
Полный дзен
В результате получим следующее (рис. 1).
Рис. 1. Вид переключателей в браузере
Заметьте, что в данном примере значение атрибута name для всех переключателей одинаково, именно в таком случае браузер понимает, что переключатели связаны между собой и помечает только один пункт из предложенных. Значение атрибута value же должно различаться, чтобы обработчик формы мог понять, какой вариант выбран пользователем.
CSS для начинающих. CSS кнопки это просто // HTML and CSS
Для начала нам необходимо нарисовать кнопку, вроде этой:
Для этого лучше всего нам подойдет инструмент “Rounded Rectangle Tool” в Photoshop, с него и начнем – нарисуем нечто вроде:
Изменяя параметр Radius вы сможете задать желаемое загругление кнопок ( в примере для наглядности контент полностью прозрачный (“Fill Opacity” => 0%)):
Ширина объекта в данном примере 320px – т.е. я предполагаю, что кнопок большего размера не будет.
Границу выводим с помощью “Stroke” (из “Blending Options”), тип – градиент – от #000000 до #676767:
Теперь не мешало бы и залить кнопочку градиентом (сверху указан параметр opacity, внизу цвет; инструмент “Gradient Overlay” из “Blending Options”):
Результат с залитой границей:
Если мы сделаем цветной фон:
Ну вот – кнопочка и готова, приступим к следующему шагу…
Простая CSS кнопка
Самый простой вариант – у нас все кнопки одного размера и одного/двух цветов, соответственно готовим небольшой “спрайт” на все случаи жизни (простым копированием слоя с кнопкой):
Теперь нам остается лишь слегка подправить CSS для таких кнопок:
.button < cursor:pointer; display:block; height:70px; width:320px; line-height:70px; text-align:center; background-image:url('images/buttons.png'); background-repeat:no-repeat; >.button.green < background-position:0 0 >/* зеленая кнопка */ .button.green:hover < background-position:0 -350px >/* активная зеленая кнопка */ /* и т.д. */
Сам HTML код элементарен:
<a href="#" title="Label" green">Label</a> <a href="#" title="Label" white">Label</a> <a href="#" title="Label" black">Label</a> <a href="#" title="Label" orange">Label</a> <a href="#" title="Label" red">Label</a>
Резиновая CSS кнопка
Теперь усложним задачу – мы не имеем представления какого цвета будут кнопки, и какого размера, мы лишь предполагаем, что кнопки не будут больше 320px в ширину.
Строим DOM
Ну и сам HTML код:
<ul <li href="#" title="Label">Label<em></em></a></li> <li green"><a href="#" title="Label">Label<em></em></a></li> <li white"><a href="#" title="Label">Label<em></em></a></li> <li black"><a href="#" title="Label">Label<em></em></a></li> <li orange"><a href="#" title="Label">Label<em></em></a></li> <li red"><a href="#" title="Label">Label<em></em></a></li> </ul>
Примечание: можно использовать практически любые другие HTML теги, это дело вкуса, так что таким же образом вы можете изменить и элементы формы. Для упрощения HTML’а можно воспользоваться JavaScript’ом. Приведу пример:
<script type="text/javascript"> $(document).ready(function()< $('form :button, form :submit').each(function()< var className = $(this).attr('class'); $(this).wrap('<div '+className+'"></div>'); $(this).after('<em></em>'); >); >); </script> <form onsubmit="return false;"> <input type="button" title="Button" value="Button"/> <input type="submit" title="Submit" value="Submit"/> </form>
Пишем CSS
Читаем комментарии по коду:
.button < /* у нас кнопка с закруглением - значит нам необходимо у DOM элемента так же скруглить углы */ border-radius:10px; -moz-border-radius:10px; -khtml-border-radius:10px; -webkit-border-radius: 10px; /* внутренний элемент <a> должен быть смещен относительно <li> на 20px - освобождаем место для <em> */ padding-right:20px; /* данные элемент будет relative - т.е. все элементы внутри него с абсолютным позиционированием будут плясать от него */ position:relative; >.button a, .button em < /* ссылке и элементу em задаем одинаковое фоновое изображение */ background-image:url('css/images/button.png'); background-repeat:no-repeat; >.button a < /* ссылку делаем блочным элементом задаем высоту элемента, а так же свойство line-height - с его помощью мы выравниваем текст по вертикали */ display:block; height:52px; line-height:52px; outline:none; color:#333; font-size:18px; text-indent:20px; text-decoration:none; text-align:center; text-shadow: #333 0px -1px 0px; >.button em < /* внутренний элемент так же будет блочным с размером 52х20, с абсолютной позиционированием */ display:block; position:absolute; background-position:100% 0; width:20px; height:52px; top:0px; right:0px; >/* цвет шрифта для некоторых кнопок лучше поменять */ .button.green a, .button.black a, .button.red a < color:#fff; >/* тут указываем цвет наших кнопок */ .button.green < background-color:#009e0f >.button.green:hover < background-color:#068612 >.button.white < background-color:#f0f0f0 >.button.white:hover < background-color:#c0c0c0 >.button.black < background-color:#000 >.button.black:hover < background-color:#333 >.button.orange < background-color:#ff7800 >.button.orange:hover < background-color:#c60 >.button.red < background-color:#f00 >.button.red:hover
Наблюдаем результат
Сравним результат наших трудов в разных браузерах:
Как вы можете заметить, есть несколько проблем с данной реализацией:
- полупрозрачность в IE6 не работает – можем докрутит хаки, но зачем – IE6 можно считать умершим
- box-radius в IE и Opera не работает – либо отказываемся от данной фичи, либо зарисовываем свободное пространство фоновым цветом (для IE так же есть грязный хак, см.: Curved corner (border-radius) cross browser)
Кнопочки можно пощупать на демо, все сорцы доступны по следующей ссылке:
Еще ссылки по теме:
- Scalable CSS Buttons Using PNG and Background
- Bold CSS Buttons
- Make fancy buttons using CSS sliding doors technique
- CSS Sliding Door using only 1 image
- CSS Oval buttons
Информация
- jQuery для начинающих
- jQuery для всех
- PHP для всех
Проекты
- Charts Builder
- Photo Blog
- Syntax Highlighter
Блогролл
- NIX Solutions Ltd.
- Мысли с самого низа
- Прохождение игр
Как сделать кнопку в HTML
Для создания кнопок используется тег . Внутри него размещается текст или изображение, которые будут отображаться на кнопке. Например:
Чтобы задать кнопке имя, тип или состояние, нужно добавить атрибуты: name , disabled и type .
Атрибут name задаёт имя кнопки. Может использоваться для идентификации элемента в скриптах.
Атрибут disabled блокирует доступ к кнопке.
Атрибут type определяет тип кнопки. Ему задают одно из трёх значений:
button — значение по умолчанию. Означает, что элемент — обычная кнопка. Она может добавлять товары в корзину или избранное, переключать слайдеры или закрывать всплывающие окна.
submit задаётся кнопкам для отправки формы. Когда пользователь нажимает на кнопку с таким типом, браузер отправляет данные формы на сервер.
reset добавляется кнопкам сброса формы. Когда пользователь нажимает на такую кнопку, браузер возвращает значения всех полей формы к изначальным.
А как же input?
Создать кнопку можно и с помощью тега , если указать ему тип button :
Это рабочий способ. О нём надо знать, ведь вы можете встретить его в проектах. Но самим так делать не стоит. У кнопок, созданных на инпуте, есть ограничения: сложно управлять размерами и положением изображений, а также нет псевдоэлементов. Поэтому оставьте для создания элементов формы, таких как текстовые поля, радиокнопки или чекбоксы. А кнопки верстайте с помощью .
Как сделать кнопку с иконкой
Посмотрим три способа создания кнопки с иконкой.
С помощью тега
Способ подойдёт для контентных изображений.
Так вы можете добавлять кнопки с эмодзи, лайками, дизлайками или чем-то ещё. Иконке нужно обязательно задавать размеры, чтобы кнопка зарезервировала место и не прыгала, когда загрузится иконка.
Добавить инлайн SVG в разметку
Способ подойдёт, если изображение меняет состояния, как здесь:
Код простой: пишем тег и добавляем в него код SVG-изображения.
Вставить фоном в CSS
Способ подойдёт, если иконка играет декоративную роль и не меняется при наведении или клике на кнопку. Например, в таких случаях:
Как добавить иконку в кнопку:
.icon-button < background-image: url("../images/icon.svg"); background-size: 90px 97px; >Какой способ выбрать — зависит от ваших задач и особенностей проекта. Вы также можете использовать разные методы в рамках одного проекта. Например, часть кнопок сделать со встроенным в разметку SVG, а часть — с фоновым изображением.
Материалы по теме
- Что такое ссылки и как их ставить
- Как сделать картинку ссылкой
- Шаблон HTML-формы
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Что такое Lazy Loading и как её включить на сайте
Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.
Ленивая загрузка делает сайт быстрее и экономит трафик, если у пользователя мобильный интернет с ограничениями.
- 22 ноября 2023
Знакомство с HTML
Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.
HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.
- 1 ноября 2023
Специальные символы в HTML
HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.
- 23 октября 2023
Простое диалоговое окно на HTML
Вот короткое демо:
- 18 октября 2023
Зачем нужен метатег viewport
Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport .
Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport , который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.
Важно, чтобы сайты классно выглядели не только на компьютерах, но и на маленьких экранах смартфона. Если не использовать viewport , то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования. Конечно, нужно ещё много всего сделать для адаптивности, но viewport тоже нужен.
- 18 сентября 2023
Атрибут class в HTML на примерах
Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.
Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.
- 14 сентября 2023
В чём отличия цитат blockquote, cite и q
В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.
- 12 сентября 2023
Осмысленный alt-текст: 6 правил
Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.
Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.
- 31 июля 2023
Растровая и векторная графика
Давайте попробуем разобраться, в чём отличие растровой графики от векторной.
- 13 июня 2023
Как понять, что перед вами заголовок
Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от до . Каждый уровень заголовка имеет свой семантический вес, где имеет наибольший вес, а — наименьший.
Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.
При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.
В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.
- 8 июня 2023
Теги input в один столбик
Теги и не работают на телефонах
Добрый день. Подскажите пожалуйста, почему теги <button> и <input> не активны на мобильных.
VS Code перестраивает строку с атрибутами тега input в столбик
Здравствуйте Установил Visual Studio Code, подключил расширения, а теперь заметил глюк. В формах.
Чем отличаются теги и ?
Они все вроде для создания форм, которые после заполнения отправляются на сервер
Сложить один input c другим input
Господа, выручайте. Уже сутки сижу, ни как не могу закончить. Есть 2 input, значения первого.
Регистрация: 13.10.2011
Сообщений: 26
сдесь (выделено красным)
вот еще на Хабре
Регистрация: 09.11.2012
Сообщений: 98
Спасибо, но у меня почему-то не хотят две кнопки submit по центру становиться, хотя формы выровнились нормально
Регистрация: 01.09.2012
Сообщений: 79
Вложи input’ы для кнопок в block-level элемент и укажи для него text-align:center;
Регистрация: 09.11.2012
Сообщений: 98
Сообщение от _DmS_ 
Вложи input’ы для кнопок в block-level элемент и укажи для него text-align:center;
можете подсказать, какой block-level элемент тут нужен?
1 2 3 4
tr> td>input type="button" value="OK">/td>/tr> tr>td>input type="button" value="Сброс" text-align:center>/td> /tr>
Регистрация: 01.09.2012
Сообщений: 79
Почему кнопки в разных рядах таблицы? Попробуй поместить их в один ряд в одну ячейку
1 2 3 4 5 6 7 8
tr> td collspan="2"> p style="text-align:center;"> input type="button" value="OK"> input type="button" value="Сброс"> /p> /td> /tr>
Регистрация: 09.11.2012
Сообщений: 98
Сообщение от _DmS_
Почему кнопки в разных рядах таблицы? Попробуй поместить их в один ряд в одну ячейку
1 2 3 4 5 6 7 8
tr> td collspan="2"> p style="text-align:center;"> input type="button" value="OK"> input type="button" value="Сброс"> /p> /td> /tr>
уже ближе к центру, но все равно не там(
Регистрация: 09.11.2012
Сообщений: 98
А если установить text-align:right, то кнопки смещаются под нипписи «дата рождения», «увлечения» — тоже не то. Надо их сместить под поля ввода
Регистрация: 01.09.2012
Сообщений: 79
Дальше помочь не могу т.к. понятия не имею как там оно все сделано у Вас. Гаданием не занимаюсь.
Регистрация: 09.11.2012
Сообщений: 98
Сообщение от _DmS_
Дальше помочь не могу т.к. понятия не имею как там оно все сделано у Вас. Гаданием не занимаюсь.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
html> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8"> title>Формы/title> /head> body> table width="100%" cellspacing="0" cellpadding="6"> tr> td align="right" width="100">Фамилия/td> td>input type="text" name="post1" maxlength="50" size="20">/td> /tr> tr> td align="right">Имя/td> td>input type="text" name="post2" maxlength="50" size="20">/td> /tr> tr> td align="right">Пол/td> td>input type="radio" name="post3">Мужской/br> input type="radio" name="post4">Женский/td> /tr> tr> td align="right">Дата рождения/td> td>select name="bday"> OPTION value="01">01 /select> select name="month"> OPTION value="01">Январь/OPTION> /select> select name="year"> OPTION value="1930">1930/OPTION> /select> /tr> tr> td align="right" width="100">Увлечения/td> td>textarea name="uvl" cols="20" rows="3">/textarea>//td> /tr> tr> td collspan="2"> p style="text-align:right;"> input type="button" value="OK"> input type="button" value="Сброс"> /p> /td> /tr> /table> /body> /html>
Регистрация: 01.09.2012
Сообщений: 79
colspan с одним ‘L’ (моя опечатка) исправьте и попробуйте заработает или нет text-align:center;
Кстати кнопку сброс лучше не использовать или подальше от кнопки ‘OK’, а то многие бывает случайно промахиваются и