Как сделать ссылку кнопку или кнопку ссылку на HTML? По 3 способа!
Доброго времени суток! Каждый веб мастер задавался вопросом как же сделать кнопку по клику на которую человек сразу перейдет по нужному адресу. Простая ссылка » Ссылка» выглядит не красиво, и не всегда подходит по дизайну вашего сайта. Так же иногда возникает необходимость сделать обратное. Из обычной кнопки, сделать аналог ссылки, по клику на которой будет происходить переход по нужному адресу.
Для данных задач, как всегда, существует несколько возможных решений. Давайте разберем несколько из них.
Как сделать ссылку кнопкой
Первый способ
Сделать обычную ссылку, визуально похожей на кнопку, можно с помощью написания своих стилей CSS.
Итак, создаем обычную ссылку. И указываем адрес к нашим стилям, которые напишем чуть-чуть ниже.
А вот и они, виновники нашей победы над текстовой ссылкой, стили. Они преобразуют ее в кнопку.
Таким способом мы заменили все ссылки на странице на кнопки.
Второй способ
Этот способ достаточно банален и прост. Скорее всего именно так вы и хотели сделать такую кнопку изначально. Просто оберните картинку кнопки тегом » «!
Правда, теперь, если вы захотите сменить текст, вам придется нарисовать кнопку заново. Плюс, такая кнопка занимает больше места, трафика и времени загрузки страницы. Такой способ можно использовать для создания сложных кнопок, таких, которые невозможно сделать стилями CSS.
Третий способ
Этот способ практический такой же как и первый, за исключением того, что в первом методе мы использовали стили кнопок «по умолчанию«, сейчас же мы нарисуем свою кнопку «с блэк джеком и контуром!«.
.ssilka< border:1px solid #ccc; /*рамка*/ background:#eaeaea; /*фон*/ padding: 10px 10px; /*отступы внутри*/ text-decoration: none; /*убрать подчеркивание ссылки*/ >
Выглядеть такая ссылка будет как вам захочется. Нужно только придумать и написать стиль для нее. Текст меняется легко и не загромождает html код. Так-же, такая ссылка будет индивидуальной в отличие от первого способа, где заменялись все ссылки.
Как сделать кнопку ссылкой
Для обратной задачи, так-же существует несколько способов, которые мы рассмотрим далее в статье. Такая ситуация может возникнуть, если вы захотите использовать кнопку отдельно от формы, например что бы перенаправить пользователя на другую страницу. Можно сделать так чтоб кнопка выглядела как обычная кнопка, а вела себя как ссылка, а можно вообще перерисовать ее с учетом любых стилей.
Первый способ
Для того что-бы кнопка вела себя как ссылка, можно создать для нее форму, а внутри разместить одну лишь кнопку.
Второй способ
Тут мы уже задействуем магию JavaScript! Для этого, создадим функцию, которая будет перенаправлять пользователя куда нам нужно. И сделаем это так, чтоб можно было использовать эту функцию быстро и удобно в будущем.
function GoUrl(url) Что-бы воспользоваться функцией нужно лишь прописать свойство onClick для любой кнопки.
Третий способ
Этот способ очень похож на второй, однако используется немного по другому. Отдельный JS код нам не понадобиться
Итоги
Как и всегда, несколько способов делают почти одно и тоже. Каким будите пользоваться именно вы, решать вам. Если остались какие-то вопросы, можно задать их в комментариях на сайте. Удачи!
Ссылка как кнопка
Сделайте ссылку, которая при наведении на неё курсора мыши меняла свой вид, как показано на рис. 1. Вверху показана исходная ссылка, внизу ссылка после наведения курсора.
Ссылка Статьи по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные задачи
- TEX
- Отступы между блоков
- Андроид в тени
- Ссылка как кнопка
- Вложенные списки
- Форма регистрации
- Объединение ячеек таблицы
- Обязательные поля формы
- Цвет и фон в таблице
- Асуанская плотина
- Батарейка
- Заголовки
О сайте
Основные разделы
HTML
CSS
Сайт
© 2002–2023 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru
Как сделать кнопку на сайте ссылкой
Существует два подхода к созданию кнопки на сайте в виде ссылки. Рассмотрим подробно каждый из них.
1. Кнопка в виде изображения
Это самый простой подход к созданию кнопки в виде ссылки на сайте. Для этого Вам понадобится всего лишь найти подходящую картинку для кнопки. Например, картинка с Вашей кнопкой называется button.jpg . Тогда, для создания ссылки код должен быть следующим:
body> . a href value">URL">img src value">button.jpg">a> . body>
Вот во что он превращается на странице сайта:
Кстати, для создания изображений для кнопок есть специальный сайт: http://dabuttonfactory.com/. Здесь можно бесплатно создать кнопку по Вашему вкусу (задать стиль, выбрать изображение, написать подходящий текст и т.п.).
2. Кнопка с помощью HTML тега
Этот вариант также является одним из методов создания кнопки в виде ссылки. Приведу элементарный пример кнопки созданной с помощью тега и :
body> . form> input type value">button" value value">Просто кнопка" onclick js">javascript:window.location='URL1'"/> input type value">button" value value">Ещё одна кнопка" onclick js">javascript:window.location='URL2'"/> form> . body>
Вот как это примерно будет выглядеть на странице:
Вместо URL1 и URL2 надо написать адреса страниц, куда необходимо осуществить переход. Если Вы хотите, чтобы ссылки открывались в новых вкладках (аналог атрибута target=»_blank» у тега a), то вместо onclick=»javascript:window.location=’. ‘» нужно прописать onclick=»javascript:window.open=’. ‘» (заменить location на open).
Я почти уверен, что Вам захочется оформить кнопку как-то по другому (под дизайн своего сайта). Для этого введем класс btn:
head> style> .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; > style> head> body> form> input type value">button" value value">Просто кнопка" class value">btn" onclick js">javascript:window.location='URL1'"/> input type value">button" value value">Ещё одна кнопка" class value">btn" onclick js">javascript:window.location='URL2'"/> form> body>
После этого кнопка будет выглядеть следующим образом на странице:
Мы разобрали 2 подхода к решению задачи создания кнопки на сайте. Обычно все используют первый подход, поскольку заморачиваться с input никто не хочет. Более подробно об стилях можно прочитать в статье: тег .
Что лучше использовать: ссылки или кнопки
При вёрстке макета не всегда понятно, что перед нами — кнопка или ссылка. Внешне эти элементы могут быть очень похожи, но их функции различаются и браузер реагирует на них по-разному. Поэтому неправильный выбор может привести к ошибкам в работе веб-страницы.
Почему возникает проблема
Ссылка — это элемент навигации. Обычно она представляет собой текст, нажимая на который, пользователь переходит на другую страницу или перемещается к другому месту на текущей странице. То есть ссылка отвечает за взаимосвязь веб-ресурсов или разделов одного ресурса.
Ссылки создаются с помощью тега .
Кнопка — это функциональный элемент. Она отвечает за выполнение определённой функции: добавить в корзину, купить, отправить, проголосовать и т. д.
Для кнопок используют тег .
Проблемы возникают, когда внешне кнопка очень похожа на ссылку — текст без плашки, или ссылка напоминает кнопку — текст расположен на фоне прямоугольной плашки.
Что случится, если вместо ссылки сделать кнопку
Если URL-адрес обернуть не , а тегом , то при нажатии пользователя на правую кнопку мыши браузер предложит выполнить действия, которые положены при клике на кнопку. Адрес нельзя будет открыть в новой вкладке или отправить через контекстное меню.
Такая кнопка не позволит открыть страницу в новой вкладке и через комбинацию клавиш — Ctrl и левая кнопка мыши.
При наведении курсора на правильную ссылку её адрес появляется внизу окна браузера. URL-адрес, обёрнутый в , не отобразится.
Что произойдёт, если вместо кнопки сделать ссылку
При нажатии пользователем на ссылку правой кнопкой мыши браузер предлагает действия, которые можно совершить именно со ссылкой:
При наведении курсора на псевдоссылку внизу окна браузера появится не адрес, а javascript:; или АдресТекущейСтраницы/# .
Как определить элемент по макету
Конкретные указания часто прописывают в техническом задании к макету. В стайлгайде самого макета можно посмотреть состояния элемента.
У ссылки должны быть стили для состояния покоя, при наведения курсора :hover , в момент нажатия :focus , активного :active и иногда состояния, когда пользователь уже посещал эту страницу :visited .
У кнопки нет состояния :visited , зато есть состояние блока :disabled .
Однако рассчитывать только на макет не нужно. У ссылки может не быть :visited , а у блока :disabled — это может запутать.
Всё-таки кнопка или ссылка
Если дизайнер по каким-то причинам не отрисовал состояния вообще, то придётся руководствоваться одной логикой.
Ссылка
Кнопка
За что отвечает
Навигация, т. е. пользователь перемещается на другую часть страницы или на новую страницу.
Выполнение какой-либо функции без перехода на другую страницу — добавить в корзину, купить, отправить, проголосовать, войти и т. д.
Что видит пользователь
• При наведении курсора на ссылку внизу окна браузера возникает её адрес.
• Через меню по клику правой кнопкой мыши можно скопировать, отправить, открыть ссылку в новой вкладке.
• При наведении курсора на ссылку внизу окна браузера не отображается адрес.
• Через меню по клику правой кнопкой мыши нельзя скопировать адрес или поделиться им.
Пример
На макете отрисована фраза «Войти». Если клик по ней должен открывать окно для ввода регистрационных данных на этой же странице, это кнопка. Если при нажатии должна открываться отдельная страница для входа, это ссылка.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Знакомство с HTML
Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.
Что такое HTML?
HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.
Основы разметки
Всё начинается с тегов. Тег — это элемент языка разметки, который определяет, какой тип содержимого будет представлен.
Теги обычно идут парами: открывающий тег
Мой заголовок
Это мой первый абзац. Привет, мир!
Некоторые теги можно не закрывать:
Теги и атрибуты
У тегов могут быть атрибуты. Это дополнительные характеристики, которые помогают определить свойства элемента. Например, у тега атрибут src указывает путь к изображению:
Атрибут alt описывает изображение, это полезно, если изображение не загрузится или для программ чтения экрана.
Формы и элементы форм
Формы используются для сбора данных от пользователей. Например, когда вы вводите что-то в поисковой строке или заполняете регистрационную форму.
- — это тег формы.
- action — куда отправляются данные.
- method — метод отправки (обычно get или post ).
- — поле для ввода данных. Тип text означает текстовое поле.
- — метка для поля ввода.
Списки в HTML
Списки позволяют нам организовывать данные в упорядоченном (нумерованном) или неупорядоченном (с маркерами) виде.
Упорядоченные списки создаются с помощью тегов (ordered list) и (list item):
- Первый элемент списка
- Второй элемент списка
- Третий элемент списка
- Элемент списка с маркером
- Еще один элемент с маркером
Ссылки и навигация
Чтобы ваши пользователи могли переходить от одной страницы к другой, используются ссылки. Тег для создания ссылки — , атрибут href указывает на адрес, куда должна вести ссылка:
Таблицы
Имя Возраст Джон 30 Элис 25
Использование изображений
Семантическая разметка
Семантическая разметка важна для доступности и SEO. Это использование элементов HTML по их предназначению, например:
Заголовок статьи
Первый абзац статьи.
Это основы, которые сформируют крепкий фундамент для начала работы с HTML. Следующий шаг — погружение в CSS, чтобы оживить и улучшить визуальную составляющую ваших веб-страниц. Но об этом — в нашей следующей статье. Стройте свои веб-страницы с удовольствием и не бойтесь экспериментировать! ��
- 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
Как правильно вставлять SVG
Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.
SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.
В растровых форматах информация о конкретном числе точек изображения плотно упакована в бинарный кирпич. В него бесполезно заглядывать и менять его можно только в редакторах графики.
�PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~ Формат SVG тоже можно создавать и менять в редакторах графики, например, в Illustrator или Figma. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.
SVG — это как отдельная HTML-страница. Когда вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.
Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен.
- 1 июня 2023
Как сделать весь блок ссылкой?
Нашел пожалуй самое простое решение — сделать display: block для ссылки и все! 🙂 В этом случае блок и ссылка совмещаются в одном элементе, проблема решена.
21 фев 2013 в 14:16
Это класcика, особенно если верстаешь меню и элементам списка делаешь float, а ссылкам display:block.
21 фев 2013 в 14:53
div .mydiv:hover ? в css
$(«div.mydiv).click() ? в js
Отслеживать
ответ дан 21 фев 2013 в 13:15
7,418 17 17 серебряных знаков 22 22 бронзовых знака
Спасибо. На hover реагирует, ссылки пока нет. Js, это куда ставить?
21 фев 2013 в 13:54
куда-нибудь в страничку, не? 🙂 я телепатию в школе не прощожил, уж извините)
21 фев 2013 в 13:59
Просто меняешь DIV на A со стилем display:block
. .my-block < display: block; >.my-block:hover
Отслеживать
371 1 1 золотой знак 5 5 серебряных знаков 13 13 бронзовых знаков
ответ дан 21 фев 2013 в 15:28
854 4 4 серебряных знака 8 8 бронзовых знаков
var target='.block'; jQuery(target).each(function()< jQuery(this).click(function()< location = jQuery(this).find('a').attr('href');>); jQuery(this).css('cursor','pointer'); >); Отслеживать
ответ дан 25 фев 2013 в 12:58
756 3 3 золотых знака 17 17 серебряных знаков 41 41 бронзовый знак
HTML:
CSS:
div.content < display: block; overflow: hidden; background-color: #ccc; width: 200px; height:200px; border: 1px solid #000; >div.content > a < display: block; width: 100%; height: 100%; overflow: hidden; text-decoration: none; >div.content > a div < display: block; overflow: hidden; width: 100%; height: 100%; color: #543454; >div.content > a div p
Отслеживать
ответ дан 22 сен 2016 в 14:57
621 4 4 серебряных знака 14 14 бронзовых знаков
- html
- css
- вёрстка
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как кнопку сделать ссылкой html и css
Но рассмотрим ее ближе, так сказать в ручной сборке, что изначально поймем под какую функцию она заточена, и что при улике будет выполнять. Это может быть как переход на другую страницу или совершенно другую площадку. И также она выполняет работу по скачиванию материалов, то есть архива с ним.
Как правильно вставить ссылку в HTML
И начнем с простой ссылки перехода, что работает на атрибуте и безусловно с указанием в ссылке адреса, куда будет осуществляться сам переход, где только срабатывает при нажатие клика.
Здесь задействован атрибут href, что как раз будет задавать направление перехода для тега где также можно применить совершенно разные атрибуты.
1 . download — что отвечает за указание на файл под скачивание файла, архива и другое.
2 . name – тот самый якорь.
3 . title — это когда наводит клик и появляется подсказка, что за ранее была прописана при установке.
4 . accesskey — здесь происходит активация ссылки, что срабатывает при комбинации заданных клавиш.
5 . coords – выставляет координаты, что прописаны в активной области.
6 . hreflang – распознает язык текста по установленной ссылки.
7 . rel — здесь идет соотношение между теми ссылками, что прописаны текущим документами.
8 . rev — производится соотношение между текущим и куда будет ссылаться документ.
9 shape — отвечает за указание формы области ссылки на картину или изображение.
10 . tabindex — Будет происходить указанная последовательность переключения между поставленными ссылками при клике на клавишу Tab.
11 . target — показание окна, где будет сохранен скаченный файл при выборе.
12 . type — тип или название документа, куда происходит переход.
Как сделать открытие ссылки в новой вкладке
Для того, что открылась при переходе новая страница и не терять страницу с которой перешли, то здесь ставим target и также с атрибутом _blank срабатывает.
Пример HTML-кода ссылки на открытие новой страницы.
Есть такая тема перелинковка, что вы замечали в разных статьях, где под ссылку ставят ключевые слова, здесь устанавливаем.
Она же трастовая ссылка:
Некоторые ставят на демонстрацию материала, здесь можно вписать такой тип, с кнопкой, где возможно написано DEMO или ставится изображение, и по клику на его происходит переход.
Как сделать ссылку на скачивание файла, архива
Есть тематические порталы, где обязательно нужно скачать файл, что под эту функцию иде совершенна отличающее ссылка от других, котороя будет вызывать окно, где вам предложат, в каком месте сохранить скаченный файл.
Когда вы сделаете клик, то автоматически появится окно, где можете нажать обзор и выбрать папку, куда скачать и припарковать архив. Или просто выставить на «Сохранить файл» что автоматически на рабочий стол, начнет вкачиваться.
Как сделать из ссылки кнопку с эффектом
Безусловно самым лучшим оформлением под ссылку идет оформление кнопки, это задействуем CSS при создание.
Так будет идти HTML-код под ссылку:
Такая кнопка получится.
Это по умолчанию:
Здесь уже задаем палитру цвета в hover — где только срабатывает при наведение.
Как сделать кнопку ссылкой
Оформлять ссылку как стандартную кнопку нежелательно: ссылка по определению указывает на ресурс, а нажатие кнопки обычно инициирует действие. Но если задача возникла, имеет смысл хотя бы решать её правильно.
Правильно
Синтаксически корректное («валидное») и кроссбраузерное решение — заключить кнопку в простейшую форму. В атрибут action формы следует поместить URL-адрес, на который должна вести «кнопка-ссылка». Для работы формы в устаревших браузерах (IE8 и ниже) следует добавить кнопке атрибут type=»submit» :
«Кнопка-ссылка» в примере ведёт на страницу с адресом /example/ .
Если требуется открывать ссылку в новом окне или фрейме, можно, как и у обычных ссылок, использовать атрибут target элемента FORM :
Строка запроса
Строка запроса — часть URL-адреса после первого вопросительного знака, содержащая GET-параметры в виде пар name=value ( имя=значение ), разделённых символом & .
Если адрес, на который должна указывать ссылка, содержит строку запроса, следует для каждого GET-параметра добавить в форму скрытое поле с соответствующими атрибутами name и value :
Данная форма ведёт на страницу /example/?foo=bar&lorem=ipsum .
Chromium/Blink и WebKit
В браузерах на основе движков Chromium / Blink (Chrome, Opera 15+, Яндекс.Браузер, Vivaldi) и WebKit (Safari) есть ошибка (баг) (1, 2): вопросительный знак, отделяющий строку запроса от основной части адреса, добавляется к адресу даже при отсутствии полей в форме. Поэтому, например, форма:
приведёт на адрес /example/? вместо ожидаемого /example/ .
Кент Тамура (Kent Tamura) из команды разработчиков Chromium говорит, что это соответствует текущим спецификациям HTML и URL.
Обойти это можно с помощью автоматического серверного перенаправления (редиректа) с адреса, оканчивающегося вопросительным знаком, на такой же адрес без воспросительного знака.
Ограничения по сравнению с реальной ссылкой
- У пользователя нет возможности узнать, куда ведёт ссылка-кнопка, до щелчка по ней.
- Пользователь не может по своему желанию открыть ссылку-кнопку в новой вкладке или в новом окне.
Неправильно
Кнопка внутри ссылки
Нередко элемент BUTTON просто помещают внутрь ссылки:
Это работает во всех современных браузерах, но согласно HTML5 это синтаксически некорректно («невалидно»): ссылка не должна содержать интерактивные элементы. Кроме того, такая ссылка не работает в Internet Explorer (IE) ниже 9-й версии.
Кнопка с JS-обработчиком щелчка
Порой используется кнопка с JavaScript-обработчиком события щелчка:
Но такая кнопка не работает при выключенном JavaScript, её невозможно открыть в новой вкладке или новом окне, и возможны проблемы с индексацией поисковиками, не исполняющими JavaScript-код.
Программа для масштабирования игр без размытия
Нестандартные расширения CSS
Описанные ниже возможности нестандартные, и использовать их не рекомендуется.
Firefox и Chromium
Firefox версий 81 и ниже и браузеры на основе движка Chromium (Chrome, Opera 15+, Vivaldi, Яндекс.Браузер) прошлых версий поддерживали нестандартные префиксированные варианты свойства appearance , значение button которых позволяло оформить как кнопку произвольный элемент, в том числе ссылку:
Internet Explorer, Edge и спецификация
В браузерах Microsoft — Internet Explorer (IE) и Edge — возможность недоступна. В спецификации CSS Basic User Interface Module Level 4 значение button свойства appearance не предусмотрено.
Чего только не придумают… �� Хотя вот ссылка кнопкой — это на каждом шагу буквально встречается.
Марат, очень помогла ваша статья. Огромное спасибо!
Это самый грамотный и актуальный на сегодня ответ в интернете, который мне удалось найти.
Продолжите, пожалуйста, тему — «Правильный способ сделать картинку ссылкой» (1 вариант — только HTML; 2 вариант — CSS; …). В сети масса устаревших и в корне неверных рекомендаций — кто на что горазд…
И еще один вопрос-просьба. По адресу http://api.yandex.ru/share/ Яндекс раздает невалидный код. На недоуменные вопросы в клубе разработчиков (http://clubs.ya.ru/share/) отвечают: «А зачем вам эта валидность?» Не могли бы Вы исправить их код?
Есть и у этого способа подводные камни. Вот такие вот штуки ( http://s020.radikal.ru/i720/1311/34/bfe7beda17fe.jpg ) при использовании кнопок предыдущей и следующей страницы. Мешается ужасно. Как обойти непонятно.
Никита, если вы о подтверждении, запрашиваемом браузером при попытке обновить страницу (или вернуться на неё по браузерной истории), загруженную в результате отправки формы, то это имеет место только в отношении форм, отправляемых методом POST (когда данные отправляются отдельным HTTP-пакетом).
В данной же заметке описывается отправка форм методом GET (когда данные передаются непосредственно в URL-адресе страницы-адресата в виде пар имя=значение , добавляемых после вопросительного знака к адресу, указанному в атрибуте action формы), и соответствующие страницы пользователь может беспрепятственно обновлять или возвращаться на них без каких-либо запросов на подтверждение от браузера.
Спасибо большое за информацию. У меня есть один «дурацкий» вопрос :-). Почему при размещении 2 и более кнопок на одной странице (с разными url адресами) все они работают в одном направлении?
Наташа, скорее всего, в вашем HTML-коде есть ошибки (например, у первой из двух форм отсутствует закрывающий тег
). На всякий случай обратите внимание, что каждую кнопку-ссылку следует заключать в собственную форму, при этом формы не должны быть вложенными друг в друга.
В общем случае при любых странных проблемах полезно проверять код HTML-страницы валидатором.
Спасибо, мне следовало быть более внимательной. И за Валидатор отдельное спасибо )))
Весь интернет перерыл пока искал! спасибо мне очень помогло! и ошибок никаких нет в браузерах.
Не работает на движок OpenCart 2.0.2
if ($qPos === strlen($uri) — 1)
?>
Может у вас есть код для .htaccess ?
как привязать код возврата на предыдущую страницу
к кнопке?
код кнопки:
За ранее спасибо.
Den, в вашем случае ссылка функционально не является ссылкой (указывает на фиктивный пустой якорь # и существует только для исполнения JS-кода при щелчке), поэтому можно просто заменить элемент A на элемент BUTTON , сохранив прежний onclick -обработчик.
Но в общем случае использование JavaScript для реализации ссылки на предыдущую страницу нежелательно, т. к. :
- JS может быть выключен в браузере пользователя, и тогда такая ссылка работать не будет, запутывая пользователя;
- пользователь может попадать на одну и ту же страницу с разных страниц вашего сайта (тогда ссылка «Назад» будет всегда указывать на разные страницы), со страницы другого сайта (тогда предыдущий пункт в истории браузера будет указывать на страницу другого сайта — например, поисковика) или отсутствовать вообще (если страница открыта из закладок браузера, и тогда JS-ссылка «Назад» работать не будет).
При необходимости URL-адрес предыдущей страницы имеет смысл вставлять в ссылку явным образом на серверной стороне, а лучше — воздержаться от дублирования встроенной функциональности браузера.
Логично. Спасибо за быстрый ответ. Буду искать другой путь
Спасибо, что просветили! Я тоже сначала сделал не правильно.
ИМХО правильный способ кнопку все таки ссылкой не делать, а просто визуализировать ссылку в виде кнопки:
С цветами и стилями только сами поиграйтесь, а то тут какой то ужас стоит ��
anstrem, такая кнопка будет отличаться внешне от системных кнопок, имеющих оформление, родное (native) для операционной системы.
В html5 , по-моему, можно оформить кнопку-ссылку проще :
и не мучиться с настройкой редиректа
Галина, такая кнопка не будет работать при выключенном JavaScript.
Кстати, ссылка на главную страницу не должна указывать на файл.
Спасибо за подробное описание!
Но у меня не получилось.
Вот код (это популярная в сети кнопка)
Guess Who?
Was born Agnes Gonxha Bojaxhiu.
Что не делаю, все равно код невалидный.
Андрей, скорее всего, JS-логика, привязанная к такой кнопке, зависит от конкретной, заранее определённой HTML-структуры, и с этим ничего не поделать. Для полной уверенности можно попробовать заменить обрамляющую ссылку на форму с тем же атрибутом data-path-hover — если не заработает (скорее всего), то ветер с моря дул не судьба.
Скажите пожалуйста, а можно ли в этой форме кнопки поменять цвет кнопки и шрифта?
Юлия, используйте CSS-свойства background и color .
Добрый день.
Я только-только начал изучать html.
Сейчас пытаюсь сделать элементы выпадающего списка ссылками на якоря.Это возможно сделать, используя только html?
Спасибо.
Сергей, если под выпадающим списком подразумевается HTML-элемент SELECT , то средствами статического HTML (без JavaScript) переход с его помощью на якоря не реализовать.
Замечу, что в общем случае выпадающий список — не самый удобный способ навигации (например, нет возможности открыть произвольную ссылку в новой вкладке). Если ссылок не очень много, целесообразнее реализовать навигацию в виде UL -списка обычных ссылок.
Просто было любопытно. Понял Вас, приму к сведению.
Спасибо за ответ.
Всем привет,информация точна и подробная,спасибо автору,но у меня возник вопрос,если у меня сайт разделён фреймами,то как задать условия появления страницы,ссылка которой в кнопке,в определённом фрейме?(у меня на сайте есть верхний фрейм,боковой(там где находится кнопка) и центральный фрейм(в котором и должен появиться файл,который указан ссылкой) )
@MER11111111 Для указания окна или фрейма, в который следует загружать ресурс, на который указывает ссылка, предназначен атрибут target , в качестве значения которого в случае фрейма следует указать значение атрибута name соответствующего фрейма. Но на самом деле фреймы как подход давно устарели, вместо них следует использовать шаблонизацию на стороне сервера.
можно не указывать, она по умолчанию submit, достаточно просто
Дмитрий, именно поэтому в тексте и написано «в современных браузерах и IE8+ атрибут необязателен».
У меня сейчас небольшая запара как раз на тему как известно это не поддерживается в браузерах до ie8, можно конечно использовать input, но мне нужно именно button (кнопка с favicon), похоже придётся отказаться от поддержки старых браузеров на своём сайте.
Дмитрий, учитывая, что текущая суммарная доля устаревших версий IE вплоть до 10-й включительно составляет всего около 1%, в большинстве случаев можно смело отказываться от поддержки всех версий IE, кроме 11-й , не говоря уж об IE8 с его долей менее 0,3% и IE7 с долей 0,1%, которые не заслуживают внимания уже несколько лет.
Марат у меня вот такая кнопка но ссылка на неё не работает что делать
.button
.button:after
.button:active:after
Паша, см. секцию «Правильно» в заметке.
Такой вопрос, при наведении курсора на кнопку, внешность курсора не заменяется на всем принятый указательный палец поднятый вверх (когда наводишь на любую ссылку), есть ли способ как-то сделать это, многие даже не поймут что это ссылка наводя на кнопку)
Я не силен в программировании, но кнопку для интернет-магазина на PrestaShop все таки смог перепрограммировать.
Вот то, что было изначально:
Нужно было сделать так, чтобы при нажатии на кнопку активировался переход по адресу URL.
Сначала сделал так:
Этот вариант сработал, но мне не хотелось использовать javascript в кнопке. В итоге, благодаря Badrainbow, сделал так:
Это работает. Еще раз спасибо Badrainbow.
не хотелось использовать javascript в кнопке
Сергей, в обработчике onclick в любом случае указывается именно JavaScript-код. Отключите JavaScript — и ваша кнопка работать перестанет.
Использование псевдопротокола javascript: в этом атрибуте вообще ошибочно, он предназначен только для вызова JS-кода через атрибут href ссылок, и от его отсутствия в атрибуте onclick JS-код не перестанет быть JS-кодом.
Напротив, при использовании формы-обёртки кнопка-ссылка будет работать даже при отключённом JS.
Marat Tanalin (автор) 2018-03-04 писал:
Сергей, в обработчике onclick в любом случае указывается именно JavaScript-код. Отключите JavaScript — и ваша кнопка работать перестанет.
==========================================================================
Хочу выразить благодарность Marat Tanalin за разъяснения. Если честно, я был уверен, что обработчик onclick не использует сам по себе JavaScript.
Теперь сделал кнопку на чистом html вот таким образом:
Паттерн с пунктирными ссылками не раскрыт потому, что это кнопка, а не ссылка. Ничего не мешает оформить кнопки как пунктирные ссылки. Благо паттерн Татьянычем раскрыт ещё до появления
Здравствуйте, воспользовался вашим советом для перехода по ссылке при нажатии на кнопку. Но проблема в том что мне надо сделать так? что ссылка открывалась в новом окне, а старое окно оставалось. У меня сейчас при нажатии на кнопку «Заказать» происходит в том же окне переход на указываемую ссылку. Без JS Можно ли это реализовать при таком коде:
или надо всё это заменить на вот такой код:
Иван, у форм тоже есть атрибут target .
помогите пожалуйсто, мне нужно что бы кнопки были расположены горизонтально, а не вертикально. Как это сделать? Вот код:
Влада, например, сделав формы строчными с помощью CSS-объявления display: inline .
а можете написать то как это будет выглядеть, а то у меня не получается
Влада, например, если ваши формы находятся внутри элемента с классом nav , CSS-правило будет таким:
Но если это навигационное меню, то лучше использовать обычные ссылки — их, в отличие от форм, пользователь может, например, открыть в новой вкладке или окне.
Хорошая статья. Спасибо большое автору.
Подскажите, пожалуйста, что нужно дописать в этой кнопке, чтобы при переходе ссылка открывалась в новом окне?
Я понимаю, что это делается через target=»_blank», но где и как его прописать правильно, не пойму?
Помогите, пожалуйста!
Катя, у форм тоже есть атрибут target . Я писал об этом в одном из комментариев. Сейчас добавил соответствующую информацию в саму заметку.
Как добавить HTML-кнопку на сайт: 3 способа + легкий вариант
Так как добавить HTML-кнопку на сайт можно разными способами, у многих с этим возникают трудности. Допустимо использовать специальные теги, такие как , , . Можно к кнопкам прикручивать ссылки, чтобы они вели на нужные вам страницы.
А можно поступить еще проще — воспользоваться готовыми виджетами. Мультикнопка будет уместна практически в любых целях — от отправки заявок до покупки билетов и перехода на заданные страницы. Какой способ добавления кнопки на сайт выберите вы?
3 способа добавить HTML-кнопку на сайт
Кнопки на страницах сайтов — это наиболее понятный элемент взаимодействия для пользователей. В зависимости от того, как они оформлены, посетителю сразу становится понятно, что на них следует нажимать для получения нужной информации. Такие элементы, благодаря их интуитивности, часто устанавливают в разных формах (обычно для того, чтобы их отправить или очистить).
Рассмотрим, как добавить HTML-кнопку на сайт разными способами:
- используя тег& ; ;
- используя тег& ; ;
- устанавливая ссылку (тег& ; ) и с помощью CSS-свойств.
Добавление HTML-кнопки на сайт с помощью тега
Различают две разновидности кнопок, для создания которых используется тег& ;button. Это элемент интерфейса для очистки полей форм — reset, а также кнопка, функционал которой определяет соответствующий скрипт.
HTML-кнопку& ;& ;нельзя считать ссылкой. Чтобы установить переход с этого элемента на нужную страницу, применяется тег& ; (кнопке можно придать определенный стиль, используя таблицы стилей CSS).
Содержание кнопки& ;& ;может определять текстовый файл или другие HTML-теги (к примеру, с помощью тега& ;,& ;расположенного внутри кнопки, можно установить кнопку «изображение»).
С помощью элемента интерфейса& ; или тега& ; можно осуществлять отправку форм HTML. В этом случае нужна кнопка типа& ;submit, которая включена в тег HTML-кода формы& ;& ;или привязана к форме с использованием атрибута& ;form.
Пример 2. Меняется кнопка при наведении курсора:
HTML-кнопка на сайт с помощью других тегов
В поле& ;type& ;следует указать атрибут& ;button& ;или& ;submit:
Какие отличия в разных вариантах указания атрибута& ;кнопки type?
submit& ;— указывается, чтобы реализовать отправку значений из формы (управление передается URL, который прописан в action-атрибуте формы).
reset& ;— используется для очистки всех полей формы.
button& ;— применяется, если нужно обеспечить обработку определенных действий при нажатии кнопки (не путайте с атрибутом submit!).
В данном случае нет необходимости приводить пример, поскольку кнопка будет выглядеть так же, как и в приведенном ранее случае. Отличаются данные варианты только возможностями. При использовании тега появляются более широкие возможности, чем в случае с (но при этом вариант с встречается чаще).
и
Аналогично с тегом& ; и & ;дает возможность устанавливать кликабельные кнопки button,& ;submit& ;и& ;reset.
Отличия кнопки с тегом & ;от элементов с тегом& ;& ;заключаются в методах наполнения кнопок информацией. В HTML-коде кнопки button& ;можно прописать теги, расширяющие варианты визуального представления кнопки на странице. Тег& ; ограничивает возможности. В этом случае доступна установка атрибута value& ;или картинки в& ;& ;с атрибутом& ;type=»image». В теге нельзя использовать HTML-коды.
Различные браузеры по умолчанию по-разному определяют тип кнопки, поэтому нужно обязательно прописывать атрибут type, чтобы обеспечить кроссбраузерность кнопки.
Кнопка с таким тегом имеет наиболее ограниченный функционал. Так можно установить только стандартную ссылку. Чаще всего этот вид кнопок встречается на сайтах интернет-магазинов («Добавить в корзину», «Купить»).
Синтаксис следующий:
» width=»590″ height=»132″ />
Добавление HTML-кнопки на сайт, которая действует как ссылка
Существуют разные варианты создания HTML-кодов кнопок, действующих как стандартная ссылка (при нажатии пользователь перенаправляется на страницу, адрес которой добавлен в тег).
Вы можете добавить такие кнопки описанными ниже методами.
Добавьте строчный& ;onclick& ;event
Вариант 1: к HTML-тегу & ;внутри элемента HTML& ;
Обратите внимание, что кнопка в этом случае может не работать, если она расположена внутри тега .
Вариант 2: к& ;тегу & ;внутри элемента HTML& ;
Чтобы ссылка открывалась в отдельной вкладке, нужно добавить в код атрибут& ;target=»_blank».
В данном примере отсутствуют формы и их данные, поэтому с точки зрения семантики он не имеет смысла, но подобная разметка допускается.
Вариант 2: атрибут HTML5& ;formaction.
Атрибут& ;formaction& ;следует устанавливать только для HTML-кода кнопок с type=” submit”. Обратите внимание, что такая разметка будет слабо поддерживаться старыми браузерами, поскольку атрибут formaction является HTML5-specific.
Добавьте ссылку в стиле HTML-кнопки (используя CSS)
Из-за сложного стилевого оформления такой вариант не будет работать в ряде браузеров.
Готовый виджет кнопки для сайта
Существуют мультикнопки, с помощью которых пользователь может совершить несколько действий. К примеру, одна кнопка дает возможность скачать код цифрового товара, выбрать вариант связи или сделать переход на страницу с акцией.
Какие преимущества можно получить, если добавить код мультикнопки на сайт?
- В 2,4 раза повысится численность обращений с сайта.
- Увеличится объем продаж за счет предоставления посетителям информации об акционных предложениях.
- Появится возможность быстро продать некоторые виды товаров или услуг.
- Посетители будут более лояльными под влиянием возможности выбора способов связи.
- Появится возможность для формирования базы клиентов после продвижения подписки на канал Telegram или страничку в социальных сетях.
Особенности работы мультикнопки:
Устанавливаете код на сайт
Добавить такую HTML-кнопку на сайт самостоятельно можно за пару минут, если следовать инструкциям (можно также обратиться к нашим специалистам).
Появляется красивая кнопка
Пользователь при нажатии на кнопку сможет выбрать оптимальный вариант связи или будет перенаправлен на страницу акции.
Клиент связывается с вами
Консультанты компании отвечают на обращения клиентов по телефону, в социальных сетях или в личном кабинете.
Клиент покупает
Покупатель удовлетворен, так как нашел то, что ему нужно, а вы получаете продажу и рост клиентской базы!
Внешний вид мультикнопки:
По желанию можно добавить цвет кнопки, подобрать иконку или установить свое изображение.
Как могут использоваться кнопки?
Вызвать обратный звонок или чат
Скачать приложение
Открыть страницу
Подписка на канал Telegram и другие соцсети
Купить билет, получить промокод и скачать книгу
Еще больше возможностей
Опытный программист поможет добавить нужные скрипты при нажатии кнопки. Это могут быть всплывающие окна, разные виджеты и другие объекты, прописанные в JavaScript.
Как было отмечено ранее, кнопки относят к наиболее понятным элементам веб-страниц для пользователей. Их форма и внешний вид сразу подсказывают посетителю сайта, что кнопку можно нажать. Такие элементы интерфейса часто устанавливают для отправки и очистки различных форм. Добавить HTML-код кнопки можно различными способами, но, чтобы обеспечить эффективность такого элемента, следует выбрать оптимальный вариант установки кода.
Как сделать ссылку кнопку или кнопку ссылку на HTML? По 3 способа!
Доброго времени суток! Каждый веб мастер задавался вопросом как же сделать кнопку по клику на которую человек сразу перейдет по нужному адресу. Простая ссылка » Ссылка» выглядит не красиво, и не всегда подходит по дизайну вашего сайта. Так же иногда возникает необходимость сделать обратное. Из обычной кнопки, сделать аналог ссылки, по клику на которой будет происходить переход по нужному адресу.
Для данных задач, как всегда, существует несколько возможных решений. Давайте разберем несколько из них.
Как сделать ссылку кнопкой
Первый способ
Сделать обычную ссылку, визуально похожей на кнопку, можно с помощью написания своих стилей CSS.
Итак, создаем обычную ссылку. И указываем адрес к нашим стилям, которые напишем чуть-чуть ниже.
А вот и они, виновники нашей победы над текстовой ссылкой, стили. Они преобразуют ее в кнопку.
Таким способом мы заменили все ссылки на странице на кнопки.
Второй способ
Этот способ достаточно банален и прост. Скорее всего именно так вы и хотели сделать такую кнопку изначально. Просто оберните картинку кнопки тегом » «!
Правда, теперь, если вы захотите сменить текст, вам придется нарисовать кнопку заново. Плюс, такая кнопка занимает больше места, трафика и времени загрузки страницы. Такой способ можно использовать для создания сложных кнопок, таких, которые невозможно сделать стилями CSS.
Третий способ
Этот способ практический такой же как и первый, за исключением того, что в первом методе мы использовали стили кнопок «по умолчанию«, сейчас же мы нарисуем свою кнопку «с блэк джеком и контуром!«.
Выглядеть такая ссылка будет как вам захочется. Нужно только придумать и написать стиль для нее. Текст меняется легко и не загромождает html код. Так-же, такая ссылка будет индивидуальной в отличие от первого способа, где заменялись все ссылки.
Как сделать кнопку ссылкой
Для обратной задачи, так-же существует несколько способов, которые мы рассмотрим далее в статье. Такая ситуация может возникнуть, если вы захотите использовать кнопку отдельно от формы, например что бы перенаправить пользователя на другую страницу. Можно сделать так чтоб кнопка выглядела как обычная кнопка, а вела себя как ссылка, а можно вообще перерисовать ее с учетом любых стилей.
Первый способ
Для того что-бы кнопка вела себя как ссылка, можно создать для нее форму, а внутри разместить одну лишь кнопку.
Второй способ
Тут мы уже задействуем магию JavaScript! Для этого, создадим функцию, которая будет перенаправлять пользователя куда нам нужно. И сделаем это так, чтоб можно было использовать эту функцию быстро и удобно в будущем.
Что-бы воспользоваться функцией нужно лишь прописать свойство onClick для любой кнопки.
Третий способ
Этот способ очень похож на второй, однако используется немного по другому. Отдельный JS код нам не понадобиться
Итоги
Как и всегда, несколько способов делают почти одно и тоже. Каким будите пользоваться именно вы, решать вам. Если остались какие-то вопросы, можно задать их в комментариях на сайте. Удачи!
Похожие публикации:
- Как сделать отступ между элементами списка html
- Как сделать подвал в html
- Как сделать профиль на сайте html
- Как сделать резиновый сайт html css
Как сделать круглую кнопку?
Круглая кнопка обычно используется в тех случаях, когда вместо текста на кнопке выводится иконка или одиночный символ. Вот некоторые ситуации, где использование круглых кнопок имеет смысл: навигация по страницам; управление аудио и видеоплеером, переключение между слайдами в карусели, отправка формы.
Чтобы кнопка получилась именно круглой, в стилях для класса .round следует установить одинаковые ширину и высоту и задать радиус скругления 50% через свойство border-radius. Скругление каждого уголка на половину размера элемента и даст в итоге круг. У кнопки следует ещё убрать рамку через свойство border, её браузеры добавляют по умолчанию.
button.round < width: 30px; height: 30px; /* Размеры кнопки */ background-color: #e03e25; /* Цвет фона */ border-radius: 50%; /* Радиус скругления */ border: none; /* Убираем рамку вокруг кнопки */ >Само выравнивание картинки внутри по вертикали или горизонтали делать не нужно, она и так окажется в центре кнопки. Окончательный код с полем для поиска и круглой кнопкой для отправки формы показан в примере 1.
Пример 1. Круглая кнопка
См. также
- border-radius
- Атрибуты
- Кнопки
- Кнопки
- Кнопки в Bootstrap 4
- Круглые изображения
- Оформление кнопок
- Создание кнопок
Кнопки
Кнопки являются одним из популярных элементов интерфейса и часто применяются внутри форм, например, для отправки введённой информации в форме на сервер.
Кнопки на веб-странице можно создать несколькими способами — с помощью элемента или элемента .
Рассмотрим вначале добавление кнопки через и его синтаксис.
Атрибуты кнопки перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| name | Имя кнопки, предназначено для того, чтобы обработчик формы мог её идентифицировать. |
| disabled | Блокирует кнопку и не позволяет на неё нажимать. |
| form | Идентификатор формы для связывания кнопки с элементом . |
| type | Для обычной кнопки значением является button . |
| value | Надпись на кнопке. |
| autofocus | Кнопка получает фокус после загрузки документа. |
Создание кнопки показано в примере 1.
Пример 1. Добавление кнопки
Примите во внимание, что учитываются все пробелы в надписи на кнопке, в отличие от обычного текста HTML, поэтому можно ставить любое количество пробелов, которые в итоге влияют на ширину кнопки. Но правильнее, конечно же, задавать вид кнопки через CSS. Результат примера показан на рис. 1.
Рис. 1. Вид кнопки
Для таких кнопок есть ряд обязательных правил:
- нельзя вкладывать внутрь ссылки ;
- нельзя вкладывать внутрь кнопки ;
- значение атрибута value не может быть пустым.
Второй способ создания кнопки основан на использовании элемента . Он по своему действию напоминает результат, получаемый с помощью . Но в отличие от него предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, включая изображения и таблицы. На рис. 2 показаны разные виды кнопок, полученные с помощью .
Атрибуты перечислены в табл. 1, но в отличие от кнопки атрибут value определяет только отправляемое на сервер значение, а не надпись на кнопке. Если требуется вывести на кнопке изображение, то добавляется внутрь , как показано в примере 2.
Пример 2. Рисунок на кнопке
В данном примере показано создание обычной кнопки с текстом, а также кнопки с одновременным использованием текста и рисунка. Размер кнопки зависит от содержимого , но пробелы игнорируются, поэтому простым увеличением их количества, как в случае использования , ширину кнопки изменить не удастся.
Для также есть ряд ограничений:
- нельзя вкладывать внутрь ссылки ;
- один нельзя вкладывать внутрь другого.
Кнопка Submit
Для отправки данных на сервер предназначена специальная кнопка Submit. Её вид ничем не отличается от обычных кнопок, но при нажатии на неё происходит переход к обработчику формы по адресу, указанному атрибутом action элемента . Программа-обработчик, получает данные, введённые пользователем в полях формы, производит с ними необходимые манипуляции, после чего возвращает результат в виде HTML-документа. Что именно делает обработчик, зависит от автора сайта, например, подобная технология применяется при создании опросов, форумов, тестов и многих других вещей.
Синтаксис создания кнопки Submit зависит от используемого элемента или .
Атрибуты те же, что и у рядовых кнопок (пример 3), но значение атрибута value теперь можно не указывать, потому что браузер подставит текст самостоятельно, он различается в зависимости от браузера. Так, Firefox пишет «Отправить запрос», IE — «Подача запроса», Opera и Chrome — «Отправить». Сам текст надписи никак на функционал кнопки не влияет.
Пример 3. Отправка данных на сервер
Кнопка Reset
При нажатии на кнопку Reset данные формы возвращаются к первоначальным значениям. Как правило, эту кнопку применяют для очистки введённой в полях формы информации. Для больших форм от использования кнопки Reset лучше вообще отказаться, чтобы по ошибке на неё не нажать, ведь тогда придётся заполнять форму заново.
Синтаксис создания указанной кнопки прост и похож на другие кнопки.
В примере 4 показана форма с одним текстовым полем, которое уже содержит предварительно введённый текст с помощью атрибута value элемента . После изменения текста и нажатия на кнопку «Очистить», значение поля будет восстановлено и в нём снова появится надпись «Введите текст».
Пример 4. Кнопка для очистки формы
Значение кнопки Reset никогда не пересылается на сервер. Если надпись на кнопке опустить, иными словами, не задавать атрибут value , на кнопке по умолчанию будет добавлен текст «Сбросить».