Как задать действие для кнопки в html
Перейти к содержимому

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

  • автор:

Кнопки

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

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

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

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

Табл. 1. Атрибуты кнопок

Атрибут Описание
name Имя кнопки; предназначено для того, чтобы обработчик формы мог его идентифицировать.
value Значение кнопки и одновременно надпись на ней.

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

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

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

Вид кнопки

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

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

Кнопки, созданные с помощью button

Рис. 2. Кнопки, созданные с помощью

Синтаксис создания такой кнопки следующий.

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

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

Кнопка

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

Кнопка Submit

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

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

 

Атрибуты те же, что и у рядовых кнопок (пример 3).

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

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

Кнопка Reset

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

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

 

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

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

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

Цветные кнопки

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

Пример 5. Вид кнопок

Результат данного примера показан на рис. 3.

Изменение вида кнопок

Рис. 3. Изменение вида кнопок

См. также

  • Атрибуты
  • Выравнивание элементов форм
  • Загрузка файлов
  • Кнопки
  • Кнопки в Bootstrap 4
  • Кнопки в Bootstrap 5
  • Отправка данных формы
  • Переключатели
  • Переключатели
  • Поле для ввода пароля
  • Поле для пароля
  • Пользовательские формы
  • Построение форм
  • Скрытое поле
  • Создание кнопок
  • Стилизация переключателей
  • Стилизация флажков
  • Сумасшедшие формы
  • Текстовое поле
  • Текстовое поле
  • Флажки
  • Флажки
  • Формы в Bootstrap 4
  • Формы в HTML

Автор: Влад Мержевич
Последнее изменение: 15.02.2024

  • Текст
  • Фон
  • Ссылки
  • Списки
  • Изображения
  • Таблицы
  • Формы
    • Отправка данных формы
    • Текстовое поле
    • Поле для ввода пароля
    • Многострочное текстовое поле
    • Кнопки
    • Элемент label
    • Переключатели
    • Флажки
    • Поле со списком
    • Скрытое поле
    • Поле с изображением
    • Загрузка файлов
    • Адрес электронной почты
    • Веб-адрес
    • Выбор цвета
    • Ввод чисел
    • Ползунок
    • Календарь
    • Поле для поиска
    • Номер телефона
    • Группирование элементов форм
    • Блокирование элементов форм
    • Автофокус
    • Подсказывающий текст
    • Защита от дурака

    Как задать действие для кнопки в 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

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

     

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

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

     

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

     

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

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

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

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

    А как же input?

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

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

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

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

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

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

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

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

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

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

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

      

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

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

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

      
    .icon-button < background-image: url("../images/icon.svg"); background-size: 90px 97px; >

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

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

    • Что такое ссылки и как их ставить
    • Как сделать картинку ссылкой
    • Шаблон HTML-формы

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

    Читать дальше

    Что писать в атрибуте alt

    Что писать в атрибуте alt

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

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

    • 27 февраля 2024

    Что такое Lazy Loading и как её включить на сайте

    Что такое Lazy Loading и как её включить на сайте

    Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.

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

    • 22 ноября 2023

    Знакомство с HTML

    Знакомство с HTML

    Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.

    HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.

    • 1 ноября 2023

    Специальные символы в HTML

    Специальные символы в HTML

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

    • 23 октября 2023

    Зачем нужен метатег viewport

    Зачем нужен метатег viewport

    Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport .

    Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport , который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.

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

    • 18 сентября 2023

    Атрибут class в HTML на примерах

    Атрибут class в HTML на примерах

    Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.

    Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.

    • 14 сентября 2023

    В чём отличия цитат

    В чём отличия цитат

    В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.

    • 12 сентября 2023

    Растровая и векторная графика

    Растровая и векторная графика

    Давайте попробуем разобраться, в чём отличие растровой графики от векторной.

    • 13 июня 2023

    Как отличить h1, h2 и h3

    Как отличить h1, h2 и h3

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

    Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.

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

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

    • 8 июня 2023

    Как правильно вставлять SVG

    Как правильно вставлять SVG

    Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.

    SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.

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

    �PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~ 

    Формат SVG тоже можно создавать и менять в редакторах графики, например, в Illustrator или Figma. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.

    SVG — это как отдельная HTML-страница. Когда вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.

    Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен.

    • 1 июня 2023

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

    Тег создает на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью тега (с атрибутом type=»button | reset | submit» ). В отличие от этого тега, предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путем изменения шрифта, цвета фона, размеров и других параметров.

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

    Синтаксис

    Атрибуты

    accesskey Доступ к элементам формы с помощью горячих клавиш. autofocus Устанавливает, что кнопка получает фокус после загрузки страницы. disabled Блокирует доступ и изменение элемента. form Связывает между собой форму и кнопку. formaction Задаёт адрес, на который пересылаются данные формы при нажатии на кнопку. formenctype Способ кодирования данных формы. formmethod Указывает метод пересылки данных формы. formnovalidate Отменяет проверку формы на корректность. formtarget Открывает результат отправки формы в новом окне или фрейме. name Определяет уникальное имя кнопки. type Тип кнопки — обычная, для отправки данных формы на сервер или для очистки формы. value Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

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

    Закрывающий тег

    HTML5 IE Cr Op Sa Fx

        Тег BUTTON  

    Результат данного примера показан на рис. 1.

    Вид кнопок в браузере Safari

    Рис. 1. Вид кнопок в браузере Safari

    Браузеры

    Internet Explorer до версии 7.0 включительно не поддерживает атрибут value .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *