Кнопка ссылка

Кнопка HTML

Кнопку в HTML можно сделать тремя различными способами:

• С помощью тега input;
• С помощью тега button;
• С помощью ссылки (тег a) и CSS-свойств.

Тег input

Тег input может использоваться для создания различных элементов ввода на странице (текстовое поле ввода, кнопка и других) и принимать значения следующих атрибутов:

• type — указывает на тип элемента (в нашем случае это button);
• name — позволяет задать имя элемента (это необходимо, например, для идентефикации кнопки обработчиком формы);
• value — задает значение для элемента (например, для передачи данных формы) и это значение выполняет роль надписи на кнопке.

Таким образом, записанная с помощью тега input кнопка будет выглядеть так:

Тег button

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

  Конструктор сайтов "Нубекс" 

Конструктор сайтов «Нубекс»

Атрибуты тега button такие же, как и у input, отличие лишь в том, что значение value теперь не является надписью на кнопке, а служит только для передачи значения на сервер.

Кнопка-ссылка

Третий вариант создания кнопки на странице — использование тега a, т. е. обычной ссылки. Вид кнопки ссылка приобретает при применении к ней нужных CSS-стилей. Рассмотрим вариант создания кнопки с помощью ссылки:

       Кнопка-ссылка  

Данный способ предоставляет большое преимущество и свободу в оформлении кнопки.

В конструкторе сайтов «Нубекс» кнопки-ссылки можно вставлять через визуальный редактор. О добавлении кнопок вы можете узнать больше в статье: Просто добавьте кнопку!

Смотрите также:

Источник

Кнопка добавления формы html

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

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

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

Использование кнопок

Элементы не имеют поведения по умолчанию (их двоюродные братья, (en-US) и (en-US) используются для отправки и сброса форм соответственно). Чтобы кнопки делали что-либо, вы должны написать код 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 , представляющий в DOM, сохраняя этот параметр в переменной button . Затем addEventListener() используется для установки функции, которая будет запускаться, когда на кнопке происходят события click (en-US) .

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

Сочетания клавиш, также известные как клавиши доступа и их эквиваленты на клавиатуре, позволяют пользователю активировать кнопку с помощью клавиши или комбинации клавиш на клавиатуре. Чтобы добавить сочетание клавиш к кнопке — точно так же, как вы сделали бы с любым , для которого это имеет смысл, — вы используете глобальный атрибут accesskey .

В этом примере, s это специфичная клавиша доступа (ты должен нажать s плюс конкретные клавиши-модификаторы для вашей комбинации браузера и операционной системы; вы можете увидеть полный список на странице accesskey).

form> input type="button" value="Включить ПК" accesskey="s"> 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 = 'ПК выключен.'; > > 

Примечание: Проблема с приведенным выше примером, конечно, заключается в том, что пользователь не будет знать, что такое ключ доступа! На реальном сайте вам пришлось бы предоставлять эту информацию таким образом, чтобы это не противоречило дизайну сайта (например, путем предоставления легкодоступной ссылки, которая указывает на информацию о том, что такое ключи доступа к сайту).

Выключенные / Включённые кнопки

Чтобы выключить кнопку необходимо просто добавить на неё глобальный атрибут disabled , вот так:

input type="button" value="Я выключена" disabled> 

Вы можете включать и отключать кнопки во время выполнения, просто установив disabled вместо true или false . В этом примере наша кнопка изначально включена, но если вы нажмете ее, она будет отключена с помощью button.disabled = true . А setTimeout() затем функция используется для возврата кнопки обратно в ее включённое состояние через две секунды.

input type="button" value="Enabled"> 

const button = document.querySelector('input'); button.addEventListener('click', disableButton); function disableButton()  button.disabled = true; button.value = 'Выключена'; window.setTimeout(function()  button.disabled = false; button.value = 'Включена'; >, 2000); > 

Если атрибут disabled не указан, то кнопка наследует своё disabled состояние из своего родительского элемента. Это позволяет включать и отключать группы элементов одновременно, заключая их в контейнер, такой как элемет, и затем установить disabled на контейнер.

Приведенный ниже пример показывает это в действии. Это очень похоже на предыдущий пример, за исключением того, что атрибут disabled устанавливается в при нажатии первой кнопки — это приводит к отключению всех трех кнопок до истечения двухсекундного тайм-аута.

fieldset> legend>Button grouplegend> input type="button" value="Button 1"> input type="button" value="Button 2"> input type="button" value="Button 3"> fieldset> 

const button = document.querySelector('input'); const fieldset = document.querySelector('fieldset'); button.addEventListener('click', disableButton); function disableButton()  fieldset.disabled = true; window.setTimeout(function()  fieldset.disabled = false; >, 2000); > 

Примечание: Firefox, в отличие от других браузеров, по умолчанию сохраняет динамическое отключенние состояния из одного при загрузке разных страниц. Используйте атрибут autocomplete для управления этой функцией.

Валидация

Кнопки не участвуют в проверке валидации; они не имеют реальной ценности для валидации.

Примеры

div class="toolbar"> input type="color" aria-label="select pen color"> input type="range" min="2" max="50" value="30" aria-label="select pen size">span class="output">30span> input type="button" value="Clear canvas"> div> canvas class="myCanvas"> p>Добавьте подходящий фолбэк здесь.p> canvas> 

body  background: #ccc; margin: 0; overflow: hidden; > .toolbar  background: #ccc; width: 150px; height: 75px; padding: 5px; > input[type="color"], input[type="button"]  width: 90%; margin: 0 auto; display: block; > input[type="range"]  width: 70%; > span  position: relative; bottom: 5px; > 

let canvas = document.querySelector('.myCanvas'); let width = canvas.width = window.innerWidth; let height = canvas.height = window.innerHeight-85; let ctx = canvas.getContext('2d'); ctx.fillStyle = 'rgb(0,0,0)'; ctx.fillRect(0,0,width,height); let colorPicker = document.querySelector('input[type="color"]'); let sizePicker = document.querySelector('input[type="range"]'); let output = document.querySelector('.output'); let clearBtn = document.querySelector('input[type="button"]'); // covert degrees to radians function degToRad(degrees)  return degrees * Math.PI / 180; >; // update sizepicker output value sizePicker.oninput = function()  output.textContent = sizePicker.value; > // store mouse pointer coordinates, and whether the button is pressed let curX; let curY; let pressed = false; // update mouse pointer coordinates 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(); 

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

Browser compatibility

BCD tables only load in the browser

Источник

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

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

Чтобы задать кнопке имя, тип или состояние, нужно добавить атрибуты: name , disabled и type .

Атрибут name задаёт имя кнопки. Может использоваться для идентификации элемента в скриптах.

Атрибут disabled блокирует доступ к кнопке.

Атрибут type определяет тип кнопки. Ему задают одно из трёх значений:

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

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

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

А как же input?

Создать кнопку можно и с помощью тега , если указать ему тип button :

Это рабочий способ. О нём надо знать, ведь вы можете встретить его в проектах. Но самим так делать не стоит. У кнопок, созданных на инпуте, есть ограничения: сложно управлять размерами и положением изображений, а также нет псевдоэлементов. Поэтому оставьте для создания элементов формы, таких как текстовые поля, радиокнопки или чекбоксы. А кнопки верстайте с помощью .

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

Посмотрим три способа создания кнопки с иконкой.

С помощью тега

Способ подойдёт для контентных изображений.

Так вы можете добавлять кнопки с эмодзи, лайками, дизлайками или чем-то ещё. Иконке нужно обязательно задавать размеры, чтобы кнопка зарезервировала место и не прыгала, когда загрузится иконка.

Добавить инлайн SVG в разметку

Способ подойдёт, если изображение меняет состояния, как здесь:

Код простой: пишем тег и добавляем в него код SVG-изображения.

Вставить фоном в CSS

Способ подойдёт, если иконка играет декоративную роль и не меняется при наведении или клике на кнопку. Например, в таких случаях:

Как добавить иконку в кнопку:

Какой способ выбрать — зависит от ваших задач и особенностей проекта. Вы также можете использовать разные методы в рамках одного проекта. Например, часть кнопок сделать со встроенным в разметку SVG, а часть — с фоновым изображением.

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник