HTML кнопка для сайта

В этой статье мы рассмотрим вопрос HTML кнопок — как ее сделать и добавить на свой сайт. Приведем примеры и покажем все варианты.

HTML кнопка на сайте выглядит примерно следующим образом:



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

  • html тег <button>
  • html тег <input>
  • с помощью тегов <a> и <img>

Рассмотрим каждый способ в отдельности

1. Как создать кнопку через HTML тег <button>

Синтаксис тега <button>

<button [атрибуты"]>Текст, который будет на кнопке<button>

У тега <button> отсутствуют обязательные атрибуты. При использовании кнопки без атрибутов она становится бесполезной в плане функционала. Поэтому обычно все же их используют. Давайте рассмотрим их

Атрибуты <button>

  • accesskey — разрешает доступ к кнопке через горячие клавиши
  • autofocus — автоматический фокус после загрузки страницы
  • disabled — запрет на изменение элемента
  • form — установить связь кнопки и формы html (это очень важный параметр)
  • formaction — адрес формы
  • formenctype — кодирование данных формы
  • formmethod — метод пересылки данных для формы (смотри: методы GET и POST)
  • formnovalidate — не проверять вводимые данные
  • formtarget — результат отправки открыть в новом окне или фрейме
  • name — имя кнопки
  • type — тип кнопки (отправка или очистка формы)
  • value — значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов
  • src — можно задать картинку для кнопки
  • style — можно задать список стилей

Примечание

Чтобы отправить данные формы на сервер через тег <button>, нужно чтобы он обязательно располагался внутри тегов <form>:

<form>
<button>Текст кнопки</button>
</form>

Пример 1. Использование тега <button>

<html>
<body>
<button>Текст кнопки</button>
<button src="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="knopka">Текст кнопки</button>
</body>
</html>

Преобразуется в следующее:





2. Создать кнопка html через <input>

Синтаксис тега <input>

<form>
...
<input name="name_field" type="значение" [атрибуты]>
...
</form>

В поле type нужно задать атрибут button или submit:

<input name="name_field" type="[button|submit]" [атрибуты]>

Возможно, у Вас возникнет вопрос в разнице задания атрибута type кнопки. Ниже расписаны отличия:

  • submit — для отправки значений из формы (управление передается на адрес указанный в адрес, указанный в action атрбута формы)
  • reset — для очистки всей формы
  • button — для обработки каких-то действий при нажатии (не путать с submit!)

Рассматривать отдельный пример не вижу смысла, поскольку кнопка выглядит абсолютно так же как и в примере выше. Разница лишь в возможностях. Так, у button есть больше возможностей, чем у input. Не смотря на это, второй вариант используют гораздо чаще.

3. Создать кнопку html через <a>

Конечно, такую кнопку можно назвать условной, поскольку максимум, что мы можем сделать с ней, это обычную ссылку. Такой подход часто используется в интернет-магазинах. Они делают кнопки “Добавить в корзину”, “Купить”

Синтаксис следующий

<body>
...
<a href="URL"><img src="button.jpg"></a>
...
</body>

В этом примере используется обычная картинка (тег <img>) обрамленная в ссылку тегом <a>. Такое использование не позволяет передавать данные с форм.

Более подробно про это можно почитать в статье

  • Как сделать кнопку на сайте ссылкой




Читайте также:

• Пример создание простой html страницы

• Самые основные html теги

• HTML тег <style> – подробное описание с примерами

• HTML тег <a> – подробное описание с примерами

• Коды символов для HTML

• Коды и названия html цветов для сайта

• HTML тег <table> – подробное описание с примерами

• HTML тег <img> – подробное описание с примерами

• Пробел html

← Перейти в каталог html уроков и советов

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.