• Как заработать на сайте
  • Как заработать в интернете
  • Инвестиции в интернете
  • Партнерские программы
  • Рейтинг парт. программ
  • SEO продвижение
  • Вопросы и ответы
  • Термины оптимизатора
  • HTML-уроки
  • Интернет
  • Мои услуги
  • Реклама на сайте
  • Обратная связь
Стоимость баннера за месяц: 30$ (подробности)
Главная → HTML уроки и советы → HTML кнопка

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 уроков и советов

Основные разделы
  • Главная
  • Партнерские программы
  • Рейтинг партнерских программ
  • Статьи про SEO
  • Термины SEO
  • Описание бирж
  • HTML-уроки и советы
  • CSS-уроки
  • Биткоины
  • PHP-уроки
  • Бинарные опционы
  • Социальные сети
  • Обзоры систем
  • Все про CMS
  • Реклама в интернете
Важно
  • Продвижение сайта
  • Аудит внутренней оптимизации
  • Куплю Ваш сайт
  • Куплю Вашу подпись на форуме
  • Подписаться на рассылку
  • Реклама на сайте
  • Карта сайта
  • Обратная связь
© 2010-2022 - Zarabotat-Na-Sajte.ru