Как задать действие для кнопки в html

Тег чтобы добавить на страницу кнопку.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

Кратко
Пример
Как понять
Как пишется
Атрибуты
Подсказки
На практике
1. Дока Дог советует
2. Алёна Батицкая советует
1. Какая разница между ссылками и кнопками? В каких случаях надо использовать ссылку, в каких кнопку? Почему эта разница важна с точки зрения доступности?
Контрибьюторы:

Обновлено 13 сентября 2021

Кратко

Скопировать ссылку «Кратко» Скопировано

создаёт кликабельную кнопку.

Пример

Скопировать ссылку «Пример» Скопировано
```
  button name="button">Нажми меняbutton>      
```
Как понять

Скопировать ссылку «Как понять» Скопировано

С помощью CSS можно настроить внешний вид кнопки и текста на ней: шрифт, размер, цвет фона и другие параметры. А если ничего не менять, то будет выглядеть, как стандартная браузерная кнопка.

На кнопку можно поместить любой HTML-элемент.

Как пишется

Скопировать ссылку «Как пишется» Скопировано
```
      form> button>. button> form>      
```
Атрибуты

Скопировать ссылку «Атрибуты» Скопировано

К тегу можно применить любой универсальный атрибут, а также специфические атрибуты кнопок:
- autofocus — делает так, чтобы при загрузке страницы кнопка уже была выбрана и подсвечена, так что её можно нажать с клавиатуры клавишей Enter.
- disabled — делает кнопку неактивной: нажать на неё нельзя, по дефолту отображается серым цветом.
- form — связывает кнопку с любой формой в документе через ID. Если ID не указан, то с предшествующей формой.
- formaction — задаёт URL-адрес, на который отправляются данные после нажатия на кнопку.
- formenctype — определяет формат файла, который пользователь может отправить при нажатии на кнопку. У него есть три значения:
  - application / x — www — form — urlencoded : стандартное значение, вместо пробелов ставится +, а символы, вроде русских букв, кодируются их шестнадцатеричными значениями (например, %D0%9F%D0%B5%D1%82%D1%8F вместо Петя ��);
  - multipart / form — data — используется, чтобы отправлять файлы, данные при этом не кодируются;
  - text / plain — буквы и другие символы не кодируются, вместо пробелов появляется +.
  - post — упаковывает данные формы в тело сообщения и передаёт их на сервер, объём данных зависит от настроек сервера;
  - get — добавляет данные из формы прямо в URL-адрес после знака «?», например https : / / site . ru / doc / ? name = Ivan&age = 27 здесь пары «имя=значение» разделяются символом «&», а объём данных не может превышать 4 Кб. Если добавить этот атрибут в кнопку, он переопределит атрибут method у всей формы.
  - _self : показывает данные в текущем окне. Это значение используется по умолчанию.
  - _blank : показывает данные в новом окне браузера — его используют чаще всего.
  - _parent : показывает данные внутри родительского элемента фрейма, а если такого нет, то загружает в текущем окне.
  - _top : отменяет все родительские фреймы и загружает страницу в полном окне браузера. Если родительских фреймов нет, то показывает данные в текущем окне.
  - submit : отправляет данные на сервер. Это также значение по умолчанию.
  - reset : удаляет введённые данные из формы.
  - button : просто кнопка. Действие для неё можно задать через скрипты.
  Подсказки
  
  Скопировать ссылку «Подсказки» Скопировано
  
  �� Если хочется, чтобы пользователь отправил данные вам на сервер по нажатию кнопки, то либо должен быть внутри контейнера , либо связан с формой при помощи атрибутов id и form :
```
    Введите ваш email  form id="login"> label> Введите ваш email input type="email" placeholder="Ваш email"> label> form> button type="submit" form="login">Отправитьbutton>      
```
  �� Тег с атрибутом type = «button | reset | submit» тоже создаёт кнопку, но проще стилизовать, так как внутрь можно добавить любой HTML-контент, например, , или .
  
  �� Если создаёте кнопку, которая не отправляет ничего на сервер, убедитесь, что задан атрибут type , иначе может вылезти ошибка.
  
  На практике
  
  Скопировать ссылку «На практике» Скопировано
  
  Дока Дог советует
  
  Скопировать ссылку «Дока Дог советует» Скопировано
  
  �� Но есть и другое мнение. Я вот использую крайне редко. Допустим, вам нужно отправить данные формы на сервер. Если нужна обычная квадратная кнопка с надписью «Отправить», то я ставлю , потому что проще верстать ��‍♂️
  
  Единственный случай, когда я использую — это когда нужно отправить данные из формы на сервер, но кнопка нужна посложнее: с картинкой, заливкой или особым шрифтом, например. В обычный картинку не вставить. А с тегом не хочется извращаться, потому что он по умолчанию не отправляет данные формы.
  
  Алёна Батицкая советует
  
  Скопировать ссылку «Алёна Батицкая советует» Скопировано
  
  �� При выборе между кнопкой и ссылкой нужно смотреть исключительно на семантику, а не на внешний вид элемента в дизайне и уж точно не на простоту вёрстки.
  
  В первую очередь вы должны понять, за что отвечает элемент: за перенаправление на другую страницу, раздел сайта, ресурс или выполняет какие-то действия на самой странице (например, отправляет данные формы).
  
  �� Если мы по клику на элемент открываем новое окно или перенаправляем пользователя на другую страницу — выбираем тег , ссылку.
  
  Если мы никуда пользователя не отправляем, а, например, открываем диалоговое окно или листаем слайдер, то это кнопки.
  
  Вадим Макеев в своём докладе «Жми сюда!» сформулировал следующий способ выбора между кнопкой и ссылкой:
  - В любой ситуации, где вам нужно выбирать, кнопка это или ссылка, выберите кнопку ( ).
  - Если вы можете дать какой-то адрес для перенаправления — тогда это ссылка ( ).
  - Всегда начинайте с кнопки.
  + Развернуть
  
  На собеседовании
  
  Скопировать ссылку «На собеседовании» Скопировано
  
  Какая разница между ссылками и кнопками? В каких случаях надо использовать ссылку, в каких кнопку? Почему эта разница важна с точки зрения доступности?
  
  Скопировать ссылку «Какая разница между ссылками и кнопками? В каких случаях надо использовать ссылку, в каких кнопку? Почему эта разница важна с точки зрения доступности?» Скопировано
  
  Скопировать ссылку «Александр Ламков отвечает» Скопировано
  
  Ощутимая разница между ссылками и кнопками в том, что «активация» элемента при фокусе с клавиатуры происходит по-разному. Для ссылок — клавишей Enter , а для кнопок — пробелом или Enter . Пользователь, привыкший перемещаться по интерфейсу сайта и взаимодействовать с ним с клавиатуры, получит неожиданное поведение при попытке взаимодействия с ложной ссылкой или кнопкой.
  
  Чтобы определить, какой тег использовать, ссылку или кнопку, нужно подумать про ожидаемое поведение при взаимодействии с элементом. Если при нажатии на элемент подразумевается переход на другую страницу, то в коде элемент нужно сделать тегом , то есть ссылкой. Если при нажатии произойдёт действие в рамках текущей страницы, например, откроется модальное окно с формой входа, то такой элемент нужно сделать тегом .
  
  С точки зрения доступности у ссылок и кнопок разные роли. У ссылок — link , у кнопок — button . Скринридер перед озвучиванием содержимого элемента произносит его роль. Если используете неправильные теги, роли перемешаются и это запутает пользователей скринридеров.
  
  Тег HTML кнопка
  
  Тег в HTML используется для создания кликабельной кнопки.
  
  Кнопка, созданная с помощью тега button , может быть одного из трех типов: submit — кнопка отправки формы, reset — кнопка сброса данных в полях формы, button — кликабельная кнопка, действие по которой определяется скриптом.
  
  HTML кнопка не является ссылкой. Для создания ссылки в виде кнопки используйте тег , стилизованный с помощью таблиц стилей CSS.
  
  Контентом кнопки может быть как текст, так и другие HTML теги, например, используя тег внутри кнопки, можно сделать кнопку-картинку.
  
  Тег HTML является элементом формы. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.
  
  Синтаксис
  Примеры использования кнопки
  
  Стандартная HTML кнопка
  
  Показать еще
  HTML код стандартной кнопки
  Кнопка button стилизованная с помощью CSS
  
  Запустить скрипт
  HTML код стилизованной кнопки
```
  
button[name="run_script"] < 
border: none; 
border-radius: 7px; 
padding: 10px 25px; 
background: #ff9900; 
cursor: pointer; 
text-transform: uppercase; 
font-weight: bold; 
color: white; 
> 
button[name="run_script"]:hover < 
background: #ff6600; 
> 
 
```
  Кнопка — картинка с помощью тега button
  
  HTML код кнопки — картинки
```
 
  
```
  Кнопка в HTML коде страницы
  
  В примере показано использование кнопки в качестве кнопки отправки формы (тип submit).
  
  HTML код примера
```
 
 
Кнопка button в коде HTML формы 
 
 
 
 
 
```
  Кнопки button и input в чем отличие?
  
  Разница между кнопкой, созданной с помощью тега и кнопкой, созданной тегом input в механизме наполнения кнопки контентом. Внутри тега кнопки button вы можете размещать HTML теги, тем самым расширяется возможность по созданию визуальной составляющей кнопки. В случае с input , придется ограничиться использованием текста через атрибут value или использовать изображение в input с атрибутом type=»image» . Возможности использовать HTML теги внутри в кнопке input нет.
  
  Браузеры могут по разному устанавливать тип кнопки по умолчанию, поэтому, для обеспечения кроссбраузерности, стоит всегда использовать атрибут type .
  
  Поддержка браузерами
  
  Тег
  
  Да Да Да Да Да
  
  Атрибуты тега button
  
  Логический атрибут. Если указан, при загрузке документа фокус будет переведен на кнопку.
  
  Логический атрибут. Если указан, делает кнопку неактивной (на кнопку нельзя будет нажать).
  
  Указывает на форму, к которой относится кнопка. Используется, если кнопка применяется для отправки или очистки формы и при этом находится вне HTML кода формы.
  
  Если кнопка находится внутри тега , то использовать атрибут form не нужно, кнопка по умолчанию привязана к форме, внутри которой находится.
  
  URL адрес документа — обработчика формы. Используется для кнопок с типом submit. Если указан, форма будет отправлена по URL адресу, указанному в этом атрибуте, игнорируя атрибут action тега .
  
  Способ кодирования информации. Используется для кнопок с типом submit.
  
  Указывает как именно нужно кодировать информацию при отправке на сервер, вызванной нажатием кнопки, содержащей этот атрибут.
  - application/x-www-form-urlencoded — все символы кодируются перед отправкой в шестнадцатеричные значения (HEX) ASCII, пробелы заменяются на «+». Значение по умолчанию;
  - multipart/form-data — символы не кодируются. Значение обязательно нужно использовать в форме с полем input type=»file» (при использовании файлов в форме);
  - text/plain — символы не кодируются, пробелы заменяются символом «+».
  Атрибут используется только в случае отправки формы методом POST.
  
  Этот атрибут переопределяет значение, указанное в атрибуте enctype тега .
  
  HTTP метод передачи данных формы.
  - GET — передача данных в URL с помощью пар имя-значение (name-value). Значение по умолчанию.
  - POST — передача данных в теле HTTP запроса.
  Используется только для кнопок с типом submit.
  
  Этот атрибут переопределяет значение, указанное в атрибуте method тега .
  
  Логический атрибут. Браузер не будет выполнять проверку правильности заполнения формы перед отправкой, вызванной нажатием кнопки, содержащей этот атрибут. По умолчанию браузер проверяет наличие значения в обязательных полях (required), соответствие значений стандарту (например, для поля с типом email) и т.п.
  
  Этот атрибут переопределяет значение, указанное в атрибуте novalidate тега .
  
  Используется для кнопок с типом submit.
  
  Определяет где будет открыт результат обработки формы (ответ сервера), при отправке по нажатию кнопки с этим атрибутом:
  - _blank — в новой вкладке или окне;
  - _parent — в родительском окне;
  - _self — в текущем окне (используется по умолчанию);
  - _top — на весь экран.
  Этот атрибут переопределяет значение, указанное в атрибуте target тега .
  
  Имя кнопки. Используется при передаче данных формы на сервер. Значение (value) кнопки будет передано в переменной, имеющей имя, указанное в этом атрибуте.
  - button — простая кликабельная кнопка, действие по нажатию которой определяется скриптом;
  - reset — кнопка очистки полей формы. Стирает информацию введенную пользователем в поля связанной с кнопкой формы;
  - submit — кнопка отправки формы. Выполняет отправку связанной формы на сервер.
  Значение этого атрибута по умолчанию может отличаться в разных браузерах. Для кроссбраузерности вашего кода всегда указывайте этот атрибут.
  
  Значение кнопки, которое будет отправлено на сервер.
  
  На сервер отправляется переменная, имеющая название, указанное в атрибуте name кнопки и значение, указанное в этом атрибуте.
  
  К форме может быть привязано несколько кнопок отправки. На сервер отправляются данные только той кнопки, которая вызвала событие отправки формы.
  
  by Lebedev
  
  Оцените, насколько полезна эта страница
  Эти материалы могут быть вам полезны
  Комментарии
  18 апреля 2020 г.
  Jelezoglo Vasili Vasili
  Like!
  Спасибо за помощь и информацию.
  26 августа 2021 г.
  15 марта 2022 г.
  
  Не понятно в какую часть кодов ставить ссылку для кнопок и не понятно с формы где накапливаются данные пользователей, а если они отправляются на почту, то куда email получателя добавлять
  
  17 апреля 2022 г.
  
  Дмитрий, кнопка и ссылка в HTML — это разные вещи. Кнопка
  
  В каком-то смысле из кнопки с типом type=»submit» можно сделать ссылку. Для этого нужно определить атрибут formaction у такой кнопки, вписав как значение целевой URL.
  
  Что касается данных пользователя, введенных в форму, то они передаются на сервер в момент отправки формы. URL по которому сервер получает данные определяется атрибутом action тега , к которому относится кнопка, либо атрибутом formaction самой кнопки. То есть, фактически, при отправке формы происходит переход по указанному URL с передачей серверу введенных пользователем данных.
  
  Никакого сохранения данных или отправки на email HTML форма сама по себе не делает. В свою очередь, это может сделать сервер. Например, в случае с PHP сервером, данные попадут в массивы $_GET и/или $_POST, после чего их можно будет сохранить в базу данных либо отправить на email средствами PHP.
  
  22 мая 2022 г.
  
  А можно ли как-то сделать так, чтобы при нажатии кнопки выполнялся код, написанный на Python и результат выполнения кода выводился в текстовое поле?
  
  22 мая 2022 г.
  
  Юра, можно привязать к нажатию HTML кнопки button отправку AJAX запроса с помощью JavaScript. Далее на сервере, работающим с Python, обработать запрос и прислать в ответ на AJAX запрос информацию, которую с помощью JavaScript вставить в текстовое поле.
  
  Как сделать кнопку в html css? Красивые кнопки для сайта с примерами
  
  Приветствую! В этой статье хочу поговорить про кнопки, на мой взгляд один из важнейших элементов в дизайне сайтов и приложений. Ведь, в большинстве случаев, кнопки нужны для того, чтобы заставить пользователя выполнить какое-либо действие (подписаться на рассылку, добавить товар в корзину, оставить комментарий, заказать обратный звонок и т.д.), которое можно так или иначе монетизировать. Мы же здесь не просто так собрались 😉
  
  Итак из этой статьи вы узнаете:
  - Для чего нужны кнопки и какие функции они выполняют
  - Какие бывают кнопки и в чем их различия
  - Как сделать кнопку в HTML
  - Как сделать красивую кнопку в HTML и CSS
  Также в конце статьи вас ждет небольшой бонус, который пригодится каждому сайтостроителю.
  
  Но давайте по порядку.
  
  Для чего нужны кнопки на сайте?
  
  Ответ напрашивается сам собой: “Для того, чтобы их нажимали!”. И, действительно, выделяющаяся симпатичная кнопка привлекает гораздо больше внимания чем тусклая и унылая ссылка. С другой стороны, если вся страница заполнена разномастными кнопками, которые, переливаясь и моргая, требуют внимания пользователя, он, скорее всего, не поняв, что от него требуется, не нажмет ни на одну и просто закроет вкладку.
  
  Поэтому использовать кнопки надо “экономно”, в идеале не больше 1-2 в видимой области экрана. При этом пользователю должно быть максимально понятно, что произойдет, если он нажмет на кнопку.
  
  Какие бывают кнопки?
  
  В моем представлении кнопки бываю двух типов, для каждого из них я использую соответствующие HTML-теги:
  
  Кнопки-ссылки нужны для привлечения внимания к ссылке. Побуждают пользователя перейти на какую-либо страницу, например, страницу регистрации. Для них я использую тег .
  
  Кнопки-действия нужны для совершения какого-либо действия на странице (отправка формы, открытие модального окна и т.д.). Для этого можно использовать теги или . Я предпочитаю второй вариант, т.к. он гораздо более гибкий в настройке.
  
  В то же время атрибут href является невалидным для тега , поэтому его не стоит использовать в качестве кнопки-ссылки. Опять же, можно сделать кнопку ссылкой, придумав какие-нибудь “костыли” типа
  
  Но зачем это нужно. Все гораздо проще и понятнее.
  
  Если кнопка нужна для перехода на страницу — используем , во всех остальных случаях —
  
  Как сделать кнопку в HTML?
  
  Тег используется для создания кнопок, при нажатии на которые должны происходить какие-либо действия, например отправка формы, очистка формы, открытие модального окна, загрузка изображения и т.д.
  Основными атрибутами таких кнопок являются:
  
  type: button | submit | reset
  
  Тип кнопки. Это необязательный параметр, и его можно пропустить. Если кнопка находится внутри формы и атрибут type отсутствует, браузер посчитает, что тип кнопки — submit и попытается отправить форму обработчику.
  
  Несмотря на слухи, которые ходят в интернете, о том, что тег должен располагаться только внутри тегов , на самом деле это не так 🙂 Если вдруг по какой-то причине Вам нужно или хочется поместить свою кнопку вне формы, которую она должна отправлять/сбрасывать/еще-что-то-делать, просто используйте атрибут form со значением соответствующим атрибуту id этой формы.
  
  Кроме того, у тега button могут быть следующие атрибуты:
  - autofocus — Автоматически устанавливает фокус браузера на кнопке при загрузке страницы
  - disabled — Кнопка заблокирована и нажатие на нее не выполняет никаких действий
  - formaction (только для типа submit) — адрес обработчика формы, на который отправляются данные из формы
  - formenctype (только для типа submit) — Тип отправляемых данных. Может быть application/x-www-form-urlencoded , multipart/form-data , text/plain
  - formmethod (только для типа submit) — HTTP-метод, при помощи которого пересылаются данные. Может быть get или post
  - formnovalidate (только для типа submit) — Отключает автоматическую валидацию введенных данных
  - formtarget (только для типа submit) — Указывает на то, как выводится результат обработки формы. Может быть _blank , _self , _parent , _top или значение атрибута name фрейма
  - name — Имя кнопки (можно использовать если, например, в форме есть несколько кнопок, которые ее отправляют, и обработчику нужно знать, какая из них нажата)
  - value — Значение кнопки (смысл примерно тот же, что и с name)
  Совет: используйте только быстрый и надёжный хостинг для своих сайтов, например Beget.com
  
  Как сделать красивую кнопку в HTML и CSS?
  
  У каждого из нас свое представление о красоте: кто-то считает красивым закат на берегу моря, а кто-то — Ниссан Жук. О вкусах, как говорится, не спорят.
  
  В моем представлении красивая кнопка — это кнопка, которая обладает следующими качествами:
  
  Является интерактивной (т.е. реагирует на взаимодействие с ней пользователем). Отличительной чертой кнопок, является то, что их можно нажимать, следовательно у кнопки должно быть несколько состояний: дефолтное (состояние «покоя»), нажатое и «ховер» (при наведение курсора)
  
  Выделяется на фоне других элементов. Посетители вашего сайта в основном бегло сканируют страницу в поисках нужной им информации. Если вам нужно, чтобы они нажимали на кнопки, сделайте их максимально заметными, контрастными. Главное не перестарайтесь.
  
  Выглядит привычно и современно. Ваши посетители постоянно взаимодействуют с интерфейсами других сайтов и приложений. Поэтому они привыкли, что кнопки выглядят именно так, а не иначе. Если, в попытке привлечь их внимание, вы будете изобретать велосипед, пользователи могут просто не понять, что это кнопка.
  
  Кроме того, тренды в дизайне интерфейсов и технологии их создания постоянно меняются, и за ними нужно успевать.
  
  Если вы хотите узнать как сделать кнопку объемной или с эффектом «стекляшечности», как сделать картинку кнопкой и т.д. — почитайте статьи по дизайну интерфейсов за 2005-2009 гг. 🙂
  
  Еще одним пунктом я бы добавил, расположение кнопки в привычных для посетителей местах (например, кнопки входа/регистрации в правом верхнем углу, или кнопка отправки формы под формой). Но это уже больше относится к дизайну всей страницы.
  
  Итак, давайте для начала сделаем две обычные кнопки, одна из которых должна открывать модальное окно (кнопка-действие — ) с формой для входа, а вторая — вести на страницу регистрации (кнопка-ссылка — ). При этом обе кнопки будут выполнены в одной стилистике.
  
  Для вывода иконок в кнопках, да и, в общем-то, везде я использую замечательный шрифт FontAwesome, а для текста — бесплатный шрифт Roboto, с которым одинаково хорошо смотрятся как кириллические, так и латинские символы.
```
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css'); @import url('https://fonts.googleapis.com/css?family=Roboto');
```
```
.button < /* Сбрасываем дефолтные стили */ border: none; outline: none; display: inline-block; text-align: center; text-decoration: none; cursor: pointer; font-size: 16px; /* Можно также использовать любые встроенные и кастомные шрифты, например, отсюда */ font-family: Roboto, Verdana, Tahoma, sans; /* Тут можно поэкспериментировать */ padding: 12px 16px; border-radius: 100px; color: #fff; >.button i < margin-right: 4px; >.button + .button < margin-left: 6px; >.button.blue < background: #2196F3; >.button.purple
```
  Теперь добавим интерактивности: при наведении кнопки будут слегка подсвечиваться, а при нажатии затемняться (как бы утапливаться).
```
.button:hover < box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); >.button:hover.blue < background: #39a1f4; >.button:hover.purple < background: #a66bbe; >.button:active < box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); >.button:active.blue < background: #0d8aee; >.button:active.purple
```
  Вот и все! Две симпатичные кнопки готовы.
  
  При наличии желания и времени можно их дополнить плавными анимированными переходами. Вот несколько примеров:
  
  А теперь обещанный бонус для тех кто дочитал этот пост до конца.
  
  Красивая анимированная кнопка наверх для сайта
```
#scroll-top < position: fixed; bottom: 48px; right: 48px; >#scroll-top button < position: relative; overflow: hidden; height: 48px; width: 48px; border: none; outline: none; cursor: pointer; color: rgba(0, 0, 0, 0.3); font-size: 16px; background: #21c984; transition: width 0.5s; border-radius: 100px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); >#scroll-top button span < display: inline-block; transition: opacity 0.3s ease 0s, transform 0.5s ease 0s; line-height: 48px; font-size: 20px; width: 100%; >#scroll-top button span::before < width: 100%; position: absolute; left: 0px; top: 200%; opacity: 0; content: attr(data-hover); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); color: #fff; font-size: 16px; text-transform: uppercase; >#scroll-top:hover button < width: 120px; background: #9b59b6; >#scroll-top:hover button span < -webkit-transform: translateY(-200%); -moz-transform: translateY(-200%); transform: translateY(-200%); >#scroll-top:hover button span:before < opacity: 1; >#scroll-top button:active
```
```
jQuery(document).ready(function($) < $("#scroll-top >button").on("click", function(e) < var body = $("html, body"); body.stop().animate(< scrollTop: 0 >, 500, "swing"); >); >);
```
  В итоге должно получиться что-то похожее на это 😉
  
  Надеюсь, эта статья была для вас полезна. Буду рад ответить на ваши вопросы в комментариях.
  
  Как задать действие для кнопки в html
  
  Тег (от англ. button — кнопка) создаёт на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью (с атрибутом type=»button | reset | submit» ).
  
  В отличие от этого элемента, предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путём изменения шрифта, цвета фона, размеров и других параметров.
  
  Демо¶
  
  Синтаксис¶
  
  button>. button>
  
  Закрывающий тег обязателен.
  
  Атрибуты¶
  
  Устанавливает, что кнопка получает фокус после загрузки страницы.
  
  Блокирует доступ и изменение элемента.
  
  Связывает между собой форму и кнопку.
  
  Задаёт адрес, на который пересылаются данные формы при нажатии на кнопку.
  
  Способ кодирования данных формы.
  
  Указывает метод пересылки данных формы.
  
  Отменяет проверку формы на корректность.
  
  Открывает результат отправки формы в новом окне или фрейме.
  
  Определяет уникальное имя кнопки.
  
  Устанавливает тип кнопки: обычная; для отправки данных формы на сервер; для очистки формы.
  
  Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.
  
  Также для этого тега доступны универсальные атрибуты.
  
  autofocus¶
  
  Атрибут autofocus устанавливает, что кнопка получает фокус после загрузки страницы. Такую кнопку можно нажать сразу без перевода на неё фокуса, например, с помощью клавиатуры.
  
  Синтаксис
  
  button autofocus>. button>
  
  Значения
  
  Значение по умолчанию
  
  По умолчанию это значение выключено.
  
  disabled¶
  
  Блокирует доступ к кнопке и её изменение. Она в таком случае отображается серым цветом и недоступна для активации пользователем. Кроме того, такая кнопка не может получить фокус путём нажатия на клавишу Tab , мышью или другим способом. Тем не менее, такое состояние кнопки можно изменять через скрипты. Значение блокированной кнопки не передаётся на сервер.
  
  Синтаксис
  
  button disabled>. button>
  
  Значения
  
  Значение по умолчанию
  
  По умолчанию это значение выключено.
  
  form¶
  
  Связывает кнопку с формой по её идентификатору. Такая связь необходима в случае, когда кнопка не располагается внутри элемента , например, при создании её программно.
  
  Синтаксис
  
  button form="">. button>
  
  Значения
  
  Идентификатор формы (значение атрибута id элемента ).
  
  Значение по умолчанию
  
  formaction¶
  
  Определяет адрес обработчика формы — это программа, которая получает данные формы и производит с ними желаемые действия. Атрибут formaction по своему действию аналогичен атрибуту action элемента . Если одновременно указать action и formaction , то при нажатии на кнопку атрибут action игнорируется и данные пересылаются по адресу, указанному в formaction .
  
  Синтаксис
  
  button formaction="">. button>
  
  Значения
  
  formenctype¶
  
  Устанавливает способ кодирования данных формы при их отправке на сервер. Обычно явно указывается в случае, когда используется поле для отправки файла ( input type=»file» ). Этот атрибут по своему действию аналогичен атрибуту enctype элемента .
  
  Синтаксис
  
  1 2 3 4 5
  
  button formenctype="application/x-www-form-urlencoded | multipart/form-data | text/plain" > . button>
  
  Значения
  
  Вместо пробелов ставится + , символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%9F%D0%B5%D1%82%D1%8F вместо Петя).
  
  Данные не кодируются. Это значение применяется при отправке файлов.
  
  Пробелы заменяются знаком + , буквы и другие символы не кодируются.
  
  Значение по умолчанию
  
  application/x-www-form-urlencoded
  
  formmethod¶
  
  Атрибут сообщает браузеру, каким методом следует передавать данные формы на сервер.
  
  Синтаксис
  
  button formmethod="get | post">. button>
  
  Значения
  
  Различают два метода — GET и POST.
  
  Этот метод предназначен для передачи данных формы непосредственно в адресной строке в виде пар « имя=значение », которые добавляются к адресу страницы после вопросительного знака и разделяются между собой амперсандом (символ & ). Полный адрес к примеру будет http://site.ru/doc/?name=Vasya&password=pup . Объём данных в методе ограничен 4 Кб.
  
  Посылает на сервер данные в запросе браузера, объём пересылаемых данных ограничен лишь настройками сервера.
  
  formnovalidate¶
  
  Отменяет встроенную проверку данных введённых пользователем в форме на корректность при нажатии на кнопку. Такая проверка делается браузером автоматически при отправке формы на сервер для полей , , а также при наличии атрибута pattern или required у элемента .
  
  Синтаксис
  
  button formnovalidate>. button>
  
  Значения
  
  Значение по умолчанию
  
  По умолчанию этот атрибут выключен.
  
  formtarget¶
  
  Определяет имя фрейма, в которое будет загружаться результат, возвращаемый обработчиком формы, в виде HTML-документа.
  
  Синтаксис
  
  1 2 3 4 5
  
  button formtarget=" | _blank | _self | _parent | _top" > . button>
  
  Значения
  
  Загружает страницу в новую вкладку браузера.
  
  Загружает страницу в текущую вкладку.
  
  Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self .
  
  Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как _self .
  
  name¶
  
  Определяет уникальное имя кнопки. Как правило, это имя используется при отправке значения кнопки на сервер или для доступа к кнопке через скрипты.
  
  Синтаксис
  
  button name="">. button>
  
  Значения
  
  В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу по имени соблюдайте ту же форму написания, что и в атрибуте name .
  
  Значение по умолчанию
  
  type¶
  
  Определяет тип кнопки, который устанавливает её поведение в форме. По внешнему виду кнопки разного типа никак не различаются, но у каждой такой кнопки свои функции.
  
  Синтаксис
  
  button type="button | reset | submit">. button>
  
  Значения
  
  Кнопка для очистки введённых данных формы и возвращения значений в первоначальное состояние.
  
  Кнопка для отправки данных формы на сервер.
  
  Открывает меню, созданное с помощью элемента .
  
  Значение по умолчанию
  
  value¶
  
  Определяет значение кнопки, которое будет отправлено на сервер. На сервер отправляется пара « имя=значение », где имя задаётся атрибутом name элемента , а значение — атрибутом value . Значение может как совпадать с текстом на кнопке, так быть и самостоятельным. Также атрибут value применяется для доступа к данным через скрипты.
  
  Синтаксис
  
  button value="">. button>
  
  Значения
  
  Любая текстовая строка.
  
  Значение по умолчанию
  
  Спецификации¶
  
  WHATWG HTML Living Standard
  
  HTML5
  
  HTML 4.01 Specification
  
  Описание и примеры¶
  
  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
  
  html> head> meta charset="utf-8" /> title>BUTTONtitle> head> body> p style="text-align: center"> button>Кнопка с текстомbutton> button> img src="image/umbrella.gif" alt="Зонтик" style="vertical-align: middle" /> Кнопка с рисунком button> p> body> html>
  
  Читать:
  Как оплатить яндекс плюс если платеж не прошел

Тег
	Да	Да	Да	Да	Да

Как задать действие для кнопки в html

Кратко

Пример

Как понять

Как пишется

Атрибуты

Подсказки

На практике

Дока Дог советует

Алёна Батицкая советует

На собеседовании

Тег HTML кнопка

Синтаксис

Стандартная HTML кнопка

Кнопка button стилизованная с помощью CSS

Кнопка — картинка с помощью тега button

HTML код кнопки — картинки

Кнопка в HTML коде страницы

HTML код примера

Кнопки button и input в чем отличие?

Поддержка браузерами

Атрибуты тега button

Как сделать кнопку в html css? Красивые кнопки для сайта с примерами

Для чего нужны кнопки на сайте?

Какие бывают кнопки?

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

Как сделать красивую кнопку в HTML и CSS?

Красивая анимированная кнопка наверх для сайта

Как задать действие для кнопки в html

Демо¶

Синтаксис¶

Атрибуты¶

autofocus¶

disabled¶

form¶

formaction¶

formenctype¶

formmethod¶

formnovalidate¶

formtarget¶

name¶

type¶

value¶

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

Описание и примеры¶

Похожие записи