Как кнопку сделать ссылкой?
В этом примере при щелчке по кнопке открывается веб-страница new.html в новой вкладке.
Одну форму нельзя вкладывать внутрь другой. Перед добавлением кнопки убедитесь что у вас только одна форма.
Использование CSS
Раз кнопку нельзя сделать ссылкой, то вообще отказываемся от и стилизуем ссылку, чтобы она стала похожа на кнопку. В примере 2 показан класс btn , при добавлении его к элементу ссылка меняет своё оформление.
Пример 2. Стилизация ссылки
Результат данного примера показан на рис. 1.
Рис. 1. Стилизация ссылки
Использование JavaScript
Для перехода к указанной веб-странице можно воспользоваться событием onclick, добавляя его к элементу . Внутри onclick пишем document.location , а в качестве значения адрес желаемой веб-страницы (пример 3). Обратите внимание на комбинацию кавычек, адрес веб-страницы берётся в одинарные кавычки.
Пример 3. Событие onclick
См. также
- Атрибуты
- Кнопки
- Кнопки
- Кнопки в Bootstrap 4
- Отправка данных формы
- Отправка данных формы
- Построение форм
- Событие onclick
- Создание кнопок
- Создание форм
- Сумасшедшие формы
- Формы
- Формы в Bootstrap 4
- Формы в HTML
Что лучше использовать: ссылки или кнопки
При вёрстке макета не всегда понятно, что перед нами — кнопка или ссылка. Внешне эти элементы могут быть очень похожи, но их функции различаются и браузер реагирует на них по-разному. Поэтому неправильный выбор может привести к ошибкам в работе веб-страницы.
Почему возникает проблема
Ссылка — это элемент навигации. Обычно она представляет собой текст, нажимая на который, пользователь переходит на другую страницу или перемещается к другому месту на текущей странице. То есть ссылка отвечает за взаимосвязь веб-ресурсов или разделов одного ресурса.
Ссылки создаются с помощью тега .
Кнопка — это функциональный элемент. Она отвечает за выполнение определённой функции: добавить в корзину, купить, отправить, проголосовать и т. д.
Для кнопок используют тег .
Проблемы возникают, когда внешне кнопка очень похожа на ссылку — текст без плашки, или ссылка напоминает кнопку — текст расположен на фоне прямоугольной плашки.
Что случится, если вместо ссылки сделать кнопку
Если URL-адрес обернуть не , а тегом , то при нажатии пользователя на правую кнопку мыши браузер предложит выполнить действия, которые положены при клике на кнопку. Адрес нельзя будет открыть в новой вкладке или отправить через контекстное меню.
Такая кнопка не позволит открыть страницу в новой вкладке и через комбинацию клавиш — Ctrl и левая кнопка мыши.
При наведении курсора на правильную ссылку её адрес появляется внизу окна браузера. URL-адрес, обёрнутый в , не отобразится.
Что произойдёт, если вместо кнопки сделать ссылку
При нажатии пользователем на ссылку правой кнопкой мыши браузер предлагает действия, которые можно совершить именно со ссылкой:
При наведении курсора на псевдоссылку внизу окна браузера появится не адрес, а javascript:; или АдресТекущейСтраницы/# .
Как определить элемент по макету
Конкретные указания часто прописывают в техническом задании к макету. В стайлгайде самого макета можно посмотреть состояния элемента.
У ссылки должны быть стили для состояния покоя, при наведения курсора :hover , в момент нажатия :focus , активного :active и иногда состояния, когда пользователь уже посещал эту страницу :visited .
У кнопки нет состояния :visited , зато есть состояние блока :disabled .
Однако рассчитывать только на макет не нужно. У ссылки может не быть :visited , а у блока :disabled — это может запутать.
Всё-таки кнопка или ссылка
Если дизайнер по каким-то причинам не отрисовал состояния вообще, то придётся руководствоваться одной логикой.
Ссылка
Кнопка
За что отвечает
Навигация, т. е. пользователь перемещается на другую часть страницы или на новую страницу.
Выполнение какой-либо функции без перехода на другую страницу — добавить в корзину, купить, отправить, проголосовать, войти и т. д.
Что видит пользователь
• При наведении курсора на ссылку внизу окна браузера возникает её адрес.
• Через меню по клику правой кнопкой мыши можно скопировать, отправить, открыть ссылку в новой вкладке.
• При наведении курсора на ссылку внизу окна браузера не отображается адрес.
• Через меню по клику правой кнопкой мыши нельзя скопировать адрес или поделиться им.
Пример
На макете отрисована фраза «Войти». Если клик по ней должен открывать окно для ввода регистрационных данных на этой же странице, это кнопка. Если при нажатии должна открываться отдельная страница для входа, это ссылка.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Что такое Lazy Loading и как её включить на сайте
Ленивая загрузка (буквально, lazy loading)— это возможнось отложить загрузку ненужного прямо сейчас медиаконтента.
Ленивая загрузка делает сайт быстрее и экономит трафик, если у пользователя мобильный интернет с ограничениями.
- 22 ноября 2023
Знакомство с HTML
Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.
HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.
- 1 ноября 2023
Специальные символы в HTML
HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.
- 23 октября 2023
Простое диалоговое окно на HTML
Вот короткое демо:
- 18 октября 2023
Зачем нужен метатег viewport
Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport .
Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport , который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.
Важно, чтобы сайты классно выглядели не только на компьютерах, но и на маленьких экранах смартфона. Если не использовать viewport , то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования. Конечно, нужно ещё много всего сделать для адаптивности, но viewport тоже нужен.
- 18 сентября 2023
Атрибут class в HTML на примерах
Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.
Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.
- 14 сентября 2023
В чём отличия цитат blockquote, cite и q
В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.
- 12 сентября 2023
Осмысленный alt-текст: 6 правил
Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.
Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.
- 31 июля 2023
Растровая и векторная графика
Давайте попробуем разобраться, в чём отличие растровой графики от векторной.
- 13 июня 2023
Как понять, что перед вами заголовок
Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от до . Каждый уровень заголовка имеет свой семантический вес, где имеет наибольший вес, а — наименьший.
Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.
При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.
В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.
- 8 июня 2023
Как задать ссылку кнопке html
Когда мы говорим о кнопке, то кнопка может быть разной. К примеру у нас есть какая то кнопка в виде изображения.
Возьмем первую попавшуюся кнопку из интернета. кнопка — картинка. Давайте её здесь выведем. Если наведем мышку на данную кнопку. то ничего не будет происходить. поскольку данная кнопка не является ссылкой — это » картинка «
Далее. просто обернем нашу картинку тегом ссылки
И выведем результат:
Кнопка обернутая ссылкой:
И! У нас появилась рука( курсора с рукой) при наведении на кнопку + border снизу. Не совсем эстетично.
class=»example»
Уберем бордюр и text-decoration и продублируем с hover
border: unset !important;
text-decoration: none !important;
И давайте. навесим хоть какой-то эффект при наведении. пусть это будет «opacity»
Ну вот. примерно, какая кнопка у нас получилась с ссылкой.
Как сделать кнопку ссылкой в html
Если говорим о кнопке в html? а именно о теге button :
То и такую кнопку можно превратить в ссылку!
Кроме внешнего вида, но и сделать, чтобы она выполняла пряму роль ссылки — переход по ссылке.
Мы превратим кнопку в ссылку аналогичным способом, что рассматривали выше пунктом!
Но если мы выведем выше приведенную кнопку ссылкой, то получим. не пойми что. то ли кнопка. то ли ссылка:
Нам нужно навесить на такую кнопку-ссылку немного стилей, чтобы кнопка была похожа на ссылку.
И далее можно пойти двумя путями. 1). просто уничтожить стили кнопки 2). декорировать кнопку под ссылку!
Декорируем кнопку под ссылку:
Начнем с html кода кнопки-ссылки:
По умолчанию стили для ссылки, которые у меня на сайте : text-decoration отключен, добавлен border и продублируем с hover, кроме цвета и цвета бордюра. он прозрачный :
a <
color: #969696;
text-decoration: none;
border-bottom: 1px solid #b3b3b3;
>
a:hover <
color: #000000;
text-decoration: none;
border-bottom: 1px solid #b3b3b300;
>
Добавим стили к нашей кнопке или точнее удалим все признаки кнопки.
button.ex5 <
border: none;
background: none;
cursor: pointer;
>
Смотрим, что у нас получилось.
Результат превращения кнопки в ссылку:
И естественно, что при таком html коде, кнопка будет отрабатывать задачу ссылки, т.е. будет переходить по указанному адресу. Для того, чтобы проверить — работает ли кнопка-ссылка, нажмите по ниже идущей ссылке-кнопке:
Как сделать кнопку ссылкой в html №2
Следующий вариант копия предыдущего пункта, но только стили будут другие. превратим в ссылку кнопку, а стили кнопки уничтожим!
Для того, чтобы реализовать данный пример кнопки-ссылки нам потребуется html каркас:
Уничтожим поведение ссылки:
a.example, a.example:hover <
border: unset !important;
text-decoration: none !important;
>
Превратим кнопку button в ссылку, сначала уничтожим все признаки кнопки и добавим «cursor» и в самом низу добавим бордюр снизу.
button.ex <
border: unset;
background: unset;
cursor: pointer;
border-bottom: 1px solid;
>
И нарисуем поведение. через hover — удалим бордюр, сделаем цвет прозрачным:
Как создать 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>Так как требуется сложное стилевое оформление, этот метод может не работать в некоторых браузерах.