HTML тег кнопка. Кнопки html для сайта


Учебник HTML 5. Статья "Тег кнопка"

HTML тег <button> используется для размещения кнопки. Внутри тега <button> вы можете разместить как отформатированный текст, так и изображение. Это основная разница между этим элементом и кнопками, созданными с использованием тега <input> (c атрибутом type = "button").

Атрибут type тега задает тип, используемой кнопки:

ЗначениеОписание
buttonОбычная кликабельная кнопка, которая не имеет поведения по умолчанию. Может использоваться совместно с клиентскими скриптами.
resetКнопка, которая сбрасывает все значения элементов управления формы к их первоначальным значениям.
submitКнопка, которая служит для отправки данных формы на сервер. Это значение по умолчанию, если атрибут не указан, или если атрибут динамически меняется в пустое или недопустимое значение.

Всегда указывайте для тега <button> тип атрибута type = "button" если элемент используется в качестве обычной кнопки. Если вы используете тег <button> внутри HTML формы, то вы можете столкнуться с тем, что старые версии браузеров могут представить различные значения при отправке формы. Рекомендуется в этом случае использовать элемент <input> для отправки HTML форм.

Давайте рассмотрим пример использования:

<!DOCTYPE html> <html> <head> <title>Тег <button></title> </head> <body> <button type = "button" name = "button1" style = "width: 80px; height:50px;"> <b>Кнопка 1</b> </button><br><br> <button type = "button" name = "button2" style = "width: 80px; height:50px"> <img src = "../../images/top2.png" alt = "up" width = "40" height = "40"> </button><br><br> <button type = "button" name = "button3" style = "width: 80px; height:50px;"> <i>Кнопка 3</i> </button><br><br> </body> </html>

В данном примере мы разместили 3 кнопки, которым задали уникальные имена атрибутом name и с использованием внутренних CSS стилей указали ширину (width) размером 80 пикселей и высоту (height) размером 50 пикселей:

  • Текст внутри первой кнопки мы отформатировали жирным начертанием (тег <b>). Обратите внимание, что текст, который мы поместили внутри тега отображается на самой кнопке.
  • Внутри второй кнопки элементом <img> мы разместили *.png изображение (с прозрачным задним фоном). Атрибутом alt мы задали альтернативный текст для изображения, для того случая если оно по каким-то причинам не будет загружено (обязательный атрибут), относительный путь к изображению мы задали атрибутом src (обязательный атрибут), атрибутами width (ширина) и height (высота) задали размеры изображения равными 40 на 40 пикселей. Обратите внимание, что в атрибутах, которые задают размер не требуется указывать единицы измерения в отличии от CSS стилей, по той причине, что атрибутами можно указать значение только в пикселях.
  • Текст внутри третьей кнопки мы отформатировали курсивным начертанием (тег <i>).

Результат нашего примера:

Рис. 41 Пример использования тега <button> (кнопкa в HTML). Рис. 41 Пример использования тега <button> (кнопкa в HTML).

Отключение кнопки

Атрибут disabled (HTML тега <button>) является логическим атрибутом и указывает, что кнопка должна быть отключена (недоступна для взаимодействия с пользователем). Атрибут используется совместно со скриптами, например, пока какое-то условие не выполнено элемент неактивен.

<!DOCTYPE html> <html> <head> <title>Пример использования атрибута disabled HTML тега <button></title> </head> <body> <button type = "button">Элемент активен</button> <!-- элемент используется в качестве кнопки --> <button type = "button" disabled>Элемент отключен</button> <!-- кнопка отключена --> </body> </html>

В данном примере мы указали для второго элемента <button> с типом кнопка (type = "button") атрибут disabled, который отключает элемент и не дает нам кликнуть по кнопке.

Рис. 41а Пример отключения кнопки (предварительное отключение элемента). Рис. 41а Пример отключения кнопки (предварительное отключение элемента).

Автофокус на кнопке

В HTML 5 был добавлен такой логический атрибут как autofocushtml5 (HTML тега <button>) указывает, что кнопка должна автоматически получить фокус при загрузке страницы.

Обращаю Ваше внимание, что только один элемент в документе может иметь атрибут autofocushtml5 (браузер даст фокус тому элементу, который ближе расположен к началу документа, остальные просто будут игнорированы).

Давайте рассмотрим пример использования:

<!DOCTYPE html> <html> <head> <title>Пример использования атрибута autofocus HTML тега <button></title> </head> <body> <form> <button name = "button" type = "button">Кнопка</button> <button name = "focusButton" type = "button"><b>Жми!!!</b></button> </form> </body> </html>

В данном примере мы создали две кнопки (HTML тег <button>), атрибутом name указали им уникальные имена. Для второй кнопки атрибутом autofocushtml5 задали, что при загрузке страницы она получит фокус (браузеры, как правило, подсвечивают этот элемент).

Результат нашего примера:

Рис. 41б Пример использования атрибута autofocus (фокус на кнопке). Рис. 41б Пример использования атрибута autofocus (фокус на кнопке).

Браузер Internet Explorer поддерживает атрибут autofocushtml5 только с десятой версии.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (два png изображения) в любую папку на вашем жестком диске:
  • Используя полученные знания составьте следующую HTML страницу:
Практическое задание № 24. Практическое задание № 24.

Для выполнения задания Вам потребуются знания из статьи "HTML Цвета". Если вы пропустили её, то вернитесь для её изучения.

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

basicweb.ru

Тег | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+ 1.0+ 6.0+ 1.0+ 1.0+ 1.0+ 1.0+

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

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <button> создает на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью тега <input> (с атрибутом type="button | reset | submit"). В отличие от этого тега, <button> предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путем изменения шрифта, цвета фона, размеров и других параметров.

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

Синтаксис

<form> <button>...</button> </form>

Атрибуты

accesskey Доступ к элементам формы с помощью горячих клавиш. autofocus Устанавливает, что кнопка получает фокус после загрузки страницы. disabled Блокирует доступ и изменение элемента. form Связывает между собой форму и кнопку. formaction Задаёт адрес, на который пересылаются данные формы при нажатии на кнопку. formenctype Способ кодирования данных формы. formmethod Указывает метод пересылки данных формы. formnovalidate Отменяет проверку формы на корректность. formtarget Открывает результат отправки формы в новом окне или фрейме. name Определяет уникальное имя кнопки. type Тип кнопки — обычная, для отправки данных формы на сервер или для очистки формы. value Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

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

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

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Тег BUTTON</title> </head> <body> <p><button>Кнопка с текстом</button> <button><img src="images/umbrella.gif" alt="Зонтик" > Кнопка с рисунком</button></p> </body> </html>

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

Вид кнопок в браузере Safari

Рис. 1. Вид кнопок в браузере Safari

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает атрибут value.

htmlbook.ru

Переключатели | htmlbook.ru

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

<input type="radio" name="имя" атрибуты>

Атрибуты переключателей перечислены в табл. 1.

Табл. 1. Атрибуты переключателей Атрибут Описание
checked Предварительное выделение переключателя. По определению, набор переключателей может иметь только один выделенный пункт, поэтому добавление checked сразу к нескольким полям не даст особого результата. В любом случае, будет отмечен элемент, находящийся в коде HTML последним.
name Имя группы переключателей для идентификации поля. Поскольку переключатели являются групповыми элементами, то имя у всех элементов группы должно быть одинаковым.
value Задаёт, какое значение будет отправлено на сервер. Здесь уже каждый элемент должен иметь свое уникальное значение, чтобы можно было идентифицировать, какой пункт был выбран пользователем.

Создание группы переключателей показано в примере 1.

Пример 1. Создание переключателей

HTML5IECrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Переключатели</title> </head> <body> <form action="handler.php"> <p><b>Какое у вас состояние разума?</b></p> <p><input name="dzen" type="radio" value="nedzen"> Не дзен</p> <p><input name="dzen" type="radio" value="dzen"> Дзен</p> <p><input name="dzen" type="radio" value="pdzen" checked> Полный дзен</p> <p><input type="submit" value="Выбрать"></p> </form> </body> </html>

В результате получим следующее (рис. 1).

Вид переключателей в браузере

Рис. 1. Вид переключателей в браузере

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

htmlbook.ru

Скрипты для сайтов

24.07.2018 629 Form

Stepper.js — увеличение/уменьшение значений в input type="number" заданным шагом

Скрипт позволяющий кастомизировать кнопки плюс/минус у поля input type="number" в соответствии с дизайном. Настройки интервала значений и шага задаются через привычные атрибуты поля: step, max, min. Поля такого рода часто используются при указании количества товара помещаемого в корзину, а также управление товаром в самой корзине.

Stepper.js — увеличение/уменьшение значений в input type="number" заданным шагом 22.06.2018 736 Новости

Zeplin 2.0 — инструмент для совместной работы дизайнеров и верстальщиков

Zeplin — незаменимый инструмент для команды верстальщиков и дизайнеров. Вы можете экспортировать проекты в Zeplin из таких программ, как Sketch, Adobe Photohop, Adobe XD и Figma.

Zeplin 2.0 — инструмент для совместной работы дизайнеров и верстальщиков 21.06.2018 826 Other

Bubbly — анимированный фон из пузырьков на canvas

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

Bubbly — анимированный фон из пузырьков на canvas 18.06.2018 841 Menu & Nav

Canvi — off-canvas панель навигации

Canvi навигационная панель (off-canvas) с несколькими параметрами для настройки. Можно использовать сразу несколько панелей на одной странице, устанавливать адаптивную ширину и использовать свои стили для панели.

Canvi — off-canvas панель навигации 23.04.2018 1 198 Time & Clock

Часы

Аналоговые часы на CSS и чистом JS, отображающие текущее время у пользователя

Часы 13.03.2018 2 048 Полезно

Susy 3 — инструмент для верстки сеток на SASS

Набор инструментов для упрощения вычислений связанных с версткой сеток на SASS. Рассмотрим примеры сеток на float, flex, grid. Теперь нам не нужен bootstrap или foundation для сеток, мы можем сами быстро всё написать, включая 5 колоночную и любую другую сетку.

Susy 3 — инструмент для верстки сеток на SASS 19.02.2018 2 410 Menu & Nav

Эффект зачеркивания при наведении в меню

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

Эффект зачеркивания при наведении в меню 09.02.2018 1 615 Other

Cocoen — сравнение изображений до и после

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

Cocoen — сравнение изображений до и после 23.01.2018 3 010 Layout

Cards — верстка карточки в сетке Bootstrap 4

Верстка карточки в сетке Bootstrap 4 и с иконками FontAwesome 5

Cards — верстка карточки в сетке Bootstrap 4 09.01.2018 3 295 Other

Генератор случайных линий для фона

Плагин ckLine генерирует случайные svg линии для фона.

Генератор случайных линий для фона 04.01.2018 2 083 Time & Clock

Оригинальные часы

Оригинальные цифровые часы

Оригинальные часы 27.12.2017 3 507 Animation

Direction Reveal — появляющийся контент при наведении в направлении движения

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

Direction Reveal — появляющийся контент при наведении в направлении движения

pcvector.net