Html переход на страницу по нажатию кнопки. Как создать кнопку HTML, которая действует как ссылка
Вы используете его, хм … ну, когда хотите разместить на странице кнопку, по которой пользователь может кликнуть, не так ли? К сожалению, все немного сложнее. В принципе это близко к истине, но давайте изучим вопрос глубже.
Сам элемент выглядит таким образом:
Сделать что-нибудь
Что является самым распространенным результатом клика на что-нибудь на веб-сайте? Переход на новый URL-адрес, как если бы вы нажали ссылку (элемент ).
Элемент сам по себе, не может этого сделать. Было много разговоров о том, чтобы разрешить «href везде », но ничего из этого так и не вышло.
При нажатии на кнопку действительно производятся определенные действия, если используется соответствующий контекст…
Кнопка – это элемент формыВеб-формы могут содержать кнопки для выполнения (подтверждения) действий. Вы можете подумать, что это выглядит приблизительно так:
Элемент в оболочке , по умолчанию, ведет себя именно так, как и показано выше.
Submit
Однако формы также могут иметь кнопки отмены. Вы можете дублировать вид действия кнопки, изменив поведение по умолчанию с выполнения (подтверждения) действия на отмену:
Reset
Нажатие на эту кнопку приведет к удалению всех других полей ввода (и текстовых областей) из родительского блока .
Кнопки могут содержать контентОсновной причиной использования элемента является то, что он содержит и открывающийся, и закрывающийся теги (). А это значит, что его можно разграничить с любым другим кодом. На практике часто возникает такая ситуация:
Подтвердить
Пока будет сохраняться, этот смешанный контент будет отображаться на экране.
Насколько я могу судить, не существует особых ограничений относительно того, что вы можете разместить внутри кнопки, так что вы можете поместить туда что угодно, создав действительно причудливые кнопки. Возможно использование также и псевдо элементов.
Давайте оставим пока тему стилей для , хотя разные браузеры обычно имеют специальные стили, которые применяются к кнопкам. Если захотите, вы можете оставить стили, применяемые браузерами, или же полностью удалить их, и тогда ваш стиль по умолчанию будет заменять стили браузеров.
Учтите: «если кнопка не имеет валидного href, это просто элемент »Помните, раньше я писал, что эта тема доставляет мне истинное наслаждение . Это то, что вдохновило меня на написание данной статьи. Я представлял себе, какое удовольствие получу, рассматривая различные казусы. Как, например:
Меня уже достали такие кнопки.
Скорее всего, выше приведенный код означает что-то типа: Я собираюсь кликнуть кнопку, чтобы сделать что-то с JavaScript. Так или иначе, это, кажется, лучше, чем использовать обычный , потому что вы получаете возможность изменения вида курсора и все остальные стили по умолчанию.
Вне я бесполезна.
Однако все равно, кажется, лучшеДаже если ничего не делает, находясь за пределами , этот элемент все равно, по-моему, лучше использовать для прочих действий, которые не требуют перехода на другую страницу. Во всяком случае, они лучше, чем фиктивные ссылки.
Хорошо. Давайте вставим JavaScriptЭто, наверное, лучшее решение. Если JavaScript требуется для любых действий связанных с кликами, то для элемента в принципе можно обходиться и без запуска JS.
Но мы можем сделать следующее:
// 1. Создаем кнопку var button = document.createElement("button"); button.innerHTML = "Do Something"; // 2. Размещаем ее var body = document.getElementsByTagName("body"); body.appendChild(button); // 3. Добавляем обработку действия button.addEventListener ("click", function() { alert("did something"); });
Вы можете легко сделать «кнопку добавления » частью рабочего процесса JavaScript.
Когда целесообразнее использовать ссылкиЕсли у вас есть какие-нибудь гипертекстовые переходы на другие страницы, то целесообразнее оформлять их ссылкой, чтобы можно было использовать анкор. Даже если вы переназначаете ее поведение через JavaScript.
Это прогрессивное улучшение в лучшем его применении. Например:
- Кнопка поиска обычно порождает запуск поисковых сценариев Ajax — в то время как ссылка просто может указывать на страницу поиска;
- Кнопка «опубликовать » запускает следующий шаг публикации чего-то, что нужно пользователю — но ссылка может просто вести на страницу / опубликовать /;
- Кнопка с миниатюрой изображения открывает отдельную панель, на которой выводится изображение в большем размере — а ссылка может просто указывать URL-адрес этого увеличенного изображения.
Если ничего больше не подходит, вставляйте кнопку с JavaScript.
Связанные проблемыУ вас может получиться что-то похожее на то, что получилось у меня!
Я в порядке
Но вы сами еще не совсем в порядке. MDN подробно рассматривает данную проблему :
Обратите внимание: Будьте осторожны при разметке ссылок с функциями кнопки. Действия кнопки, как правило, вызываются с помощью клавиши «Пробел », в то время как действия ссылок вызываются через клавишу Enter.
Также необходимо будет добавить ключ обработчика действий, который будет реагировать на нажатие клавиши «Пробел », чтобы обеспечить соответствие с оригинальной кнопкой.
Ну что ж, на этом все. И хм… делайте интерактивные вещи правильно.
Перевод статьи «When To Use The Button Element » был подготовлен дружной командой проекта .
Поддержка браузерами возможностей CSS3 и в связи с этим активное использование в веб-дизайне градиентов, теней и скруглений привело к тому, что стала размываться чёткая грань между встроенными элементами интерфейса и «нарисованными». На деле пользователю должно быть всё равно, что перед ним, ссылка или кнопка, пусть даже они выглядят абсолютно одинаково, ведь на то и другое можно щёлкнуть. В действительности же, неверное использование одного элемента взамен другого может привести к нарушению понимания логики сайта. Иными словами, посетителю сайта пользоваться им станет неудобно и некомфортно.
Давайте сделаем ссылку и кнопку, оформим их одинаково и посмотрим, чем же они различаются между собой кроме оформления. В примере 1 я вставил в код тег и и применил к ним стилевой класс design , при этом постарался убрать различия, чтобы эти два элемента выглядели похожими друг на друга как близнецы.
Пример 1. Оформление элементов
HTML5 CSS3 IE Cr Op Sa Fx
Ссылка и кнопка .design { display: inline-block; /* Строчно-блочный элемент */ padding: 5px 20px; /* Добавляем поля */ text-decoration: none; /* Убираем подчёркивание у ссылки */ cursor: pointer; /* Курсор в виде руки */ background: #deefff; /* Фон для браузеров, не поддерживающих градиент */ /* Градиент */ background: -moz-linear-gradient(top, #deefff 0%, #98bede 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#deefff), color-stop(100%,#98bede)); background: -webkit-linear-gradient(top, #deefff 0%,#98bede 100%); background: -o-linear-gradient(top, #deefff 0%,#98bede 100%); background: -ms-linear-gradient(top, #deefff 0%,#98bede 100%); background: linear-gradient(top, #deefff 0%,#98bede 100%); border-radius: 10px; /* Скругляем уголки */ border: 1px solid #008; /* Добавляем синюю рамку */ font: 12px/1 Arial, sans-serif; /* Рубленый шрифт */ color: #2c539e; /* Цвет текста и ссылки */ }
Вот как это выглядит в браузере Chrome (рис. 1).
Разницы на первый взгляд нет. Оба элемента одинаковы, при наведении на них курсора мыши он превращается в «руку». Можно щёлкать и ждать ответного гудка. Вот тут как раз и начинаются мелочи, в которых кроется дьявол. Систематизирую различия в мелочах.
- в статусной строке браузер показывает адрес ссылки, на которую она ведёт;
- ссылку можно открыть в новом окне или вкладке средней кнопкой мыши;
- ссылку можно сохранить через контекстное меню браузера.
- при щелчке по кнопке происходит переход к странице, заданной внутри атрибута action тега . Разумеется, это срабатывает, если у нас кнопка вложена в форму. В примере выше можно хоть защёлкать кнопку, ни к чему это не приведёт;
- на кнопку можно навесить функцию JavaScript, которая будет делать что-нибудь фееричное, чего не может ссылка.
Получается, что результат нажатия на кнопку непредсказуем, в отличие от ссылки. Здесь то мы точно знаем, что откроется новая страница. В случае с кнопкой может открыться новая страница или выполниться скрипт или вообще ничего не произойдёт. К тому же между кнопкой и ссылкой происходит путаница. Наша сверхстильная кнопка не очень похожа на саму себя, и чтобы показать, что на неё можно щёлкнуть, в стилях добавляется свойство cursor со значением pointer. Но это приводит к тому, что теперь кнопка воспринимается как ссылка и некоторые пользователи пытаются открыть такую кнопку в новой вкладке, а это, конечно, невыполнимо.
Что можно сделать для устранения этого противоречия. Вариантов несколько.
Текст с пунктиром показан на рис. 2. Для наглядности несколько увеличил размер шрифта.
Рис. 2. Кнопка с пунктирным подчёркиванием текста
Опять же, если при щелчке по кнопке открывается другая страница, пунктир не нужен, поскольку будет сбивать пользователей с толку. Так что способ 2 подходит только для скриптов, выполняющих какую-то работу в пределах одной страницы.
Существует два подхода к созданию кнопки на сайте в виде ссылки. Рассмотрим подробно каждый из них.
1. Кнопка в виде изображенияЭто самый простой подход к созданию кнопки в виде ссылки на сайте. Для этого Вам понадобится всего лишь найти подходящую картинку для кнопки. Например, картинка с Вашей кнопкой называется button.jpg . Тогда, для создания ссылки код должен быть следующим:
...Вот во что он превращается на странице сайта:
Это самый элементарный вариант. Советую прочитать про тег и тег , чтобы настроить кнопку именно под Ваши требования.
Кстати, для создания изображений для кнопок есть специальный сайт: http://dabuttonfactory.com/ . Здесь можно бесплатно создать кнопку по Вашему вкусу (задать стиль, выбрать изображение, написать подходящий текст и т.п.).
2. Кнопка с помощью HTML тегаЭтот вариант также является одним из методов создания кнопки в виде ссылки. Приведу элементарный пример кнопки созданной с помощью тега и :
... ...Вот как это примерно будет выглядеть на странице:
Вместо URL1 и URL2 надо написать адреса страниц, куда необходимо осуществить переход. Если Вы хотите, чтобы ссылки открывались в новых вкладках (аналог атрибута target="_blank" у тега a), то вместо onclick="javascript:window.location="..."" нужно прописать onclick="javascript:window.open="..."" (заменить location на open).
Я почти уверен, что Вам захочется оформить кнопку как-то по другому (под дизайн своего сайта). Для этого введем класс btn:
.btn { //Задание общего стиля для кнопки height :30px ; border-color :#c2e254 #9bb838 #9bb838 #c2e254 ; border-style :solid ; border-width :1px ; background :#c2e254 ; cursor :pointer ; } .btn:hover { //Стиль кнопки при новедении на него курсора border-color :#FFCC66 #FFFF99 #FFFF99 #FFCC66 ; border-style :solid ; border-width :1px ; background :#FFFF99 ; } .btn:focus { //Стиль кнопки, когда она в фокусе background :#ddd ; border-color :#ddd #333 #333 #ddd ; border-style :solid ; border-width :1px ; } .btn:active { //Стиль кнопки при нажатии background :#ff0000 ; border-color :#ddd #333 #333 #ddd ; border-style :solid ; border-width :1px ; }После этого кнопка будет выглядеть следующим образом на странице.
Непосредственно кнопку нельзя сделать ссылкой, HTML запрещает комбинировать между собой элементы (а также ) и . Таким образом нельзя вкладывать кнопку в ссылку, а ссылку в кнопку. Есть три способа, как сделать так, чтобы при щелчке по кнопке происходило открытие веб-страницы.
Использование HTMLКнопку вкладываем внутрь элемента и для формы указываем атрибут action с адресом веб-страницы (пример 1). Дополнительно можно добавить атрибут target со значением _blank , тогда веб-страница откроется в новой вкладке браузера.
Пример 1. Атрибут action
Кнопка Переход по ссылке
В этом примере при щелчке по кнопке открывается веб-страница new.html в новой вкладке.
Одну форму нельзя вкладывать внутрь другой. Перед добавлением кнопки убедитесь что у вас только одна форма.
Использование CSSРаз кнопку нельзя сделать ссылкой, то вообще отказываемся от и стилизуем ссылку, чтобы она стала похожа на кнопку. В примере 2 показан класс btn , при добавлении его к элементу ссылка меняет своё оформление.
Кнопка .btn { display: inline-block; /* Строчно-блочный элемент */ background: #8C959D; /* Серый цвет фона */ color: #fff; /* Белый цвет текста */ padding: 1rem 1.5rem; /* Поля вокруг текста */ text-decoration: none; /* Убираем подчёркивание */ border-radius: 3px; /* Скругляем уголки */ } Переход по ссылке
Результат данного примера показан на рис. 1.
Использование JavaScriptДля перехода к указанной веб-странице можно воспользоваться событием onclick , добавляя его к элементу . Внутри onclick пишем document.location , а в качестве значения адрес желаемой веб-страницы (пример 3). Обратите внимание на комбинацию кавычек, адрес веб-страницы берётся в одинарные кавычки.
