Как создать HTML кнопку, которая действует как ссылка
Есть много способов создания HTML кнопки, которая действует как ссылка, т.е., когда вы нажимаете на эту кнопку, она перенаправляется на указанный URL-адрес.
Вы можете выбрать один из следующих методов добавления ссылки на HTML кнопку.
Добавьте строчный onclick event
- к HTML <button> тегу внутри элемента HTML <form>.
Пример
- к <input> тегу внутри элемента HTML <form>.
Пример
Используйте атрибут action или formaction внутри элемента <form>.
- атрибут action
Пример
Для того, чтобы открыть ссылку в новой вкладке, добавьте атрибут target=»_blank» .
Как создать HTML кнопку, которая действует как ссылка?
Простой способ HTML заключается в том, чтобы поместить его в <form> , где вы указываете желаемую цель URL в атрибуте action .
При необходимости установите CSS display: inline; на форме, чтобы сохранить ее в потоке с окружающим текстом. Вместо <input type="submit"> в приведенном выше примере, вы также можете использовать <button type="submit"> . Единственное отличие заключается в том, что элемент <button> позволяет дочерние элементы.
Вы интуитивно ожидаете, что сможете использовать <button href="http://google.com"> аналогично элементу <a> , но, к сожалению, нет, этот атрибут не существует в соответствии со спецификацией HTML .
Если CSS разрешено, просто используйте <a> , который вы стилизуете, чтобы выглядеть как button, используя среди прочего свойство appearance (только поддержка Internet Explorer в настоящее время (июль 2015) все еще бедна ).
Или выберите одну из этих многочисленных библиотек CSS, таких как Bootstrap .
Every developer has a
tab open to
Stack Overflow
A public platform building the definitive collection of coding questions & answers
A community-based space to find and contribute answers to technical challenges, and one of the most popular websites in the world.
A private collaboration & knowledge sharing SaaS platform for companies
A web-based platform to increase productivity, decrease cycle times, accelerate time to market, and protect institutional knowledge.
Thousands of organizations around the globe use Stack Overflow for Teams
Capture your company’s knowledge and context in a discoverable format to unblock your team
Increase productivity
If somebody somewhere has the right answer, suddenly you have it too. Collaborate better in a remote-first world.
Accelerate time to market
Shorten the time between initial idea and complete product. Take delays and misinformation out of the equation.
Protect institutional knowledge
People come and people go, but if you capture their contributions in one central place, that expertise sticks around.
Ensure your company stays on course
Here are just a few types of technologists that we help.
DevOps engineers
Shipping new products and features requires teamwork and coordination. Forget checklists and long docs no one ever reads.
Data scientists
Business decisions are better when backed by data. Give visibility to the data that support your strategies.
Software engineers
Help engineers be more efficient and streamline knowledge sharing using a tool they already love and trust.
Support teams
Level up your support by providing information to your customers using a natural interface: questions and answers.
Engineering leaders
Help your team get the information they need to do their job — reduce burnout and help engineers grow and learn together.
Always free up to 50 teammates
Basic
Up to 250 teammates
Business
Enterprise
Integrates with and improves other tools
All plans come with integrations for ChatOps tools Slack & Microsoft Teams in order to cut down on pings, limit distractions and make the tools even more powerful. Business and Enterprise customers get access to Jira, GitHub & Okta integrations.
Robust read and write API
Single sign-on with AD or SAML
Your own customer success representative
99.5% uptime SLA and priority support
Stack Overflow for Teams has been a resource for our entire company. Not only for developers to solve problems, it’s also enabled our sales field to answer technical questions that help them close deals.
Engineers should help solve the hardest questions, the unknowns, where being familiar with how the product was built is essential. But we don’t want to keep answering solved problems over and over again. That’s where Stack Overflow for Teams really helps.
As we started to use [Stack Overflow for Teams] and saw how nice it was to have a repository of information, we started to see it spread to other teams. Our customer support team started using it, our people success team started using it, next thing we knew, we had [Slack] integrations all over the place.
What we love about Stack Overflow for Teams is that it’s a very dynamic tool…there’s just so many ways to use this as a liaison between different teams and different knowledge bases.
Additional products that reach and engage developers & technologists…
Reach the world’s largest audience of developers and technologists
Connecting communities with the specific technologies they use the most
Build your employer brand
Explore technical topics and other disciplines across 170+ Q&A communities
From Server Fault to Super User, much of the Stack Exchange network continues our mission to empower the world to develop technology through collective knowledge. Other sites on the Stack Exchange network further encourage knowledge sharing across topics such as cooking and medicine.
Build a private community to share technical or non-technical knowledge.
Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.3.11.43304
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.
<button>
С помощью CSS можно настроить внешний вид кнопки <button> и текста на ней: шрифт, размер, цвет фона и другие параметры. А если ничего не менять, то <button> будет выглядеть, как стандартная браузерная кнопка.
На кнопку можно поместить любой HTML-элемент.
Как пишется
Скопировать ссылку на секцию «Как пишется» Скопировано
Атрибуты
Скопировать ссылку на секцию «Атрибуты» Скопировано
К тегу <button> можно применить любой универсальный атрибут, а также специфические атрибуты кнопок:
- 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 : просто кнопка. Действие для неё можно задать через скрипты.
Подсказки
Скопировать ссылку на секцию «Подсказки» Скопировано
�� Если хочется, чтобы пользователь отправил данные вам на сервер по нажатию кнопки, то <button> либо должен быть внутри контейнера <form> , либо связан с формой при помощи атрибутов id и form :
�� Тег <input> с атрибутом type = «button | reset | submit» тоже создаёт кнопку, но <button> проще стилизовать, так как внутрь <button> можно добавить любой HTML-контент, например, <em> , <strong> или <img> .
�� Если создаёте кнопку, которая не отправляет ничего на сервер, убедитесь, что задан атрибут type , иначе может вылезти ошибка.
На практике
Скопировать ссылку на секцию «На практике» Скопировано
Дока Дог советует
Скопировать ссылку на секцию «Дока Дог советует» Скопировано
�� Но есть и другое мнение. Я вот использую <button> крайне редко. Допустим, вам нужно отправить данные формы на сервер. Если нужна обычная квадратная кнопка с надписью «Отправить», то я ставлю <input type = «submit» value = «Отправить»> , потому что <input> проще верстать ��♂️
Единственный случай, когда я использую <button> — это когда нужно отправить данные из формы на сервер, но кнопка нужна посложнее: с картинкой, заливкой или особым шрифтом, например. В обычный <input> картинку не вставить. А с тегом <a> не хочется извращаться, потому что он по умолчанию не отправляет данные формы.
�� Если вам нужна кнопка вне формы для отправки данных, то проще использовать тег <a> , то есть обычную ссылку. В href я прописываю # , чтобы кнопка никуда не вела, если не надо. Потом навешиваю на неё всякие события: допустим, атрибут, который вызывает всплывающее окно. Тег <a> намного проще использовать, чем <button> , в нём больше возможностей по умолчанию, чтобы накидать внутрь каких-нибудь значений и условий, например, сделать не простую кнопку, с тремя картинками в определённой последовательности. У <button> больше ограничений.
Алёна Батицкая советует
Скопировать ссылку на секцию «Алёна Батицкая советует» Скопировано
�� При выборе между кнопкой и ссылкой нужно смотреть исключительно на семантику, а не на внешний вид элемента в дизайне и уж точно не на простоту вёрстки.
В первую очередь вы должны понять, за что отвечает элемент: за перенаправление на другую страницу, раздел сайта, ресурс или выполняет какие-то действия на самой странице (например, отправляет данные формы).
�� Если мы по клику на элемент открываем новое окно или перенаправляем пользователя на другую страницу — выбираем тег <a> , ссылку.
Если мы никуда пользователя не отправляем, а, например, открываем диалоговое окно или листаем слайдер, то это кнопки.
Вадим Макеев в своём докладе «Жми сюда!» сформулировал следующий способ выбора между кнопкой и ссылкой:
- В любой ситуации, где вам нужно выбирать, кнопка это или ссылка, выберите кнопку ( <button> ).
- Если вы можете дать какой-то адрес для перенаправления — тогда это ссылка ( <a href = «»> ).
- Всегда начинайте с кнопки.
На собеседовании
Скопировать ссылку на секцию «На собеседовании» Скопировано
Это партнёрская рубрика, мы выпускаем её совместно с сервисом онлайн-образования Яндекс Практикум. Приносите вопрос, на который не знаете ответа, в задачи, мы разложим всё по полочкам и опубликуем. Если знаете ответ, присылайте пулреквест на GitHub.
Какая разница между кнопками и ссылками? В каких случаях надо использовать ссылку, в каких кнопку? Почему эта разница важна с точки зрения доступности?
Скопировать ссылку на секцию «Какая разница между кнопками и ссылками? В каких случаях надо использовать ссылку, в каких кнопку? Почему эта разница важна с точки зрения доступности?» Скопировано
Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.
Читайте также
Формы разные нужны, формы разные важны. Без этого тега ни одна форма работать не будет!
:disabled , :enabled
Эта кнопка серая. Она не доступна для клика. Как написать селектор на основе состояния элемента?