Как в html сделать кнопку: Атрибут formaction | htmlbook.ru

Содержание

— HTML | MDN

Элемент <input> с типом button отображаются как простые кнопки, которые можно запрограммировать для управления пользовательскими функциями в любом месте веб-страницы, например, назначить функцию обработки события (обычно для события click (en-US)).

The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Примечание: Хотя элементы <input> с типом button по-прежнему являются абсолютно корректными в HTML, новый элемент <button> теперь является предпочтительным способом создания кнопок. Учитывая, что текст элемента <button> вставлен между открывающим и закрывающим тегами, вы можете включить в тег HTML, даже изображения.

Значение DOMString используется в качестве метки кнопки
Событие click (en-US)
Поддерживаемые общие атрибуты type и value
Атрибуты IDL value
Методы None

Атрибут значения элементов <input type="button"> elements’ value содержит строку DOMString , которая используется в качестве метки кнопки.

<input type="button" value="Нажми на меня">

Если вы не укажете value, вы получите пустую кнопку:

Элементы <input type="button"> не имеют поведения по умолчанию (их двоюродные братья, <input type="submit"> и <input type="reset">

используются для отправки и сброса форм соответственно). Чтобы кнопки делали что-либо, вы должны написать код JavaScript для выполнения работы.

Простая кнопка

Мы начнём с создания простой кнопки с обработчиком события click (en-US) , который запускает наш компьютер (ну, он переключает value кнопки и текстовое содержимое следующего абзаца):

<form>
  <input type="button" value="Запустить ПК">
</form>
<p>ПК выключен.</p>
const button = document.querySelector('input');
const paragraph = document.querySelector('p');

button.addEventListener('click', updateButton);

function updateButton() {
  if (button.value === 'Запустить ПК') {
    button.value = 'Выключить ПК';
    paragraph.textContent = 'ПК запущен!';
  } else {
    button.value = 'Запустить ПК';
    paragraph.textContent = 'ПК выключен.';
  }
}

Сценарий получает ссылку на объект HTMLInputElement, представляющий <input> в DOM, сохраняя этот параметр в переменной button. Затем addEventListener() используется для установки функции, которая будет запускаться, когда на кнопке происходят события click (en-US).

Добавление сочетаний клавиш на кнопки

Keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard. To add a keyboard shortcut to a button — just as you would with any <input> for which it makes sense — you use the accesskey global attribute.

In this example, s is specified as the access key (you’ll need to press s plus the particular modifier keys for your browser/OS combination; see accesskey for a useful list of those).

<form>
  <input type="button" value="Start machine" accesskey="s">
</form>
<p>The machine is stopped.</p>

Note: The problem with the above example of course is that the user will not know what the access key is! In a real site, you’d have to provide this information in a way that doesn’t intefere with the site design (for example by providing an easily accessible link that points to information on what the site accesskeys are).

Disabling and enabling a button

To disable a button, simply specify the disabled global attribute on it, like so:

<input type="button" value="Disable me" disabled>

You can enable and disable buttons at run time by simply setting disabled to true or false. In this example our button starts off enabled, but if you press it, it is disabled using button.disabled = true. A setTimeout()

function is then used to reset the button back to its enabled state after two seconds.

If the disabled attribute isn’t specified, the button inherits its disabled state from its parent element. This makes it possible to enable and disable groups of elements all at once by enclosing them in a container such as a <fieldset> element, and then setting disabled on the container.

The example below shows this in action. This is very similar to the previous example, except that the disabled attribute is set on the <fieldset> when the first button is pressed — this causes all three buttons to be disabled until the two second timeout has passed.

Buttons don’t participate in constraint validation; they have no real value to be constrained.

The below example shows a very simple drawing app created using a <canvas> element and some simple CSS and JavaScript (we’ll hide the CSS for brevity). The top two controls allow you to choose the color and size of the drawing pen. The button, when clicked, invokes a function that clears the canvas.

<div>
  <input type="color" aria-label="select pen color">
  <input type="range" min="2" max="50" value="30" aria-label="select pen size"><span>30</span>
  <input type="button" value="Clear canvas">
</div>

<canvas>
  <p>Add suitable fallback here. </p>
</canvas>
var canvas = document.querySelector('.myCanvas');
var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight-85;
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgb(0,0,0)';
ctx.fillRect(0,0,width,height);

var colorPicker = document.querySelector('input[type="color"]');
var sizePicker = document.querySelector('input[type="range"]');
var output = document.querySelector('.output');
var clearBtn = document.querySelector('input[type="button"]');


function degToRad(degrees) {
  return degrees * Math.PI / 180;
};



sizePicker.oninput = function() {
  output.textContent = sizePicker.value;
}


var curX;
var curY;
var pressed = false;


document.onmousemove = function(e) {
  curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
  curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}

canvas.onmousedown = function() {
  pressed = true;
};

canvas.onmouseup = function() {
  pressed = false;
}

clearBtn.onclick = function() {
  ctx.fillStyle = 'rgb(0,0,0)';
  ctx.fillRect(0,0,width,height);
}

function draw() {
  if(pressed) {
    ctx.fillStyle = colorPicker.value;
    ctx.beginPath();
    ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false);
    ctx.fill();
  }

  requestAnimationFrame(draw);
}

draw();

BCD tables only load in the browser

Кнопки. HTML, XHTML и CSS на 100%

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

Кнопки

Кнопки При создании формы без кнопок не обойтись: с их помощью можно отправить, очистить или отредактировать форму. В общем, кнопки необходимы. Мы можем создавать разные кнопки, в зависимости от того, что нужно сделать с формой. Чтобы создать обычную кнопку, присваиваем

Навигационные кнопки

Навигационные кнопки Над адресной строкой проживает кнопочная панель, на которой представлены все наиболее популярные инструменты для перемещения по страничкам.Эта панель, наряду с адресной строкой – наш главный «пульт управления». Все кнопки здесь полезны, все –

Кнопки и индикаторы QIP

Кнопки и индикаторы QIP Ну а теперь займемся изучением главного окна программы. Большую его часть занимает контакт-лист, в котором чуть позже появятся имена ваших друзей и знакомых… Но об этом мы поговорим чуть позже.Нижнюю часть этого «небоскреба» оккупировали уже

Меню Кнопки «Office»

Меню Кнопки «Office» В самом начале урока я уже обращала ваше внимание на то, что в верхнем левом углу окна Word есть большая кнопка с логотипом Microsoft Office. Давайте нажмем ее и посмотрим, что за меню она скрывает (рис. 1.123). Рис. 1.123. Меню Кнопки

1.4. Кнопки редактора SCHEMATICS

1.4. Кнопки редактора SCHEMATICS Рис. 1.20. Элементы управления редактора SCHEMATICSВ этом разделе рассказывается о том, какие кнопки есть в редакторе SCHEMATICS. Для каждой кнопки указывается соответствующая ей команда меню (рис. 1.20). В табл. 1.1 приводится русский перевод этих команд. В

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

Кнопки запуска программ Какое приятное волнение испытываешь, щелкая на маленькой оригинальной кнопке на экране и получая при этом немедленный ответ своего компьютера! Несомненно, существуют и более приятные волнения, но и нажатие кнопки имеет свою прелесть. А если

12.2.3. Кнопки

12.2.3. Кнопки Для создания кнопки в Ruby/GTK2 предназначен класс Gtk::Button. В простейшем случае мы задаем обработчик события clicked, которое возникает, когда пользователь щелкает по кнопке.Программа в листинге 12.5 позволяет ввести одну строку в текстовое поле и после нажатия кнопки All

Кнопки навигации

Кнопки навигации У карманных компьютеров есть кнопки навигации, позволяющие управлять объектами на экране. Это кнопки со стрелками и кнопка ввода.Чтобы узнать, на какую кнопку нажал пользователь, нужно переопределить событие OnKeyDown. Для создания тестового приложения

Кнопки

Кнопки done: запомнить новые установки.reload file: перезагрузить текущий файл с новыми установками.cancel: отменить новые установки.default: назначить установки по

Кнопки и опции

Кнопки и опции browse: выбрать картинку.alignment: выбор расположения картинки по отношению к окружающему тексту.border: толщина (в пикселах) темной рамки вокруг картинки.hspace/vspace: горизонтальный/вертикальный сдвиг картинки (в пикселях).width/height:– левое серое окно показывает

КНОПКИ: Веселые фракталы

КНОПКИ: Веселые фракталы Если начать словами, что фрактальные изображения обладают психоэмоциональным воздействием, ибо несут в себе субъективную эстетическую составляющую… то есть риск навечно получить клеймо непроходимого зануды. Потому что заумные казенные фразы

Использование кнопки Автосумма

Использование кнопки Автосумма Для быстрого суммирования диапазона ячеек служит кнопка Автосумма, которая автоматически создает нужную формулу. Последовательность действий для суммирования нескольких чисел будет следующей.1. Сделайте активной ячейку, в которую

Полезные кнопки

Полезные кнопки Если вы оплачиваете Интернет по карте, есть несколько способов сэкономить.Например, отключившись от Интернета, вы можете вновь посетить пройденные страницы. Дело в том, что страницы, которые вы просматривали, браузер скачал на компьютер и составные части

Формы HTML (Часть 2). В данном разделе рассмотрим формы. | by Влад Скуришин

Формы используются для сбора и заполнения информации на сайте.

Например: оставить заявку с номером телефона и email’ом.

Или еще один всем известный пример: каждый раз, когда мы заходим в Google или Yandex, мы видим на странице поисковика форму.

При вводе запроса в данную форму и нажатии на кнопку (или Enter), выполняется HTTP-запрос на сторону сервера Goggle или Yandex. Данный сервер обрабатывает полученные данные и выдает соответствующие ссылки на странице (см. рисунок выше).

Каким образом нам создать форму?

Для этого существует тег form.

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

Атрибут action указывает url, по которому будет выполняться обработка запроса. method указывает способ передачи данных.

  • GET — обычно используется для получения данных и передает параметры с помощью параметров в uri.
  • POST — используется для отправки данных и сохранения в базу данных (особенно приватной информации). Передаваемые параметры не видны в uri

Советуем вам больше узнать о методах по данной ссылке: клик.

Чтобы добавить в форму текстовое поля, мы можем воспользоваться тегом input.

Результат:

Атрибут type используется для указания типа вводимых данных. В нашем примере — это текст (text) и число (number).

Кроме text и number существуют следующие типы:

  • password — используется для ввода пароля,
  • url — для ввода url,
  • email — для ввода email,
  • file — для отправки файла,
  • checkbox — для добавления флажка,
  • radio — для добавления переключателя.

Список остальных типов вы можете найти тут.

Атрибут name указывает имя параметра, который будет передавать обработчику на backend при нажатии на кнопку «Отправить».

placeholder — задает текст, отображаемый до заполнения. Обычно оно используется для подсказки.

Ну и value, с помощью которого мы можем задать начальное значение введенное в поле. В нашем примере мы установили значение Человек.

Больше информации о атрибутах вы можете найти вотут.

В примере у нас есть текстовое поле race. Но нигде не указано подсказки, что это за поле. Пользователь просто не поймет, что все это значит.

Для добавления надписи мы можем воспользоваться тегом label. Дополнительно сгруппируем их с помощью тега fieldset и добавим группе название legend.

Результат:

Основная информация Введите свою расу

Атрибут for указывает к какому input привязана данная надпись по id.

Если мы хотим добавить раскрывающийся список, то можно воспользоваться тегом select. Внутри данного тега определяются варианты выбора с помощью тега option.

Атрибут value в данном случае — это значение, которое будет доставлено на сервер при отправке. Если value не задан, то берется текст внутри option.

Результат:

Выберите свой город: Москва Санкт-Петербург Калининград Омск Казань

Мы создали свою форму, но как отправить данные к обработчику?

Нам необходима кнопка!

Тег button используется для создания кнопки.

Не забудьте указать type="submit". submit указывает, что при нажатии на данную кнопку, произойдет отправка к обработчику.

Остальную часть тегов вы можете найти тут.

Как сделать кнопку заказа товара или оформления услуги?

На каждой странице с описанием вашего товара или услуги необходимо добавить кнопку перехода к оформлению заказа. Размещать кнопку желательно в непосредственной близости от главных характеристик продукта: цены или наименования. Возможно расположение нескольких кнопок CTA (click to action) при наличии между ними расстояния более чем в один экран текста.

Не установлена форма оформления заказа на сайте?

Установите за 10 минут на любой сайт готовый виджет. Бесплатно!

Оформление кнопки заказа

Внешний вид кнопки должен быть контрастным и выделять её из общего контекста информации о товаре или услуге. По результатам аналитических исследований компании «GetElastic» исходя из наиболее часто используемых вариантов оформления кнопки «КУПИТЬ» среди коммерческих сайтов были выявлены следующие тенденции:

Цвет кнопки:

  • Серый/Черный — 20%
  • Красный — 20%
  • Синий — 16%
  • Зеленый — 15%
  • Оранжевый — 11%

Форма кнопки:

  • Закругленные углы — 63%
  • Прямые углы — 36%

Стиль надписи:

  • ВСЕ ЗАГЛАВНЫЕ — 53%
  • Разные Буквы — 39%
  • только маленькие — 8%

Наличие картинки:

  • Без картинки 52%
  • С иконкой — 48% (из них):
  • — Иконка «Тележка» — 40%
  • — Иконка «Стрелка» — 28%
  • — Иконка «Плюсик» — 15%

Пример самого популярного варианта:

CSS стили для кнопки заказа товара

После установки корзины в стилях уже содержится готовый набор CSS правил. Кнопка, содержащая класс btn-ens-style будет оформлена в соответствии с наиболее распространенным вариантом. Если же его необходимо изменить — это можно сделать следующими способами:

  • Добавить готовый класс, который уже определен в CSS файлах вашего сайта вместо класса btn-ens-style
  • Использовать любой существующий на сайте элемент, превратив его в кнопку заказа добавлением класса btn-ens-action и параметр data-rel="...".
  • Воспользуйтесь онлайн конструктором для создания CSS правил. Сразу после кода подключения корзины добавьте код:

Размер текста px

Радиус рамки = px

Отступы по горизонтали = px

Отступы по вертикали = px

Толщина рамки = px

Цвет кнопки
при наведении

Цвет рамки
при наведении

Цвет текста
при наведении

Замена кнопки submit в форме html

Цель:
Сегодня наша задача замена стандартной кнопки «отправить» на красивую. Кнопка выполняет отправку формы и имеет тип «submit». Можно конечно изменить тип с «submit» на «image» и добавить параметр «src», но наша задача на сегодня это оставить тип «submit» на месте и программно нарисовать красивую кнопку.
 
Применение:
Для чего это может понадобиться? Всё просто, для придания эстетичного вида той самой кнопке.
Вот для сравнения.  Наглядно видно, что вторая кнопка смотрится лучше.
 
Решение:
Для выполнения данной цели как и говорилось мы будем применять «input» с типом «submit». Ещё нам понадобится описать новый класс в таблице стилей «*.css»
Вот код для html-файла:

<input type=»submit» name=»submit» value=»Оплатить» />

А вот и css:

. superbutton {
width:150px;
height:40px;
border-radius:20px;
background:#459DE5;
color:#fff;
font-size:18px;
cursor:pointer;
}

 
 
Украшаем:
Для украшения можно предложить изменять цвет фона кнопки при наведении. Как правило дизайнеры советуют менять цвет не кардинально, а всего лишь на тон светлее или темнее. Я при выполнении задачи предпочел затемнить кнопку. Для этого в css добавляем:

.superbutton:hover{
background:#358DE5;
}

 Теперь кнопка ожила. На статичной картинке разность цветов не так заметна когда ты наводишь мышь и цвет в туже секунду меняется накладывая более темный оттенок.
 
Проблема рамки вокруг кнопки:
И всё вроде ничего и выглядит ничего и при наведении темнеет, но при нажатии мы видим ужасную рамку. Ещё эту рамку можно наблюдать если наша кнопка находится в фокусе, в том который по кнопке Tab перебирает элементы на странице.
Для этого мы пропишем в css ещё 2 псевдо класса, как и «hover». Это классы «active» который отвечает за вид при нажатии на кнопку и класс «focus» при фокусе на кнопке. Но есть одна особенность, так как у нас input и присвоенный ему класс, то active прописывать не обязательно.
Вот код:

. superbutton:focus{
outline:none;
}

Please enable JavaScript to view the comments powered by Disqus.

Онлайн генератор кнопок для сайта

Roman 16 марта 2021, 17:27

Здравствуйте! Что нужно добавить в код кнопки чтобы выровнять ее по центру блока «страницы»? Или как это сделать? Заранее спасибо!

Сергей 11 февраля 2021, 15:04

Простой и понятный генератор. Очень удобно делать кнопки. Спасибо! А можно ли как-то по мимо ссылки, добавить функцию копки «копировать в буфер обмена» ? Облазил весь интернет, но ни в одном генераторе такой возможности не нашел.

Александр 02 февраля 2021, 23:39

Добрый день.
Интересный генератор кнопки.
А такой вопрос — можно ли как-то средствами CSS сделать тень у кнопки? И, скажем, чтобы при наведении мыши она как-то менялась немножко ещё?

Daruse

Да, спасибо за идею, будет время — добавлю

Евгений 04 июня 2020, 13:46

Здравствуйте!
У Вас очень хороший конструктор!
Но есть один маленький вопрос: я выбираю исходный и конечный цвет текста кнопки абсолютно белый (#ffffff), и при просмотре результата он соответствует задуманному.
Но после установки кода на сайт обнаруживается, что начальный цвет голубой и с подчеркиванием (в итоге нет контраста, и надпись какая-то блёклая), при этом после наведения всё соответствует задуманному.
В чём проблема? Как от неё избавиться?

Daruse

Добрый день! Скинь мне ссылку, где вы добавили кнопку, на мою почту (в подвале есть контакты).
Подчеркивание — да, мой косяк, исправил.

CSS: создание кнопки | СХОСТ блог

О том, как создать кнопку в HTML, мы уже рассказывали. Теперь же рассмотрим, как это сделать при помощи таблицы стилей.

Для создания простой кнопки используйте тег <input>:

<input type=»button» value=»Кнопка»>

Теперь добавьте таблицу стилей:

. button {

height:60px;

border-color:#000080 #6A5ACD #8470FF #0000FF;

border-style:solid;

border-width:5px;

background:#4682B4;

cursor:pointer;

}

Кнопка в браузере:

Рассмотрим таблицу стилей, в которой прописаны эффекты наведения на кнопку, где :hover отвечает за отображение кнопки при наведении, :active 一 при нажатии, а :focus 一 после нажатия:

.button:hover {

border-color:#7CFC00 #7CFC00 #7CFC00 #7CFC00;

border-style:solid;

border-width:5px;

background:#FFFF99;

}

.button:focus {

background:#ddd;

border-color:#ddd #333 #333 #ddd;

border-style:solid;

border-width:5px;

}

.button:active {

background:#228B22;

border-color:#ddd #333 #333 #ddd;

border-style:solid;

border-width:5px;

}

Кнопка в браузере:

Тип кнопки HTML Атрибут

❮ HTML тег

Попробуй сам »

Определение и использование

Атрибут type определяет тип кнопки.

Совет: Всегда указывайте атрибут типа для


Попробуй сам »

Определение и использование

Атрибут formtarget указывает, где отображать ответ после отправки формы. Этот атрибут переопределяет атрибут target формы.

Атрибут formtarget используется только для кнопок с type = "submit" .


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

Числа в таблице указывают первую версию браузера, полностью поддерживающую атрибут.

Атрибут
форма цели 9.0 10,0 4,0 5,1 10,6

Синтаксис

Попробуйте сами »

Также можно добавить встроенное событие onclick в тег внутри элемента .

Пример добавления события onclick в тег

: ¶
  

  
     Название документа 
  
  
    <форма>
      
    
  
  
Попробуйте сами »Ссылки не будут работать, если отключен JavaScript, и поисковые системы могут игнорировать такие ссылки.

Используйте атрибут action или formaction.¶

Другой способ создания кнопки, которая действует как ссылка, — это использование атрибута action или formaction внутри элемента

.

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

  

   
       Название документа 
   
   
      
         
      
   
  
Попробуйте сами »

Чтобы открыть ссылку в новой вкладке, добавьте target =" _ blank ".

Пример открытия ссылки с кнопки в новом окне: ¶

  

   
       Название документа 
   
   
      
Попробуйте сами »

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

Пример создания кнопки, действующей как ссылка с атрибутом formaction: ¶

  

   
       Название документа 
   
   
      <форма>
         
      
   
  
Попробуйте сами »Атрибут formaction используется только с кнопками, имеющими type =" submit ". Поскольку этот атрибут специфичен для HTML5, его поддержка в старых браузерах может быть плохой.

Стиль ссылки как кнопки¶

Добавить ссылку в стиле кнопки со свойствами CSS. Атрибут href является обязательным атрибутом тега . Он определяет ссылку на веб-странице или место на той же странице, по которому пользователь переходит после нажатия на ссылку.

Пример стилизации ссылки как кнопки с помощью CSS: ¶

  

  
     Название документа 
    <стиль>
      .кнопка {
        цвет фона: # 1c87c9;
        граница: нет;
        цвет белый;
        отступ: 20 пикселей 34 пикселей;
        выравнивание текста: центр;
        текстовое оформление: нет;
        дисплей: встроенный блок;
        размер шрифта: 20 пикселей;
        маржа: 4px 2px;
        курсор: указатель;
      }
    
  
  
    Нажмите здесь 
  
  
Попробуйте сами »

Поскольку требуется сложное оформление, это может не работать в некоторых браузерах.

Рассмотрим еще один пример.

Пример оформления ссылки как кнопки: ¶

  

  
     Название документа 
    <стиль>
      . кнопка {
        дисплей: встроенный блок;
        отступ: 10 пикселей 20 пикселей;
        выравнивание текста: центр;
        текстовое оформление: нет;
        цвет: #ffffff;
        цвет фона: # 7aa8b7;
        радиус границы: 6 пикселей;
        наброски: нет;
      }
    
  
  
     Тег кнопки HTML 
  
  
Попробуйте сами »

Спасибо за ваш отзыв!

Считаете ли вы это полезным? Да Нет


Статьи по теме

: Элемент Button — HTML: язык разметки гипертекста

Элемент HTML