HTML кнопка для сайта
В этой статье мы рассмотрим вопрос HTML кнопок — как ее сделать и добавить на свой сайт. Приведем примеры и покажем все варианты.
HTML кнопка на сайте выглядит примерно следующим образом:
Создаются HTML кнопки на сайте с помощью нескольких способов. Разницы особо нету, если только в возможностях оформления стилей.
Рассмотрим каждый способ в отдельности
1. Как создать кнопку через HTML тег
button [атрибуты"]>Текст, который будет на кнопкеbutton>
У тега отсутствуют обязательные атрибуты. При использовании кнопки без атрибутов она становится бесполезной в плане функционала. Поэтому обычно все же их используют. Давайте рассмотрим их
- accesskey — разрешает доступ к кнопке через горячие клавиши
- autofocus — автоматический фокус после загрузки страницы
- disabled — запрет на изменение элемента
- form — установить связь кнопки и формы html (это очень важный параметр)
- formaction — адрес формы
- formenctype — кодирование данных формы
- formmethod — метод пересылки данных для формы (смотри: методы GET и POST)
- formnovalidate — не проверять вводимые данные
- formtarget — результат отправки открыть в новом окне или фрейме
- name — имя кнопки
- type — тип кнопки (отправка или очистка формы)
- value — значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов
- src — можно задать картинку для кнопки
- style — можно задать список стилей
Чтобы отправить данные формы на сервер через тег , нужно чтобы он обязательно располагался внутри тегов :
form> button>Текст кнопкиbutton> form>
Пример 1. Использование тега
html> body> button>Текст кнопкиbutton> button src value">kartinka.jpg">Текст кнопки с картинкойbutton> body> html>
Пример 2. Кнопка изменятся при наведении
html> head> style> button.knopka < color: #fff; background: #FFA500; padding: 5px; border-radius: 5px; border: 2px solid #FF8247; > button.knopka:hover < background: #FF6347; > style> head> body> button class css">knopka">Текст кнопкиbutton> body> html>
Преобразуется в следующее:
2. Создать кнопка html через
form> . input name value">name_field" type value">значение" [атрибуты]> . form>
В поле type нужно задать атрибут button или submit :
input name value">name_field" type value">[button|submit]" [атрибуты]>
Возможно, у Вас возникнет вопрос в разнице задания атрибута type кнопки. Ниже расписаны отличия:
- submit — для отправки значений из формы (управление передается на адрес указанный в адрес, указанный в action атрбута формы)
- reset — для очистки всей формы
- button — для обработки каких-то действий при нажатии (не путать с submit!)
Рассматривать отдельный пример не вижу смысла, поскольку кнопка выглядит абсолютно так же как и в примере выше. Разница лишь в возможностях. Так, у button есть больше возможностей, чем у input. Не смотря на это, второй вариант используют гораздо чаще.
3. Создать кнопку html через
Конечно, такую кнопку можно назвать условной, поскольку максимум, что мы можем сделать с ней, это обычную ссылку. Такой подход часто используется в интернет-магазинах. Они делают кнопки «Добавить в корзину», «Купить»
body> . a href value">URL">img src value">button.jpg">a> . body>
В этом примере используется обычная картинка (тег ) обрамленная в ссылку тегом . Такое использование не позволяет передавать данные с форм.
Более подробно про это можно почитать в статье
Html элемент формы кнопка
Тег создает на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью тега (с атрибутом type=»button | reset | submit» ). В отличие от этого тега, предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путем изменения шрифта, цвета фона, размеров и других параметров.
Теоретически, тег должен располагаться внутри формы, устанавливаемой элементом . Тем не менее, браузеры не выводят сообщение об ошибке и корректно работают с тегом , если он встречается самостоятельно. Однако, если необходимо результат нажатия на кнопку отправить на сервер, помещать в контейнер обязательно.
Синтаксис
Атрибуты
accesskey Доступ к элементам формы с помощью горячих клавиш. autofocus Устанавливает, что кнопка получает фокус после загрузки страницы. disabled Блокирует доступ и изменение элемента. form Связывает между собой форму и кнопку. formaction Задаёт адрес, на который пересылаются данные формы при нажатии на кнопку. formenctype Способ кодирования данных формы. formmethod Указывает метод пересылки данных формы. formnovalidate Отменяет проверку формы на корректность. formtarget Открывает результат отправки формы в новом окне или фрейме. name Определяет уникальное имя кнопки. type Тип кнопки — обычная, для отправки данных формы на сервер или для очистки формы. value Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Результат данного примера показан на рис. 1.
Рис. 1. Вид кнопок в браузере Safari
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает атрибут value .
HTML тег кнопка
Атрибут type тега задает тип, используемой кнопки:
| Значение | Описание |
|---|---|
| button | Обычная кликабельная кнопка, которая не имеет поведения по умолчанию. Может использоваться совместно с клиентскими скриптами. |
| reset | Кнопка, которая сбрасывает все значения элементов управления формы к их первоначальным значениям. |
| submit | Кнопка, которая служит для отправки данных формы на сервер. Это значение по умолчанию, если атрибут не указан, или если атрибут динамически меняется в пустое или недопустимое значение. |
Давайте рассмотрим пример использования:
Тег "button" name = "button1" style = "width: 80px; height:50px;"> Кнопка 1
В данном примере мы разместили 3 кнопки, которым задали уникальные имена атрибутом name и с использованием внутренних CSS стилей указали ширину (width) размером 80 пикселей и высоту (height) размером 50 пикселей:
