Почти все люди (некоторые больше, некоторые – меньше) любят порядок, потому что порядок – это всегда удобно. Удобно, когда у человека порядок на рабочем столе, на работе, в квартире. И очень удобно, когда заходишь на незнакомый сайт, а там тоже – порядок, всё легко и просто.
Обычно такой порядок называется дружественным (интуитивно понятным) интерфейсом. 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 можно проявить свою выдумку: любые дизайнерские фантазии реализуются написанием достаточно простого кода.
Хорошо Плохо
Вы, наверное, видели на моем сайте в гостевой книге или на форуме, формы добавления сообщений со специальными кнопками. И, если Вам хотелось обзавестись такой же,…
Инструкция
Использование дескриптора добавляет на страницу кнопку с именем 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
- Tutorial
Это не исчерпывающее руководство по кнопкам и не пример невероятного дизайна, а лишь попытка показать, что есть разница между ссылками и кнопками.
Для кого эта статья?
В первую очередь для дизайнера который делает макет сайта, но не дорисовывает детали свойственные вебу. Своеобразная попытка объяснить, что веб-сайт лежит за пределами плоской полиграфии.
Во вторых для верстальщика к которому пришёл макет без состояний, чтобы было куда дизайнера послать.
В третьих чтобы вместо очередной тирады о разнице в кнопках\ссылках и нужности дизайна состояний, просто давать .
СсылкиВведение Ссылка которая кнопка
Обычная, наведение, клик, отключена соответственно.button - обычное состояние button { background: none; outline: none; border: none; text-transform: uppercase; } button:hover , button:focus - при наведении button:hover, button:focus { color: hsla(108, 12%, 0%, 1); box-shadow: -1px 1px 2px hsla(108, 62%, 42%, 1); background-color: hsla(108, 62%, 92%, 1) } button:active - в момент клика button:active { color: hsla(108, 42%, 32%, 1); box-shadow: -2px 4px 8px hsla(64, 64%, 42%, 1); background-color: hsla(64, 64%, 92%, 1); } button:disable - отключена button:disabled { color: hsla(0, 0%, 64%, 1); background: none; box-shadow: none; opacity: 1; } Пример посложнее
Показать CSS
button { margin: .8rem; font-size: 1.42rem; padding: 1rem; background: hsla(180, 90%, 64%, 1); color: hsla(180, 90%, 12%, 1); text-shadow: 1px 1px 1px hsla(180, 90%, 32%, 1); box-shadow: -4px 4px 0 0 hsla(180, 90%, 22%, .87), -3px 4px 3px hsla(180, 42%, 11%, 1), 1px 5px 4px hsla(180, 42%, 11%, 1), -4px 1px 0 0 hsla(180, 90%, 32%, 1), inset 0 0 1px 0 hsla(180, 90%, 90%, 1); border: 1px hsla(180, 92%, 56%, 1) solid; border-top-color: hsla(180, 92%, 64%, 1); border-radius: 5px; outline: none; position: relative; transition: all .22s ease-in; } button:hover { background: hsla(420, 90%, 42%, 1); color: hsla(420, 90%, 12%, 1); text-shadow: 1px 1px 1px hsla(420, 90%, 32%, 1); border: 1px hsla(420, 92%, 56%, 1) solid; border-top-color: hsla(420, 90%, 64%, 1); box-shadow: -4px 4px 0 0 hsla(420, 90%, 22%, .87), -3px 4px 3px hsla(420, 42%, 11%, 1), 1px 5px 4px hsla(420, 42%, 11%, 1), -4px 1px 0 0 hsla(420, 90%, 32%, 1), inset 0 0 1px 0 hsla(420, 90%, 90%, 1); } button:focus { background: hsla(108, 90%, 42%, 1); color: hsla(108, 90%, 12%, 1); text-shadow: 1px 1px 1px hsla(108, 90%, 32%, 1); border: 1px hsla(108, 92%, 56%, 1) solid; border-top-color: hsla(108, 90%, 64%, 1); box-shadow: -4px 4px 0 0 hsla(108, 90%, 22%, .87), -3px 4px 3px hsla(108, 42%, 11%, 1), 1px 5px 4px hsla(108, 42%, 11%, 1), -4px 1px 0 0 hsla(108, 90%, 32%, 1), inset 0 0 1px 0 hsla(108, 90%, 90%, 1); } button:active { background: hsla(420, 90%, 42%, 1); color: hsla(420, 90%, 12%, 1); text-shadow: 1px 1px 1px hsla(420, 90%, 32%, 1); transform: translate(-4px, 4px); border: 1px hsla(420, 92%, 22%, 1) solid; border-top-color: hsla(420, 92%, 56%, 1); box-shadow: 0 0 0 0 hsla(420, 90%, 22%, .87), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 0 hsla(420, 90%, 32%, 1), inset 1px 1px 4px 0 hsla(420, 90%, 22%, 1); } button:disabled { background: hsla(420, 0%, 64%, 1); color: hsla(420, 0%, 12%, 1); text-shadow: 1px 1px 1px hsla(420, 0%, 32%, 1); transform: translate(-4px, 4px); border: 1px hsla(420, 0%, 22%, 1) solid; border-top-color: hsla(420, 0%, 56%, 1); box-shadow: 0 0 0 0 hsla(420, 0%, 22%, .87), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 0 hsla(420, 0%, 32%, 1), inset 1px 1px 4px 0 hsla(420, 0%, 22%, 1); } button:disabled.in_ajax { background: hsla(108, 22%, 64%, 1); color: hsla(108, 22%, 12%, 1); text-shadow: 1px 1px 1px hsla(108, 22%, 32%, 1); transform: translate(-4px, 4px); border: 1px hsla(108, 22%, 22%, 1) solid; border-top-color: hsla(108, 22%, 56%, 1); box-shadow: 0 0 0 0 hsla(108, 22%, 22%, .87), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 0 hsla(420, 0%, 32%, 1), inset 1px 1px 4px 0 hsla(420, 0%, 22%, 1); }
ДизайнеруТы цээсэсов можешь и не знать, но состояния отрисовать обязан !От дизайнера помимо макета с обычным состоянием ссылки или кнопки, требуется прилагать различные состояния, дабы не устраивать верстальщику батхерт.
Например так:
Спасибо
Спасибо, что дочитали. Всё здесь написаннное не является 100% истиной в последней инстанции.
Репозиторий
Ссылка на репозиторий этой статьи . Если хотите дополнить или исправить, присылайте пожалуйста Pull Request
Только зарегистрированные пользователи могут участвовать в опросе. Войдите , пожалуйста.
Начинающие создатели сайтов (не те, кто использует готовые решения, а именно те, кто хочет создавать сайты самостоятельно) изучают html, однако не всегда удается с первого раза понять все нюансы создания сайта своими руками.
Кнопка html в меню сайта в стиле дизайнаСсылки - это единственное, что может позволить переход с одной страницы на другую, однако простые ссылки - это полное отсутствие дизайнерской модели, поэтому нужно искать варианты того, как облагородить ссылку и придать ей красивый вид.
Html выполняют две функции: во-первых, они дают возможность перехода на заданную страницу, а во-вторых, имеют дизайн, который вписывается и гармонирует с общим стилем страницы.
Кнопка, по своей сути является той же самой ссылкой, только имеющей приятный вид и, если требуется, меняющей оттенки или форму при клике или наведении на нее.
Сделать кнопку можно двумя способами: самому или используя сервисы для создания кнопок.
Первый способ позволяет научиться и понять суть всей работы, а второй - просто получить результат, да к тому же ограниченный в возможностях.
Кнопки html для сайта - это не столько сложная работа по созданию, сколько трудоемкое оживление кнопки. Под словом «оживление» подразумевается сделать ее реагирующей на клик, наведение или изменить в момент нажатия, для чего нужно использовать CSS или JavaScript.
Кнопка с использованием изображения
Простая кнопка html имеет и создается путем вставки тега "a" (ссылки) на (изображение).
Указанный пример, по сути, является простой картинкой-ссылкой, однако может иметь любой вид и отлично вписываться в дизайн, однако данная кнопка html не может «работать», то есть менять вид в различных ситуациях.
Для того чтобы кнопка имела нестандартный вид и могла меняться в зависимости от ситуации, следует изменить ее изначальный вид и добавить CSS.
Кнопки для сайта с применением CSS
CSS - это другой язык программирования, который отвечает только за стили и называется каскадной таблицей стилей.
Код кнопки для сайта html будет иметь вид:
