Как делать кнопки в html

Кнопки

Кнопки являются одним из популярных элементов интерфейса и часто применяются внутри форм, например, для отправки введённой информации в форме на сервер.

Кнопки на веб-странице можно создать несколькими способами — с помощью элемента или элемента .

Рассмотрим вначале добавление кнопки через и его синтаксис.

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

Табл. 1. Атрибуты

Атрибут	Описание
name	Имя кнопки, предназначено для того, чтобы обработчик формы мог её идентифицировать.
disabled	Блокирует кнопку и не позволяет на неё нажимать.
form	Идентификатор формы для связывания кнопки с элементом .
type	Для обычной кнопки значением является button .
value	Надпись на кнопке.
autofocus	Кнопка получает фокус после загрузки документа.

Создание кнопки показано в примере 1.

Пример 1. Добавление кнопки

Примите во внимание, что учитываются все пробелы в надписи на кнопке, в отличие от обычного текста HTML, поэтому можно ставить любое количество пробелов, которые в итоге влияют на ширину кнопки. Но правильнее, конечно же, задавать вид кнопки через CSS. Результат примера показан на рис. 1.

Рис. 1. Вид кнопки

Для таких кнопок есть ряд обязательных правил:

нельзя вкладывать внутрь ссылки ;
нельзя вкладывать внутрь кнопки ;
значение атрибута value не может быть пустым.

Второй способ создания кнопки основан на использовании элемента . Он по своему действию напоминает результат, получаемый с помощью . Но в отличие от него предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, включая изображения и таблицы. На рис. 2 показаны разные виды кнопок, полученные с помощью .

Атрибуты перечислены в табл. 1, но в отличие от кнопки атрибут value определяет только отправляемое на сервер значение, а не надпись на кнопке. Если требуется вывести на кнопке изображение, то добавляется внутрь , как показано в примере 2.

Пример 2. Рисунок на кнопке

Кнопка

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

Для также есть ряд ограничений:

нельзя вкладывать внутрь ссылки ;
один нельзя вкладывать внутрь другого.

Кнопка Submit

Для отправки данных на сервер предназначена специальная кнопка Submit. Её вид ничем не отличается от обычных кнопок, но при нажатии на неё происходит переход к обработчику формы по адресу, указанному атрибутом action элемента . Программа-обработчик, получает данные, введённые пользователем в полях формы, производит с ними необходимые манипуляции, после чего возвращает результат в виде HTML-документа. Что именно делает обработчик, зависит от автора сайта, например, подобная технология применяется при создании опросов, форумов, тестов и многих других вещей.

Синтаксис создания кнопки Submit зависит от используемого элемента или .

Атрибуты те же, что и у рядовых кнопок (пример 3), но значение атрибута value теперь можно не указывать, потому что браузер подставит текст самостоятельно, он различается в зависимости от браузера. Так, Firefox пишет «Отправить запрос», IE — «Подача запроса», Opera и Chrome — «Отправить». Сам текст надписи никак на функционал кнопки не влияет.

Пример 3. Отправка данных на сервер

Кнопка Reset

При нажатии на кнопку Reset данные формы возвращаются к первоначальным значениям. Как правило, эту кнопку применяют для очистки введённой в полях формы информации. Для больших форм от использования кнопки Reset лучше вообще отказаться, чтобы по ошибке на неё не нажать, ведь тогда придётся заполнять форму заново.

Синтаксис создания указанной кнопки прост и похож на другие кнопки.

В примере 4 показана форма с одним текстовым полем, которое уже содержит предварительно введённый текст с помощью атрибута value элемента . После изменения текста и нажатия на кнопку «Очистить», значение поля будет восстановлено и в нём снова появится надпись «Введите текст».

Пример 4. Кнопка для очистки формы

Значение кнопки Reset никогда не пересылается на сервер. Если надпись на кнопке опустить, иными словами, не задавать атрибут value , на кнопке по умолчанию будет добавлен текст «Сбросить».

Создание кнопки в HTML

Кнопки — неотъемлемая часть веб-портала. Создаются они при помощи тегов и . Рассмотрим оба варианта.

Как отображается кнопка в браузере:

Кнопка

Как отображается в браузере:

Как вы видите, тег отличается более обширными настройками. Так, на кнопку можно поместить любой элемент HTML, в том числе и изображение, как показано в нашем примере. Между тем, если вы хотите сделать действительно оригинальную необычныю кнопку для сайта, вам не обойтись без CSS.

Также рекомендуем почитать:

Как сделать кнопку в html

В HTML предусмотрен специальный тег или которые используются для создания кнопок. Разница между ними в том, что предоставляет расширенные возможности, например на такой кнопке можно разместить изображение.

 Нажми меня

Кнопка с рисунком

  src="./img.png" alt=""> Нажми меня

 type="radio" id="radio_button" name="radio-1" value="radio-1" checked>  for="radio_button">Нажми меня

Кнопка в виде чек-бокса

 type="checkbox" id="check-1" name="check-1" checked>  for="check-1">Нажми меня

Как создать кнопку сайта?

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

В этой инструкции показано, как создать свою кнопку.

Обычная кнопка
Кнопка с фоновым изображением
Кнопка на CSS
Ваша кнопка на других сайтах
Установка кнопки на сайт

Обычная кнопка

В качестве обычной кнопки используются HTML теги input или button . Однако, для этих тегов нет атрибута href, который мог бы направить пользователя на другую страницу. Поэтому им часто добавляют атрибут onclick с указанием ссылки, по которой нужно перейти:

Выглядит это следующим образом:

Кнопка с фоновым изображением

Если у вас есть изображение кнопки, то его можно использовать в обычной ссылке, например так:

Выглядит это следующим образом:

Чтобы получить такой результат, нужно сделать две вещи:

Создать изображение кнопки. Самостоятельно или с помощью онлайн-сервисов (например, cooltext.com).
Загрузить на сайт изображение и получить ссылку на него. Для этого можно воспользоваться файловым менеджером.

Кнопка на CSS

Кнопку можно оформить с помощью CSS. Для этого добавьте стили в шаблон сайта и укажите класс кнопки.

Добавьте в разделе Панель управления / Дизайн / Редактор / CSS:

.site-button

Тогда HTML-код самой кнопки будет следующим:

А на сайте кнопка отобразится так:

Не пугайтесь, если CSS кажется вам незнакомым и странным. Чтобы настроить кнопку под свои нужды, достаточно изменить отступы / размер шрифта в пикселях и цвет фона / текста в HEX (чтобы посмотреть все цвета, наберите в Яндексе запрос «hex цвета онлайн»).

Ваша кнопка на других сайтах

В некоторых случаях есть необходимость давать пользователям возможность устанавливать вашу кнопку на своих сайтах. Если предоставите готовый HTML-код кнопки, то они без труда смогут это сделать. Для этого нам потребуется создать текстовое поле и поместить внутрь него готовый код. Каждый тип кнопки будет иметь свой код:

Обычная кнопка

Кнопка с фоновым изображением

Кнопка на CSS

Установка кнопки на сайт

Теперь необходимо добавить код кнопки на свой сайт. Это удобно делать с помощью конструктора:

Добавьте код кнопки в блок:

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