Как кнопку сделать ссылкой?
В этом примере при щелчке по кнопке открывается веб-страница new.html в новой вкладке.
Одну форму нельзя вкладывать внутрь другой. Перед добавлением кнопки убедитесь что у вас только одна форма.
Использование CSS
Раз кнопку нельзя сделать ссылкой, то вообще отказываемся от и стилизуем ссылку, чтобы она стала похожа на кнопку. В примере 2 показан класс btn , при добавлении его к элементу ссылка меняет своё оформление.
Пример 2. Стилизация ссылки
Результат данного примера показан на рис. 1.
Рис. 1. Стилизация ссылки
Использование JavaScript
Для перехода к указанной веб-странице можно воспользоваться событием onclick, добавляя его к элементу . Внутри onclick пишем document.location , а в качестве значения адрес желаемой веб-страницы (пример 3). Обратите внимание на комбинацию кавычек, адрес веб-страницы берётся в одинарные кавычки.
Пример 3. Событие onclick
См. также
- Атрибуты
- Кнопки
- Кнопки
- Кнопки в Bootstrap 4
- Кнопки в Bootstrap 5
- Отправка данных формы
- Отправка данных формы
- Построение форм
- Событие onclick
- Создание кнопок
- Создание форм
- Сумасшедшие формы
- Формы
- Формы в Bootstrap 4
- Формы в Bootstrap 5
- Формы в HTML
Как создать HTML кнопку, которая действует как ссылка
Есть много способов создания HTML кнопки, которая действует как ссылка, т.е., когда вы нажимаете на эту кнопку, она перенаправляется на указанный URL-адрес.
Вы можете выбрать один из следующих методов добавления ссылки на HTML кнопку.
Добавьте строчный onclick event
Пример
html> html> head> title>Заголовок документа title> head> body> button onclick="window.location.href = 'https://w3docs.com';">Click Here button> body> html>Этот пример может не работать, если кнопка находится внутри тега .
Пример
html> html> head> title>Заголовок документа title> head> body> form> input type="button" onclick="window.location.href = 'https://www.w3docs.com';" value="w3docs"/> form> body> html>Ссылки не будут работать, если JavaScript не используется, а поисковая система может проигнорировать такие ссылки.
Используйте атрибут action или formaction внутри элемента .
- атрибут action
Пример
html> html> head> title>Заголовок документа title> head> body> form action="https://www.w3docs.com/"> button type="submit">Click me button> form> body> html>Для того, чтобы открыть ссылку в новой вкладке, добавьте атрибут target=»_blank» .
Пример
html> html> head> title>Заголовок документа title> head> body> form action="https://www.w3docs.com/" method="get" target="_blank"> button type="submit">Click me button> form> body> html>Так как нет форм и данных, этот пример семантически не будет иметь смысла. Но данная разметка допустима.
- б. атрибут HTML5 formaction .
Пример
html> html> head> title>Заголовок документа title> head> body> form> button type="submit" formaction="https://www.w3docs.com">Click me button> form> body> html>Атрибут formaction используется только для кнопок с type=”submit”. Так как этот атрибут является HTML5-specific, он может слабо поддерживаться в старых браузерах.
Добавьте ссылку в стиле HTML кнопки (используя CSS)
Пример
html> html> head> title>Заголовок документа title> style> .button < background-color: #FF4500; border: none; color: white; padding: 20px 34px; text-align: center; text-decoration: none; display: inline-block; font-size: 20px; margin: 4px 2px; cursor: pointer; > style> head> body> a href="https://www.w3docs.com/" class="button">Click Here a> body> html>Так как требуется сложное стилевое оформление, этот метод может не работать в некоторых браузерах.
Как привязать ссылку к кнопке html
Для того чтобы реализовать эту возможность можно пойти разными путями. Например, можно использовать стандартный тэг в связке с , и для формы указываем атрибут action с адресом веб-страницы. Другой более красивый вариант — стилизовать тэг под кнопку. Рассмотрим этот вариант подробнее:
href="#" class="btn">Это кнопка .btn /* Теперь это строчно-блочный элемент */ display: inline-block; /* Серый цвет фона кнопки */ background: #8C959D; /* Белый цвет текста */ color: #fff; /* Отступы вокруг текста */ padding: 16px 32px; /* Убираем подчёркивание */ text-decoration: none; /* Скругляем уголки */ border-radius: 3px; > 
Результат:
Как сделать кнопку с HTML–ссылкой
wikiHow работает по принципу вики, а это значит, что многие наши статьи написаны несколькими авторами. При создании этой статьи над ее редактированием и улучшением работали авторы-волонтеры.
Количество просмотров этой статьи: 13 478.
В этой статье:
Данная статья покажет вам, как сделать кнопку с HTML-ссылкой. Действие схоже с обычной гиперссылкой, однако вместо нее разработана кнопка.
Откройте свой HTML-файл в предпочитаемом вами текстовом редакторе, таком как «Блокнот» (Notepad) или «TextEdit».
Добавьте следующий код в ту область, куда вы хотите вставить кнопку.
Измените ссылку. В настоящее время код указывает на домашнюю страницу сайта WikiHow. Замените его на URL-ссылку страницы, к которой вы желаете перейти по щелчку.
Отредактируйте текст кнопки. В данном случае на ней указано следующее: «Домашняя страница». Вы можете поменять название кнопки по своему усмотрению.
Проверьте ссылку. Щелкните левой кнопкой мыши по ссылке, чтобы убедиться в ее активности. Если она работает, значит, вы закончили. Если клик по кнопке не срабатывает, тогда вам следует проверить свой код на наличие ошибок.