Как сделать чтобы при нажатии

Тег <button> HTML кнопка

Тег <button> в HTML используется для создания кликабельной кнопки.

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

HTML кнопка <button> не является ссылкой. Для создания ссылки в виде кнопки используйте тег <a> , стилизованный с помощью таблиц стилей CSS.

Контентом кнопки <button> может быть как текст, так и другие HTML теги, например, используя тег <img> внутри кнопки, можно сделать кнопку-картинку.

Кнопка <button> , как и тег <input> , может быть использована как кнопка отправки HTML форм. Для этого кнопка должна иметь тип submit, находиться внутри HTML кода формы <form> или быть привязанной к форме с помощью атрибута form .

Тег <button> HTML является элементом формы. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.

Синтаксис

Примеры использования кнопки <button>

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

HTML код стандартной кнопки <button>

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

HTML код стилизованной кнопки <button>

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

В примере показано как будет выглядеть изображение <img> , вставленное внутрь кнопки button без изменения стилей. Вы всегда можете изменить стили с помощью CSS.

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

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

В примере показано использование кнопки <button> в качестве кнопки отправки формы (тип submit).

HTML код примера

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

Как тег <button> , так и тег <input> позволяют создавать кликабельные кнопки типа button, submit и reset.

Разница между кнопкой, созданной с помощью тега <button> и кнопкой, созданной тегом input в механизме наполнения кнопки контентом. Внутри тега кнопки button вы можете размещать HTML теги, тем самым расширяется возможность по созданию визуальной составляющей кнопки. В случае с input , придется ограничиться использованием текста через атрибут value или использовать изображение в input с атрибутом type=»image» . Возможности использовать HTML теги внутри в кнопке input нет.

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

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

Тег
< button >	Да	Да	Да	Да	Да

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

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

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

Указывает на форму, к которой относится кнопка. Используется, если кнопка применяется для отправки или очистки формы и при этом находится вне HTML кода формы.

Если кнопка находится внутри тега <form>, то использовать атрибут form не нужно, кнопка по умолчанию привязана к форме, внутри которой находится.

URL адрес документа — обработчика формы. Используется для кнопок с типом submit. Если указан, форма будет отправлена по URL адресу, указанному в этом атрибуте, игнорируя атрибут action тега <form>.

Способ кодирования информации. Используется для кнопок с типом submit.

Указывает как именно нужно кодировать информацию при отправке на сервер, вызванной нажатием кнопки, содержащей этот атрибут.

• application/x-www-form-urlencoded — все символы кодируются перед отправкой в шестнадцатеричные значения (HEX) ASCII, пробелы заменяются на «+». Значение по умолчанию;
• multipart/form-data — символы не кодируются. Значение обязательно нужно использовать в форме с полем input type=»file» (при использовании файлов в форме);
• text/plain — символы не кодируются, пробелы заменяются символом «+».

Атрибут используется только в случае отправки формы методом POST.

Этот атрибут переопределяет значение, указанное в атрибуте enctype тега <form>.

HTTP метод передачи данных формы.

• GET — передача данных в URL с помощью пар имя-значение (name-value). Значение по умолчанию.
• POST — передача данных в теле HTTP запроса.

Используется только для кнопок с типом submit.

Этот атрибут переопределяет значение, указанное в атрибуте method тега <form>.

Логический атрибут. Браузер не будет выполнять проверку правильности заполнения формы перед отправкой, вызванной нажатием кнопки, содержащей этот атрибут. По умолчанию браузер проверяет наличие значения в обязательных полях (required), соответствие значений стандарту (например, для поля с типом email) и т.п.

Этот атрибут переопределяет значение, указанное в атрибуте novalidate тега <form>.

Используется для кнопок с типом submit.

Определяет где будет открыт результат обработки формы (ответ сервера), при отправке по нажатию кнопки с этим атрибутом:

• _blank — в новой вкладке или окне;
• _parent — в родительском окне;
• _self — в текущем окне (используется по умолчанию);
• _top — на весь экран.

Этот атрибут переопределяет значение, указанное в атрибуте target тега <form>.

Имя кнопки. Используется при передаче данных формы на сервер. Значение (value) кнопки будет передано в переменной, имеющей имя, указанное в этом атрибуте.

• button — простая кликабельная кнопка, действие по нажатию которой определяется скриптом;
• reset — кнопка очистки полей формы. Стирает информацию введенную пользователем в поля связанной с кнопкой формы;
• submit — кнопка отправки формы. Выполняет отправку связанной формы на сервер.

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

Значение кнопки, которое будет отправлено на сервер.

На сервер отправляется переменная, имеющая название, указанное в атрибуте name кнопки и значение, указанное в этом атрибуте.

К форме может быть привязано несколько кнопок отправки. На сервер отправляются данные только той кнопки, которая вызвала событие отправки формы.

Дмитрий, кнопка и ссылка в HTML — это разные вещи. Кнопка <button> не является ссылкой. Если вам нужно создать гиперссылку, используйте тег <a>. Вы можете придать тегу <a> любые стили, в том числе и вид кнопки, с помощью CSS.

В каком-то смысле из кнопки <button> с типом type="submit" можно сделать ссылку. Для этого нужно определить атрибут formaction у такой кнопки, вписав как значение целевой URL.

Что касается данных пользователя, введенных в форму, то они передаются на сервер в момент отправки формы. URL по которому сервер получает данные определяется атрибутом action тега <form>, к которому относится кнопка, либо атрибутом formaction самой кнопки. То есть, фактически, при отправке формы происходит переход по указанному URL с передачей серверу введенных пользователем данных.

Никакого сохранения данных или отправки на email HTML форма сама по себе не делает. В свою очередь, это может сделать сервер. Например, в случае с PHP сервером, данные попадут в массивы $_GET и/или $_POST, после чего их можно будет сохранить в базу данных либо отправить на email средствами PHP.

Появление и исчезновение картинки при клике по кнопке на Javascript

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

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

Алгоритм программы

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

Последовательность создания программы

1. Создать HTML документ и поместить на него 2 объекта: картинку и кнопку.
2. Создать функцию, которая будет скрывать картинку (или отображать её), если пользователь нажмёт на кнопку.
3. Создать событие для кнопки onClick, которое будет вызывать нашу функцию.

Алгоритм работы программы

1. Нажатие на кнопку.
2. Вызов функции.
3. Если картинка в браузере не отображается, то показать её.
4. Если картинка видна в браузере, то спрятать её.

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

Исчезновение картинки при клике по кнопке

Для начала, сделаем так, чтобы при нажатии на кнопку картинка исчезала.

В данном примере, при загрузке страницы в браузере, мы выводим на экран картинку Clipboard01. Для этой картинки мы указываем атрибуты id и style. С помощью document.getElementById мы получаем ссылку на элемент по его идентификатору (по ID) и меняем атрибут style на display:none. То есть делаем картинку невидимой (скрываем её отображение в браузере).

Отображение картинки при нажатии на кнопку

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

В данном примере, мы просто поменяли местами стиль отображения картинки. То есть, изначально при открытии HTML документа картинка у нас не видна (style=»display:none;»), а когда мы нажимаем на кнопку, то происходит замена display:none на display:block и картинка становится видимой.

Появление и исчезновение картинки при нажатии кнопки

Теперь, поняв как всё работает, мы можем объединить первый и второй вариант кода и написать условие, используя операторы If Then Else:

В этом примере, мы изначально делаем картинку невидимой, указав style=»display:none;».

При нажатии на кнопку, мы получаем ссылку на нашу картинку по ID.

Затем, с помощью getComputedStyle получаем объект, содержащий значения всех CSS-свойств элемента (в данном случае нашей картинки).

После этого происходит проверка, если у картинки свойство display равно none (то есть, если картинка не отображается), то мы меняем его на block и тем самым выводим картинку на экран.

Если же свойство display не равно none (то есть картинка видна), то мы меняем его на none и тем самым скрываем изображение.

Нажатие на кнопку в JavaScript (событие и функции)

Привет всем любителя программирования. Это довольно простой урок по такому событию в JavaScript, как нажатие на кнопку. не смотря на то, что это базовые вещи в JS, реализовать нажатие на кнопку можно разными способами. Давайте предположим, что у нас на странице есть некая кнопка.

Она пока никак не реагирует потому, что мы не повесили на нее никакого события. И давайте рассмотрим первый вариант.

Функция по нажатию кнопки в JavaScript

Событие по клику на кнопку мы создали, но можно сделать то же самое, только напишем функцию, с именем.

А к кнопке добавим эту функцию:

Вывод на страницу по клику на кнопку в JS

Соответственно по нажатию на кнопку в JavaScript можно делать не только всплывающий alert, но и все, что угодно, передавать данные на сервер, изменять элементы на странице, удалять, копировать и много чего еще. Давайте рассмотрим еще один пример. напишем небольшую функцию, которая будет срабатывать по клику и выводить на страницу случайное число. Для этого под кнопкой добавим элемент DIV с классом sum, в котором будем выводить результат работы JavaScript функции.

function randomSum(min, max)

Для кнопки добавим эту функцию по нажатию:

<button type="submit" onclick="randomSum(1000, 9999);">Нажми меня</button>

По нажатию на кнопку под ней будет выведено четырехзначное число от 1000 до 9999 в случайном порядке. Это мы указали в специальных параметрах min и max.

Нажатие правой кнопкой мыши в JS

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

Запрещаем вывод контекстного меню при клике правой кнопкой мыши:

<button type="submit" oncontextmenu="return false">Нажми меня</button>

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

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

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

Проблем с запуском 2-х функций в JS возникать не должно. Просто эти функции нужно написать отдельно. Возможно у вас какой-то конфликт в коде.

Имеется в виду есть 2 групы или более радио кнопок с возможностью выбора только одной кнопки в каждой группе по параметру value. Хотелось бы написать один код, в котором поставив чекбоксы в радио кнопках использовать их значениня value в этом коде дальше по нажатию кнопки РАССЧИТАТЬ. Каждая группа кнопок перебирается в цикле и определяется значение value одной и второй группы. На самом деле, записав оба цикла последовательно в коде не удаётся далье воспользоваться полученными значениями велью. Если радио кнопки не зависимые, тогда всё в порядке, а если с одним именем не получается.

Не совсем понял. Можно попробовать использовать this и написать один цикл.

Спасибо. Буду пробовать.

Всплывает модальное окно подписки и зависает. Дальше не реагирует.

Доброго времени суток! а как быть в случае когда надо на одной странице несколько раз выполнить одинаковый код обновление div-а с помощью Ajax?
Пример: есть страница строки/столбцы. В одном из столбцов (для каждой строки) есть номер и ттн. По нажатию на кнопку происходит отправка данных. php возвращает некий ответ. Этот ответ отображается в div под кнопкой отправки. Но такая конструкция срабатывает только один раз для первого элемента

$.ajax( <
type: «POST»,
url: url,
data: form.serialize(),
success: function(html) <
$(»).html(html);>>);
return false;
>);

Вам скорее всего нужен формат Json. Об этот я писал здесь.

Данные отправляются через эту конструкцию нормально. php тоже отрабатывает возвращая нужную строку. После в строке success результат от php присваивается некому div-у на странице. Но если это код повторить несколько раз на одной странице то все, которые ниже уже не работают (я так понимаю, что это из за уникальности id-шников)

Соответственно id должны быть разными.

Добрый день , Ребята кто может помочь за $ единоразово отредактировать javascript? Буду очень благодарен .!

Привет. Можно посмотреть. Пишите в телегу: https://t.me/Mavrinn

А это в Джаваскрипт писать или html?

Как сделать так, чтобы при нажатии на кнопку/ссылку не было перехода по этой ссылке? То есть чтобы ссылка сработала скрыто от пользователя
Заранее благодарен

Как сделать, чтобы при клике на кнопки появлялся текст? [закрыт]

Хотите улучшить этот вопрос? Переформулируйте вопрос так, чтобы он был сосредоточен только на одной проблеме.

Закрыт 3 года назад .

Как сделать, чтобы при клике на кнопки «web design», «mobile app», «branding» появлялся текст?

Такая штука называется «Tabs» (Вкладки), вариантов реализации вагон, но мне нравится на js\jq.

Вот мой вариант реализации:

Это простые табы. Вот вариант с помощью jQuery:

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.3.6.43280

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.