Содержание

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

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

Правильно

Синтаксически корректное («валидное») и кроссбраузерное решение — заключить кнопку в простейшую форму. В атрибут action формы следует поместить URL-адрес, на который должна вести «кнопка-ссылка». Для работы формы в устаревших браузерах (IE8 и ниже) следует добавить кнопке атрибут type="submit":

<form action="/example/">
    <button type="submit">Кнопка-ссылка</button>
</form>

«Кнопка-ссылка» в примере ведёт на страницу с адресом /example/.

Если требуется открывать ссылку в новом окне или фрейме, можно, как и у обычных ссылок, использовать атрибут target элемента FORM:

<form action="/example/" target="_blank">

Демо

Строка запроса

Строка запроса — часть URL-адреса после первого вопросительного знака, содержащая GET-параметры в виде пар name=value (имя=значение), разделённых символом &.

Если адрес, на который должна указывать ссылка, содержит строку запроса, следует для каждого GET-параметра добавить в форму скрытое поле с соответствующими атрибутами name и value:

<form action="/example/">
    <input type="hidden" name="foo"   value="bar" />
    <input type="hidden" name="lorem" value="ipsum" />
    <button type="submit">Кнопка-ссылка</button>
</form>

Данная форма ведёт на страницу /example/?foo=bar&lorem=ipsum.

Chromium/

Blink и WebKit

В браузерах на основе движков Chromium/Blink (Chrome, Opera 15+, Яндекс.Браузер, Vivaldi) и WebKit (Safari) есть ошибка (баг) (1, 2): вопросительный знак, отделяющий строку запроса от основной части адреса, добавляется к адресу даже при отсутствии полей в форме. Поэтому, например, форма:

<form action="/example/">
    <button type="submit">Кнопка-ссылка</button>
</form>

приведёт на адрес /example/? вместо ожидаемого /example/.

Кент Тамура (Kent Tamura) из команды разработчиков Chromium говорит, что это соответствует текущим специфи­кациям HTML и URL.

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

Ограничения по сравнению с реальной ссылкой

  • У пользователя нет возможности узнать, куда ведёт ссылка-кнопка, до щелчка по ней.
  • Пользователь не может по своему желанию открыть ссылку-кнопку в новой вкладке или в новом окне.

Неправильно

Кнопка внутри ссылки

Нередко элемент BUTTON просто помещают внутрь ссылки:

<a href="/example/"><button>Кнопка-ссылка</button></a>

Это работает во всех современных браузерах, но согласно HTML5 это синтаксически некорректно («невалидно»): ссылка не должна содержать интерактивные элементы. Кроме того, такая ссылка не работает в Internet Explorer (IE) ниже 9-й версии.

Демо

Кнопка с JS-обработчиком щелчка

Порой используется кнопка с JavaScript-обработчиком события щелчка:

<button>Кнопка-ссылка</button>

Но такая кнопка не работает при выключенном JavaScript, её невозможно открыть в новой вкладке или новом окне, и возможны проблемы с индексацией поисковиками, не исполняющими JavaScript-код.

Демо

Нестандартные расширения CSS

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

Firefox и Chromium

Firefox версий 81 и ниже и браузеры на основе движка Chromium (Chrome, Opera 15+, Vivaldi, Яндекс.Браузер) прошлых версий поддерживали нестандартные префиксированные варианты свойства appearance, значение button которых позволяло оформить как кнопку произвольный элемент, в том числе ссылку:

A.example {
       -moz-appearance: button; /* Firefox */
    -webkit-appearance: button; /* Chromium */
}

Демо

Мелодичная инструментальная музыка

Internet Explorer, Edge и спецификация

В браузерах Microsoft — Internet Explorer (IE) и Edge — возможность недоступна. В спецификации CSS Basic User Interface Module Level 4 значение button свойства appearance не предусмотрено.

Ссылки против кнопок в современных веб-приложениях — CSS-LIVE

Перевод статьи Links vs. Buttons in Modern Web Applications с сайта marcysutton.com для CSS-live.ru, автор — Марси Саттон


Github: ссылки или кнопки?

Одна из вечных тем во фронтенд-доступности — неразбериха между ссылками и кнопками. Ну, HTML-элементы, которые открывают ссылки в новом окне или отправляют форму, знаете? В веб-приложениях на JavaScript мы по-прежнему путаемся, какой элемент выбрать для пользовательского действия. Чтобы развеять туман, я покажу примеры использования для ссылок и кнопок в приложениях с отрисовкой на клиенте и помогу вам принимать лучшие решения с точки зрения UI.

Кнопки

Почему-то люди становятся веб-разработчиками,так и не узнав про HTML-элемент <button>. (Мне и самой потребовалось несколько лет, пока я узнала, для чего нужны заголовки h2-h6, так что бывает). Могучая кнопка и правда крутая. Вот что она может делать:

  • Получать фокус с клавиатуры по умолчанию
  • Делать «клик» по нажатию на пробел
  • Отправлять данные формы на сервер
  • Очищать форму
  • Блокироваться с помощью атрибута disabled
  • Давать подсказку скринридеру с помощью неявного атрибута role="button"
  • Показывать состояния ∶focus, ∶hover, ∶active, ∶disabled

Если добавить немного скрипта,кнопка идеальный элемент для:

  • Открывания модального окна
  • Вызова всплывающего меню
  • Переключения интерфейса
  • Проигрывания медиа-контента
  • Вставки с помощью JS в случае, если они работают только с помощью JS

Ссылки

Вот несколько базовых возможностей ссылок, или якорей, или фундамента веба:

  • Создавать гипертекст,  сеть онлайн-ресурсов
  • Перевести пользователя на новую страницу или окно
  • Изменять URL
  • Вызвать браузерные перерисовку/перезагрузку
  • Переходить по якорям внутри страницы
  • Связывать между собой разные части приложения с отрисовкой на клиенте
  • Способны принимать фокус по умолчанию с помощью атрибута href
  • Регистрируют клик с помощью клавиши Enter
  • Имеют неявную роль link
  • Не блокируются как кнопки, но их можно сделать неактивными с помощью tabindex="-1" и aria-hidden="true"
  • Могут открываться в новых окнах (а раньше — и во фреймах)
  • Показывать состояния ∶link, ∶visited, ∶focus, ∶hover, ∶active

Лично для меня самое главное различие между ссылкой и кнопкой — то, что ссылки перемещают пользователя на новый ресурс, унося его из текущего контекста (внутренние ссылки — единственная загвоздка здесь). Кнопка переключает что-то в интерфейсе, например, видео-плеер, или вызывает новый контент в том же самом контексте, например, всплывающее меню, использующее aria-haspopup.

Что такое навигация? А что маршрутизация?

Изменение URL означает, что пользователь переходит на новую страницу. Это перезагружает браузер с новым ресурсом и перерисовывает пиксели. Навигация может вызываться с помощью действий формы, якорных ссылок и JavaScript-свойства location.

Подобно сортировке писем на почте, маршрутизация — механизм для подключения сетевых запросов с соответствующим контентом в приложении. Маршрутизаторы — общая технология для множества разных веб-фреймворков (помню, как на заре своей карьеры я балдела от PHPшных), ставящая в соответствие представления и их части определенным фрагментам URL. Благодаря написанию динамических маршрутов, новый контент можно создавать динамически (без хардкода)

Откуда возникает путаница?

В мире клиентских веб-приложений построенных с помощью Angular, Ember или React, браузерная перерисовка может вызваться в любой момент.

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

<a href="#" tabindex="0" ng-click="userPicker.userClicked(true)" aria-label="Some username"></a>

По первому впечатлению я посчитала, что это надо заменить на элемент button, поскольку нет значения в href, но есть tabindex="0" и привязка обработчика ng-click. Выглядит очевидно, да? Мне сказали, что он должен оставаться якорем, поскольку «он перенаправляет на внешние ссылки и страницу профиля». Это стало ясно только после изучения JavaScript-кода, который вызывается во многих подобных местах по привязке обработчика ng-click на элементе button. Неужели обязательно надо так глубоко копать, чтобы помочь выбрать правильный элемент?

Если в чисто клиентском приложении фокус обрабатывается правильно, это может не сказаться на пользователе — у ссылки ng-click и tabindex останется по-прежнему неявная роль ссылки. Однако,при декларативном подходе намного лучше было бы использовать заполненный href и маршрутизацию, если якорь перенаправляет пользователя на новый ресурс. Tabindex и события click, привязанные к тегу ссылки — антипатерн разметки, который еще аукнется тем, кто позднее будет писать код и проверять его.

Если делать маршрутизацию основной частью веб-приложения, то веб-разработчикам будет намного проще использовать ссылки и понять предназначение кнопок. А еще с ним проще создавать серверные JavaScript-приложения с прогрессивным улучшением, пользуясь шаблонами URL, а не полагаясь на события по клику.

Роль UX в разработке доступных приложений

Я скажу это вслух: эта путаница часто начинается с дизайна и UX. Компонент дизайна приходит к нам с прямоугольными кнопками интерфейса, и — потому что так надо — в коде они должны быть ссылками. Где это становится проблемой?

Если пользователь скринридера обратится в техподдержку и получит инструкцию «кликнуть на кнопку» в вашем UI, которая на самом деле написана в коде как ссылка, для него может оказаться проблемой найти ее. Не забывайте и о голосовых интерфейсах: если вы произнесёте команду кликнуть на кнопку, которая в коде похожа на ссылку, вы столкнетесь с проблемами, нет?

Фреймворки, по общему признанию, стирают эту грань и только способствуют выбору неправильного элемента, как в примере с ng-click выше. Можно использовать JavaScript для запуска асинхронной отправки формы на нужном нам элементе (даже без тега <form>, но это еще не повод от него отказываться). Аналогично, можно инициировать изменения представления без маршрутизации, даже если их лучше всего обрабатывать с помощью ссылки. Одни элементы подходят в одном случае, другие — в другом: всё дело в том, чтобы использовать нативные возможности этого элемента по максимуму.

Заметили разницу?

Что можно для этого сделать?

Вернитесь к дизайну и сделайте ссылки похожими на ссылки, а кнопки — на кнопки. Без двусмысленности разработчикам станет легче писать более доступный код, лучше отвечающий ожиданиям пользователей. (Можно ли кликнуть правой кнопкой мыши на эту квадратную кнопку, чтобы открыть в новом окне?)

В разработке:

  • Если пользователь скринридера перейдет табом на интерактивный элемент, подскажет ли роль этого элемента, чего от него ждать? (Уводит ли он куда-то с текущей страницы? Об этом хорошо бы узнать заранее.)
  • Отключаете ссылочные фичи типа смены URL или правого клика? Подумайте о кнопке.
  • Поддерживайте маршрутизацию в вашем приложении с помощью href, ng-href, и так далее.
  • Навигация по страницам заслуживает изменения заголовка и истории.

Это ещё не конец.

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

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

P.S. Это тоже может быть интересно:

html страница как сделать кнопки перехода

Автор admin На чтение 4 мин. Просмотров 117 Опубликовано

15.12.2019

2017-11-14 / Вр:16:05 / просмотров: 20376

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

Внимание:
В коде я указываю « ВАША_ССЫЛКА_НА_СТРАНИЦУ » или « https://bloggood.ru/ ». Естественно, вам нужно заменить эти адреса своими.

Содержание

  1. HTML кнопка как ссылка
  2. HTML ссылка как кнопка
  3. Для чего нужны кнопки на сайте?
  4. Какие бывают кнопки?
  5. Как сделать кнопку в HTML?

HTML кнопка как ссылка

1 способ:
В атрибут « action » поместите URL-адрес, на который должна вести «кнопка»:

2 способ:
Также можно использовать HTML события:

3 способ:
Тоже взят из HTML события, только другим способом:

BlogGood() – это название функции вы можете назвать по своему.

HTML ссылка как кнопка

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

1 способ:
Самое простое решение – это нарисовать кнопку и обхватить ее тегами ссылки :

2 способ:

Можно использовать особое правило в CSS « -moz-appearance и -webkit-appearance » со значением « button » :

3 способ:

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

Вроде, ничего не пропустил и ничего не напутал.

Приветствую! В этой статье хочу поговорить про кнопки, на мой взгляд один из важнейших элементов в дизайне сайтов и приложений. Ведь, в большинстве случаев, кнопки нужны для того, чтобы заставить пользователя выполнить какое-либо действие (подписаться на рассылку, добавить товар в корзину, оставить комментарий, заказать обратный звонок и т.д.), которое можно так или иначе монетизировать. Мы же здесь не просто так собрались 😉

Итак из этой статьи вы узнаете:

  • Для чего нужны кнопки и какие функции они выполняют
  • Какие бывают кнопки и в чем их различия
  • Как сделать кнопку в HTML
  • Как сделать красивую кнопку в HTML и CSS

Также в конце статьи вас ждет небольшой бонус, который пригодится каждому сайтостроителю.

Но давайте по порядку.

Для чего нужны кнопки на сайте?

Ответ напрашивается сам собой: “Для того, чтобы их нажимали!”. И, действительно, выделяющаяся симпатичная кнопка привлекает гораздо больше внимания чем тусклая и унылая ссылка. С другой стороны, если вся страница заполнена разномастными кнопками, которые, переливаясь и моргая, требуют внимания пользователя, он, скорее всего, не поняв, что от него требуется, не нажмет ни на одну и просто закроет вкладку.

Поэтому использовать кнопки надо “экономно”, в идеале не больше 1-2 в видимой области экрана. При этом пользователю должно быть максимально понятно, что произойдет, если он нажмет на кнопку.

Какие бывают кнопки?

В моем представлении кнопки бываю двух типов, для каждого из них я использую соответствующие HTML-теги:

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

Кнопки-действия нужны для совершения какого-либо действия на странице (отправка формы, открытие модального окна и т. д.). Для этого можно использовать теги или . Я предпочитаю второй вариант, т.к. он гораздо более гибкий в настройке.

В то же время атрибут href является невалидным для тега , поэтому его не стоит использовать в качестве кнопки-ссылки. Опять же, можно сделать кнопку ссылкой, придумав какие-нибудь “костыли” типа

Но зачем это нужно. Все гораздо проще и понятнее.

Если кнопка нужна для перехода на страницу — используем , во всех остальных случаях —

Как сделать кнопку в HTML?

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

Основными атрибутами таких кнопок являются:

type: button | submit | reset

Тип кнопки. Это необязательный параметр, и его можно пропустить. Если кнопка находится внутри формы и атрибут type отсутствует, браузер посчитает, что тип кнопки — submit и попытается отправить форму обработчику.

Несмотря на слухи, которые ходят в интернете, о том, что тег должен располагаться только внутри тегов

Есть много способов создания HTML кнопки, которая действует как ссылка, т.е., когда вы нажимаете на эту кнопку, она перенаправляется на указанный URL-адрес.

Вы можете выбрать один из следующих методов добавления ссылки на HTML кнопку.

Руководство по созданию правильного синтаксиса

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

Продолжайте читать это руководство, если хотите узнать, как правильно создать ссылку-кнопку в документах HTML с помощью основных элементов и атрибутов.

Содержание

  • Введение в гиперссылки: мощный инструмент HTML
    • — визуальный вывод гиперссылок HTML
    • — целевой атрибут HTML: изменение отображения по умолчанию
  • Как связать кнопку в документах HTML: основное введение
    • — Элемент Button
    • — Элемент Input
    • — Элемент Form
    • — Атрибут Formation
  • Применение свойств CSS к элементу Link
  • Последнее, что нужно запомнить

Введение в гиперссылки: мощный инструмент HTML

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

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

Рассмотрим следующий пример HTML:




Название вашего документа


Посетите нашу веб-страницу!

Все, что должен сделать пользователь, это щелкнуть содержимое, включенное между открывающим и закрывающим HTML-тегами . Как только они это сделают, они будут перенаправлены на указанный URL-адрес внутри атрибута href.

– Визуальный вывод гиперссылок HTML

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

Это три разных экземпляра:

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

— Целевой атрибут HTML: изменение отображения по умолчанию

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

Наиболее распространенным целевым значением является «_blank», поскольку большинству веб-разработчиков нужна ссылка для открытия в новой вкладке . Таким образом, вы можете без проблем перемещаться по текущей веб-странице и связанной веб-странице.

Давайте посмотрим на целевой атрибут в действии на следующем примере:




Название вашего документа


AnExampleWebPage.com/» target=»_blank»> Посетите нашу веб-страницу!

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

Как связать кнопку в документах HTML: основное введение

Самый распространенный способ связать кнопку в документах HTML — использовать элемент кнопки HTML. Теперь, когда вы готовы и знаете все о функция гиперссылок в HTML, наконец пришло время научиться создавать кнопки ссылок.

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

– элемент кнопки

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

Обратите внимание на следующий пример:




Создание HTML-ссылок кнопок с помощью элемента Button




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

— Элемент ввода

Второй метод создания ссылки на кнопку требует использования элемента ввода HTML. Действует аналогично элементу кнопки. Однако, помимо добавления атрибутов onclick и href, вы также должны включить атрибуты type и value. Атрибут type используется, чтобы сообщить вашему браузеру, какова функция конкретного элемента ввода.

Внимательно изучите следующий синтаксис HTML :




Создание ссылок кнопок HTML с помощью элемента ввода






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

— Элемент формы

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

Обратите внимание на следующий пример:




Создание ссылок кнопок HTML с помощью элемента формы






В элементе формы вы должны использовать атрибут действия , а в элементе кнопки вы должны использовать атрибут типа. URL-адрес вашей веб-страницы добавляется в атрибут действия. Атрибут type используется, чтобы сообщить вашему браузеру, какова функция элемента кнопки.

— Атрибут Formaction

Последний метод создания ссылки HTML-кнопки, который мы собираемся рассмотреть, требует использования атрибута formaction. Вы должны включить этот атрибут в открывающий элемент HTML-кнопки. Все, что вам нужно сделать, это включить URL-адрес в этот атрибут , и синтаксис готов.

Мы собираемся включить целевой атрибут, который будет открывать связанную веб-страницу в новой вкладке, в нашем примере ниже:




Создание ссылок кнопок HTML с использованием атрибута Formaction






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

Применение свойств CSS к элементу ссылки

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

Обратите внимание на следующий синтаксис HTML и CSS :




Применение свойств CSS к элементу ссылки



ASpecificURL.com/» class=»button»> Нажмите здесь

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

Последнее, что нужно помнить

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

Если вы думали, что процесс создания ссылки HTML-кнопки был сложным, вы должны теперь понять, что дело обстоит наоборот. Эта статья доказала, объяснила и проиллюстрировала, что создать такую ​​кнопку может быть легко, поэтому обязательно попробуйте ее в своем следующем HTML-проекте.

Должность решает все

Должность решает все: ваш ресурс для изучения и создания: CSS, JavaScript, HTML, PHP, C++ и MYSQL.

Последние сообщения от Position is Everything (см. все)

Тег ссылки HTML: тег A и тег кнопки

В этой статье мы узнаем, как использовать тег ссылки HTML , тег A и кнопку на своем веб-сайте с помощью HTML5 для ссылки на другие страницы. Эта статья основана на видео, записанном Густаво , от Copahost. Рекомендуем посмотреть.

Итак, темы этой статьи:

  • Что такое тег ссылки HTML?
  • Внутренняя ссылка
  • Внешняя ссылка
  • Целевой атрибут тега ссылки HTML
  • Использование изображения в качестве ссылки
  • Тег кнопки HTML как ссылка
  • Добавление javascript для установки ссылки в HTML-теге кнопки
  • Заключение

Что такое HTML-тег ссылки?

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

Итак, это основной тег A: .

Как видите, вам придется использовать атрибут HREF в теге ссылки HTML. В атрибуте HREF вы должны разместить ссылку на страницу, на которую хотите сослаться. Атрибут HREF — это просто цель тега HTML Link. При этом вы можете ссылаться на внутреннюю страницу вашего веб-сайта или даже на внешний сайт.

Итак, в этом первом образце видео Густаво у нас есть страница с именем page.htm .

Это страница, которую мы сейчас редактируем. При этом мы поместим текст внутри ссылки.

Итак, давайте напишем пример текста, как показано ниже.

 Текст ссылки здесь

Теперь внутри атрибута HREF мы должны поместить целевую страницу, на которую будем ссылаться.

Внутренняя ссылка

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

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

 Текст ссылки здесь

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

Итак, теперь вы можете увидеть текст ссылки на странице, которая является содержимым тега A. И если вы нажмете на эту ссылку, вы будете перенаправлены на таблицы.htm, который должен быть внутренним файлом внутри вашего сайта.

С этим вы только что связались с table.htm .

Внешняя ссылка

Чтобы сделать ссылку на внешний веб-сайт, вы должны просто поместить URL-адрес веб-сайта в атрибут HREF.

Например, если вы хотите сделать ссылку на Copahost.com, вам необходимо указать полный URL-адрес в атрибуте HREF HTML-тега ссылки. Пример ниже:

  copahost.com">Текст ссылки здесь

Теперь, когда вы откроете свою страницу и нажмете на ссылку, вы будете перенаправлены на внешний веб-сайт. В этом примере — на веб-сайт CopaHost.

Атрибут target тега ссылки HTML

Внутри тега A мы можем использовать атрибут target . По целевому атрибуту вы можете указать, где открывать эту новую ссылку.

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

Для этого необходимо использовать целевой атрибут со значением _blank . Это должно быть похоже на target=_blank. То есть открыть в новой вкладке.

Итак, давайте посмотрим на пример ниже:

 Текст ссылки здесь

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

Итак, у вас будет вкладка с вашей текущей страницей, и ссылка откроется в новой вкладке в браузере.

Использование изображения в качестве ссылки

Итак, внутри HTML-тега Link мы можем использовать как текст, так и изображение. Мы также можем использовать другие элементы HTML.

До сих пор мы просто использовали текстовый формат для примера. Текст был «текст ссылки здесь». Итак, теперь вы узнаете, как изменить это изображение. Таким образом, вместо текста ссылки у вас будет изображение, ведущее на нужную страницу.

Прежде всего, вы должны стереть текст внутри тега ссылки HTML. Затем вы должны добавить тег изображения внутри тега A. Как в приведенном ниже коде:

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

Итак, когда мы нажмем на это изображение, мы перейдем на нужную страницу.

Тег кнопки HTML как ссылка

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

Итак, теперь вы должны использовать тег Button для создания кнопки. Давайте поместим текст под названием «название кнопки» внутри кнопки. Код должен быть похож на пример кода ниже:

Итак, когда вы сохраните страницу с этим кодом, у вас будет простой тег кнопки с названием кнопки «Название кнопки». Как на картинке ниже:

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

Добавление javascript для установки ссылки в тег кнопки HTML

Итак, на данный момент мы добавили атрибут onClick. Теперь вам нужно поставить « document.location », который представляет собой небольшую команду JavaScript . Как код ниже:

 <кнопка>
    Название кнопки

Теперь внутри этого document. location вы должны разместить веб-страницу или URL-адрес, на который вы хотите перенаправить. Например, давайте перенаправим на внутреннюю страницу с именем tables.htm . Пример кода ниже:

 <кнопка>
    Название кнопки

После сохранения кнопка все та же, но при нажатии на нее его команда document.location просто перенаправляет нас на эту страницу table.htm.

Вы также можете поместить туда внешний URL. Пример кода ниже:

 <кнопка>
    Название кнопки

Сейчас у нас внутри document.location вместо веб-страницы, у нас есть целый URL.

Итак, когда вы сохраняете страницу и нажимаете на кнопку, она просто перенаправляет вас на нужную страницу.

Заключение

Наконец, теперь вы знаете, как использовать HTML-тег ссылки и как HTML-ссылки работают как с тегом A, так и с тегом Button.

Ссылка на кнопку Bootstrap

Введение

Функции кнопок в сочетании с заключенными в них URL-адресами, возможно, являются одним из наиболее важных элементов, позволяющих пользователям взаимодействовать с веб-страницами, перемещаться и выполнять различные действия с одной веб-страницы на другую. Особенно в наши дни в мире мобильных устройств, когда как минимум половина веб-страниц просматривается с небольших устройств с сенсорным экраном, большие удобные прямоугольные области на экране дисплея, которые легко найти глазами и коснуться пальцем, имеют более важное значение. чем когда-либо. Именно поэтому новый фреймворк Bootstrap 4 развился, обеспечив еще более удобный опыт, отказавшись от очень маленького размера кнопки и добавив больше свободного пространства вокруг субтитров кнопки, чтобы сделать их еще более легкими и разборчивыми для работы. Небольшое прикосновение, делающее внешний вид нового примера кнопок Bootstrap более дружелюбным, — это в то же время чуть более закругленные углы, которые вместе с большим свободным пространством вокруг помогают сделать кнопки еще более приятными для глаз.

Семантические классы кнопок Bootstrap Href

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

Количество семантических классов такое же, как и в последней версии, с другой стороны, с некоторыми улучшениями — редко используемые по умолчанию кнопки Bootstrap Href, обычно не имеющие смысла, были заменены гораздо более интуитивными и тонкий стиль вторичной кнопки, так что теперь семантические классы:

Primary .btn-primary — окрашен в голубой цвет;

Info .btn-info — чуть светлее и дружелюбнее синий;

Success .btn-success старый добрый зеленый;

Предупреждение .btn-warning окрашено в оранжевый цвет;

Danger .btn-danger становится красным;

И ссылка .btn-link , которая используется для стилизации кнопки как элемента URL по умолчанию;

Просто убедитесь, что вы сначала включили основные .бтн класса непосредственно перед их нанесением.

Теги кнопок

Классы . btn созданы для использования с <кнопка> элемент. Вы также можете использовать эти классы в элементах или (хотя некоторые браузеры могут применять немного другое отображение). При использовании классов кнопок в элементах , которые используются для выполнения внутристраничных функций (таких как свертывание контента), вместо подключения к новым веб-страницам или разделам на существующей странице, этим веб-ссылкам должна быть предоставлена ​​роль = «кнопка» , чтобы эффективно передать свое назначение вспомогательным технологиям, таким как программы чтения с экрана.

 Ссылка

<тип ввода="кнопка" значение="Ввод">

Это, однако, половина практических условий, с помощью которых вы можете улучшить свои кнопки в Bootstrap 4, поскольку новая версия фреймворка дополнительно дает нам бренд новый тонкий и привлекательный способ дизайна наших кнопок, сохраняющий семантику, которую мы только что получили — процесс контура.

Процесс контура

Сплошной фон без границ удаляется и заменяется контуром вместе с текстом соответствующей окраски. Уточнить классы действительно очень просто — просто добавьте контур непосредственно перед назначением правильной семантики, например:

Outlined Primary кнопка становится .btn-outline-primary

Outlineed Secondary — .btn-outline -вторичный и так далее.

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

Замените классы модификаторов по умолчанию на .btn-outline-* , чтобы избавиться от всех фоновых рисунков и цветов на кнопках любого типа.

Больше текста

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

Размер кнопок

Напишите кнопки уровня блока — те, которые охватывают всю ширину родителя — путем добавления .btn-block .

Активный режим

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

Отключенные кнопки, использующие элемент , действуют немного иначе:

— -s не поддерживают атрибут disabled, так что вам нужно будет добавить в .disabled класс, чтобы он визуально казался отключенным.

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

— Кнопки Disabled должны включать атрибут aria-disabled="true" , чтобы указать состояние компонента вспомогательным технологиям.

 Основная ссылка
Ссылка

Предупреждение об эффективности ссылки

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

Компонент переключения

Дополнительные кнопки: флажок плюс радио

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

Имейте в виду, что кнопки с предварительной проверкой требуют, чтобы вы вручную включили класс .active во вход .

 

  <метка>
     Флажок 1 (предварительно установлен)
  
  <метка>
     Флажок 2
  
  <метка>
     Флажок 3
  
 
 

  <метка>
     Радио 1 (предварительно выбрано)
  
  <метка>
     Радио 2
  
  <метка>
     Радио 3

Методы

$().button('toggle') — переключает статус отправки. Придает кнопке вид, что она включена.

Заключительные мысли

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

No related posts.