Почти все люди (некоторые больше, некоторые – меньше) любят порядок, потому что порядок – это всегда удобно. Удобно, когда у человека порядок на рабочем столе, на работе, в квартире. И очень удобно, когда заходишь на незнакомый сайт, а там тоже – порядок, всё легко и просто.
Обычно такой порядок называется дружественным (интуитивно понятным) интерфейсом. Html кнопка – это просто незаменимое средство для наведения порядка на сайте и организации дружественного интерфейса.
Как сделать кнопку в HTML?Кнопки для сайта HTML создаются одним из двух способов:
1. С помощью тега input . Синтаксис такой команды выглядит следующим образом:
2. С помощью тега button :
Надпись на кнопке Пример кода, который выполняет создание кнопки в html сразу двумя этими способами: Кнопка
Кнопочка2
В результате получаются две одинаковые кнопки:
Таким образом, хотя получились две абсолютно одинаковые кнопки html , код для них немного разный. Не имеет значения, как создать кнопку в html .
Разница между двумя методами состоит лишь в том, что при использовании тега button – вы можете поместить в контейнер свой набор в виде картинки и текста, и это все будет активно, а при использовании тега input возможно будет использовать либо только картинку, либо только текст.
Но при этом старые версии браузера Internet Explorer могут неправильно отображать современный тег button .
Виды кнопок html 1. Кнопка-ссылка HTMLКнопка со ссылкой HTML (например, кнопка наверх для сайта html
или кнопка назад html
) может быть создана с помощью ссылок «якорей
». Обычный «якорь
» имеет следующий вид:
Такой «якорь » невидим и может быть поставлен в любом месте, в котором вы считаете нужным. Для того чтобы перейти к «якорю », используется следующая команда:
название кнопки
Нажатие на название кнопки, моментально переводит курсор к «якорю
».
Допустим, нам нужно, чтобы внизу сайта стояла кнопка перехода на начало, а в начале – для перехода вниз:
Якорь
вниз
…вверх
…Выглядит это следующим образом:
Кнопки типа Submit существуют для отправки информации, введённой посетителем сайта, на сервер. Например, простейшая организация ввода пароля выглядит так:
3. Кнопка ResetКнопки типа Reset предназначены для обновления данных форм (возврата их в первоначальное состояние). Для того чтобы создать такую кнопку, следует использовать следующий код:
4. HTML кнопка с картинкойВ HTML кнопки можно украшать какими-либо картинками. Для этого достаточно использовать следующий код:
Кнопка с картинкой и текстом:
Например:
Таким образом, при создании кнопок HTML можно проявить свою выдумку: любые дизайнерские фантазии реализуются написанием достаточно простого кода.
Хорошо Плохо
Вы, наверное, видели на моем сайте в гостевой книге или на форуме, формы добавления сообщений со специальными кнопками. И, если Вам хотелось обзавестись такой же,…
Поддержка браузерами возможностей 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.
Создание кнопки показано в примере 1.
Пример 1. Добавление кнопки
Кнопка
Примите во внимание, что учитываются все пробелы в надписи на кнопке, в отличие от обычного текста HTML, поэтому можно ставить любое количество пробелов, которые в итоге влияют на ширину кнопки. Но правильнее, конечно же, задавать вид кнопки через CSS. Результат примера показан на рис. 1.
Рис. 1. Вид кнопки
Для таких кнопок есть ряд обязательных правил:
- ;
- нельзя вкладывать внутрь кнопки ;
- значение атрибута value не может быть пустым.
Второй способ создания кнопки основан на использовании элемента . Он по своему действию напоминает результат, получаемый с помощью . Но в отличие от него предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, включая изображения и таблицы. На рис. 2 показаны разные виды кнопок, полученные с помощью .
Рис. 2. Кнопки, созданные с помощью
Синтаксис создания такой кнопки следующий.
Надпись на кнопке
Атрибуты перечислены в табл. 1, но в отличие от кнопки
атрибут value
определяет только отправляемое на сервер значение, а не надпись на кнопке. Если требуется вывести на кнопке изображение, то
добавляется внутрь
, как показано в примере 2.
Пример 2. Рисунок на кнопке
Кнопка
Кнопка с текстом
Кнопка с рисунком
В данном примере показано создание обычной кнопки с текстом, а также кнопки с одновременным использованием текста и рисунка. Размер кнопки зависит от содержимого , но пробелы игнорируются, поэтому простым увеличением их количества, как в случае использования , ширину кнопки изменить не удастся.
Для также есть ряд ограничений:
- нельзя вкладывать внутрь ссылки ;
- один нельзя вкладывать внутрь другого.
Для отправки данных на сервер предназначена специальная кнопка Submit. Её вид ничем не отличается от обычных кнопок, но при нажатии на неё происходит переход к обработчику формы по адресу, указанному атрибутом action элемента . Программа-обработчик, получает данные, введённые пользователем в полях формы, производит с ними необходимые манипуляции, после чего возвращает результат в виде HTML-документа. Что именно делает обработчик, зависит от автора сайта, например, подобная технология применяется при создании опросов, форумов, тестов и многих других вещей.
Синтаксис создания кнопки Submit зависит от используемого элемента или .
Надпись на кнопке
Атрибуты те же, что и у рядовых кнопок (пример 3), но значение атрибута value теперь можно не указывать, потому что браузер подставит текст самостоятельно, он различается в зависимости от браузера. Так, Firefox пишет «Отправить запрос», IE - «Подача запроса», Opera и Chrome - «Отправить». Сам текст надписи никак на функционал кнопки не влияет.
Пример 3. Отправка данных на сервер
Кнопка
Кнопка ResetПри нажатии на кнопку Reset данные формы возвращаются к первоначальным значениям. Как правило, эту кнопку применяют для очистки введённой в полях формы информации. Для больших форм от использования кнопки Reset лучше вообще отказаться, чтобы по ошибке на неё не нажать, ведь тогда придётся заполнять форму заново.
Синтаксис создания указанной кнопки прост и похож на другие кнопки.
Надпись на кнопке
В примере 4 показана форма с одним текстовым полем, которое уже содержит предварительно введённый текст с помощью атрибута value элемента . После изменения текста и нажатия на кнопку «Очистить», значение поля будет восстановлено и в нём снова появится надпись «Введите текст».
Инструкция
Использование дескриптора добавляет на страницу кнопку с именем name и значением value. Атрибут name задает элементу уникальный идентификатор и используется для определения обработчиком формы его значения. Value выводит необходимый текст поверх. Например, для создания кнопки запишите следующий код:
Данная команда создаст кнопку с именем button и надписью «Отправка» на ней.
Дескриптор создает аналогичный элемент, однако предлагает для использования множество дополнительных параметров, которые могут понадобиться веб-разработчику. Так, поверх можно наложить таблицу или изображение, форматированный текст или список. Например:
Текст
Атрибут form задает идентификатор формы, который будет использоваться для обработки данных. Formaction устанавливает обработчик формы в другой части документа, другом файле или сайте. Formmethod отвечает за определение метода пересылки данных. Name задает имя кнопке, type – тип (обычная, для отправки данных или для очистки формы). Value – значение, которое будет считываться скриптами. На кнопке будет отображаться изображение с указанным адресом и текст.
Чтобы создать кнопку, которая будет обрабатывать введенные данные, необходимо в атрибуте указать соответствующий тип:
Чтобы создать кнопку, стирающую введенные пользователем данные, задайте type = “reset”.
Обратите внимание
Дескриптор должен обязательно использоваться в качестве содержимого тега . Кнопка может быть отображена и вне формы, однако для обработки данных и выполнения определенного действия она также должна быть заключена между .
Чтобы организовать взаимодействие сайта с посетителем в его страницах надо предусмотреть возможности для ввода информации и отправки ее на сервер. Для этого в языке описания веб-страниц HTML (HyperText Markup Language - «язык разметки гипертекста») предусмотрен специальный набор тегов. Что это за теги и как, пользуясь ними создать в странице веб-форму для заполнения посетителем?
Вам понадобится
- Базовое знание языка HTML
Инструкция
HTML-теги, которые сообщают браузеру, что в этом месте страницы необходимо отобразить форму и ее элементы, размещаются в коде между открывающим тегом и закрывающим . Открывающий тег должен содержать обязательную информацию - атрибуты, сообщающие куда именно надо отправить информацию из формы и каким методом нужно это сделать. Кроме того, если страница содержит больше одной формы, то каждая должна иметь собственное имя. С учетом всего этого открывающий тег может выглядеть так:--Кроме этого в форму можно поместить кнопки - для очистки введенных в форму данных:и для отправки заполненной формы на сервер:Значение, указанное в атрибуте "value" для кнопок - это надпись на самой кнопке.
Я хотел бы создать кнопку HTML, которая действует как ссылка. Таким образом, когда вы нажимаете кнопку, она перенаправляется на страницу. Я хотел бы, чтобы он был как можно более доступным.
Мне также понравится, чтобы в URL не было никаких дополнительных символов или параметров.
Как я могу это достичь?
Continue
но проблема заключается в том, что в Safari и Интернет Explorer , он добавляет знак вопросительного знака в конец URL-адреса. Мне нужно найти решение, которое не добавляет никаких символов в конец URL-адреса.
Для этого есть два других решения: использование JavaScript или стилизация ссылки, чтобы выглядеть как кнопка.
Использование JavaScript:
Continue
Но для этого явно нужен JavaScript, и по этой причине он менее доступен для чтения с экрана. Пункт ссылки - перейти на другую страницу. Поэтому попытка заставить кнопку действовать, как ссылка, является неправильным решением. Мое предложение состоит в том, что вы должны использовать ссылку и стиль, чтобы он выглядел как кнопка .
Continue
27 ответов
HTMLПростой способ HTML состоит в том, чтобы поместить его в , в котором вы указываете желаемый целевой URL в атрибуте action .
При необходимости установите CSS display: inline; в форме, чтобы сохранить его в потоке с окружающим текстом. Вместо в приведенном выше примере вы также можете использовать . Единственное отличие состоит в том, что элемент позволяет детям.
Вы интуитивно ожидали бы, что сможете использовать , аналогичный элементу , но, к сожалению, нет, этот атрибут не существует в соответствии с Спецификация HTML .
CSSЕсли CSS разрешен, просто используйте , который вы хотите выглядеть как кнопка, используя, помимо прочего, свойство appearance (только поддержка Internet поддержка браузера в настоящее время (июль 2015 г.) все еще плохая).
Go to Google a.button { -webkit-appearance: button; -moz-appearance: button; appearance: button; text-decoration: none; color: initial; }
Или выберите одну из этих многих библиотек CSS, таких как Bootstrap .
JavaScriptЕсли JavaScript разрешен, установите window.location.href .
Если это внешний вид кнопки, которую вы ищете в базовом теге привязки HTML, вы можете использовать Twitter Bootstrap для отформатируйте любую из следующих распространенных ссылок/кнопок типа HTML, чтобы они отображались в виде кнопки. Обратите внимание на визуальные различия между версиями 2, 3 или 4 рамки:
Link Button
Использование:
Click me
К сожалению, эта разметка больше не действительна в HTML5 и не будет проверять и не всегда работать как потенциально ожидаемая. Используйте другой подход.
Как и в случае с HTML5, кнопки поддерживают атрибут formaction . Лучше всего, не требуется Javascript или обман.
Go to Stack Overflow!
Предостережение
Это действительно очень просто и без использования каких-либо элементов формы. Вы можете просто использовать тег с помощью кнопки внутри:).
И он загрузит href на ту же страницу. Хотите новую страницу? Просто используйте target="_blank" .
Если вы используете внутреннюю форму, добавьте атрибут type = "reset" вместе с элементом кнопки. Это предотвратит действие формы.
www.example.com
Единственный способ сделать это (за исключением изобретательной идеи BalusC!) - это добавить к кнопке JavaScript onclick событие, что не подходит для доступности.
Есть ли недостатки в выполнении следующих действий?
Где a.nostyle - это класс, который имеет стиль вашей ссылки (где вы можете избавиться от стандартного стиля ссылок), а span.button - это класс, который имеет стиль для вашего "button" (фон, граница, градиент, и др.).
Идя вместе с тем, что добавили некоторые другие, вы можете сходить с ума только с помощью простого CSS-класса без PHP, no jQuery , просто HTML и CSS.
Создайте класс CSS и добавьте его в свой якорь. Код ниже.
Button-link { height:60px; padding: 10px 15px; background: #4479BA; color: #FFF; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: solid 1px #20538D; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); } .button-link:hover { background: #356094; border: solid 1px #2A4E77; text-decoration: none; } Press Here to Go
Вот и все. Это очень легко сделать и позволяет вам быть настолько креативным, насколько хотелось бы. Вы управляете цветами, размером, формами (радиус) и т.д. Для получения дополнительной информации см. сайт, на котором я нашел это .
Кажется, есть три решения этой проблемы (все с плюсами и минусами).
Решение 1: Кнопка в форме. ContinueНо проблема заключается в том, что в некоторых версиях популярных браузеров, таких как Chrome, Safari и Internet Explorer, он добавляет знак вопроса в конец URL-адреса. Таким образом, другими словами, для кода выше ваш URL-адрес будет выглядеть следующим образом:
Http://someserver/pages2?
Есть один способ исправить это, но для этого потребуется конфигурация на стороне сервера. Одним из примеров использования Apache Mod_rewrite было бы перенаправление всех запросов с завершающим? на их соответствующий URL без? . Вот пример использования.htaccess, но есть полный поток :
RewriteCond %{THE_REQUEST} \?\ HTTP RewriteRule ^/?(index\.cfm)? /?
Аналогичные конфигурации могут различаться в зависимости от используемого веб-сервера и используемого стека. Итак, резюме этого подхода:
- Это настоящая кнопка, и семантически это имеет смысл.
- Нет JavaScript, не требуется сложный стиль.
- Трейлинг? выглядит уродливым в некоторых браузерах. Это может быть исправлено с помощью взлома (в некоторых случаях) с использованием POST вместо GET, но чистым способом является перенаправление на стороне сервера. Недостатком перенаправления на стороне сервера является то, что он вызовет дополнительный HTTP-вызов для этих ссылок из-за перенаправления 304.
- Добавляет дополнительный элемент
- Позиционирование элементов при использовании нескольких форм может быть сложным и ухудшается при работе с адаптивными проектами. Некоторое расположение может стать невозможным для достижения этого решения в зависимости от порядка элементов. Это может в конечном итоге повлиять на удобство использования, если на проект влияет эта проблема.
Вы можете использовать JavaScript для запуска onclick и других событий, чтобы имитировать поведение ссылки с помощью кнопки. Пример ниже может быть улучшен и удален из HTML, но здесь просто проиллюстрировать идею:
Continue
- Простой (для базовых требований) и сохраняющий семантику, не требуя дополнительной формы.
- Так как это настоящая кнопка, она также будет действовать как настоящая кнопка (например, перетаскиваемое поведение и/или имитировать щелчок при нажатии пробела при активном действии).
- Требуется JavaScript, что означает менее доступный. Это не идеально подходит для базового (основного) элемента, такого как ссылка.
Если вы хотите избежать использования формы или ввода, и вы ищете ссылку на кнопку, вы можете создать красивые кнопки с помощью обертки div, привязки и тега h1 . Возможно, вам это захочется, чтобы вы могли свободно размещать ссылку на своей странице. Это особенно полезно для горизонтально центрирующих кнопок и с вертикально-центрированным текстом внутри них. Вот как:
Button!
Затем в CSS ваш стиль должен выглядеть так:
Link-button-wrapper { width: 200px; height: 40px; box-shadow: inset 0px 1px 0px 0px #ffffff; border-radius: 4px; background-color: #097BC0; box-shadow: 0px 2px 4px gray; display: block; border:1px solid #094BC0; } .link-button-wrapper > a { display: inline-table; cursor: pointer; text-decoration: none; height: 100%; width:100%; } .link-button-wrapper > a > h1 { margin: 0 auto; display: table-cell; vertical-align: middle; color: #f7f8f8; font-size: 18px; font-family: cabinregular; text-align: center; }
Link link
Button, button a{position:relative;} button a{top:0;left:0;bottom:0;right:0;}
@Nicolas, после работы для меня, как у вас, не было type="button" , из-за чего он начал вести себя как тип отправки. Так как у меня уже есть один тип submit.it, это не сработало для меня.... и теперь вы можете либо добавить класс к кнопке, либо , чтобы получить требуемый макет:
Если вы хотите создать кнопку, которая используется для URL-адреса в любом месте, создайте класс кнопки для привязки.
A.button { background-color: #999999; color: #FFFFFF !important; cursor: pointer; display: inline-block; font-weight: bold; padding: 5px 8px; text-align: center; -webkit-border-radius: 5px; border-radius: 5px; } .button:hover { text-decoration: none; }
Я знаю, что было подано много ответов, но никто из них, похоже, не справился с проблемой. Вот мой подход к решению:
- Используйте метод , с которого начинается OP. Это работает очень хорошо, но иногда добавляет? к URL-адресу. Главной проблемой является? .
- Используйте jQuery/JavaScript для выполнения следующей ссылки, когда JavaScript включен, поэтому? не добавляется к URL-адресу. Он будет без проблем возвращаться к методу для очень небольшой доли пользователей, у которых нет JavaScript.
- В JavaScript-коде используется делегирование событий, поэтому вы можете присоединить прослушиватель событий до того, как существуют или . В этом примере я использую jQuery, потому что это быстро и просто, но это можно сделать и в "vanilla" JavaScript.
- Код JavaScript предотвращает действие по умолчанию, а затем следует ссылку, указанную в атрибуте action .
// Listen for any clicks on an element in the document with the `link` class $(document).on("click", ".link", function(e) { // Prevent the default action (e.g. submit the form) e.preventDefault(); // Get the URL specified in the form var url = e.target.parentElement.action; window.location = url; }); Form buttons as links Link
