Вопрос: Как создать кнопку HTML, которая действует как ссылка?


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

Мне также хотелось бы, чтобы в URL не было никаких лишних символов или параметров.

Как я могу это достичь?


Основываясь на ответах, опубликованных до сих пор, я в настоящее время делаю это:

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

но проблема заключается в том, что в Сафари а также Интернет эксплорер , он добавляет знак вопроса в конец URL-адреса. Мне нужно найти решение, которое не добавляет никаких символов в конец URL-адреса.

Для этого есть два других решения: использование JavaScript или стилизация ссылки, чтобы выглядеть как кнопка.

Использование JavaScript:

<button onclick="window.location.href='/page2'">Continue</button>

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

<a href="/link/to/page2">Continue</a>

1335


источник


Ответы:


HTML

Простой способ HTML состоит в том, чтобы <form>в котором вы указываете желаемый целевой URL в actionатрибут.

<form action="http://google.com">
    <input type="submit" value="Go to Google" />
</form>

Если необходимо, установите CSS display: inline;на форме, чтобы держать ее в потоке с окружающим текстом. Вместо <input type="submit">в приведенном выше примере вы также можете использовать <button type="submit">, Единственное различие заключается в том, что <button>элемент позволяет детям.

Вы интуитивно ожидаете, что сможете использовать <button href="http://google.com">аналогично <a>элемент, но, к сожалению, нет, этот атрибут не существует в соответствии с Спецификация HTML ,

CSS

Если CSS разрешен, просто используйте <a>который вы хотите выглядеть как кнопка, используя, среди прочего, appearanceимущество ( только поддержка Internet Explorer в настоящее время (июль 2015 года) по-прежнему бедна ).

<a href="http://google.com" class="button">Go to Google</a>
a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

Или выберите одну из тех многих библиотек CSS, как начальная загрузка ,

<a href="http://google.com" class="btn btn-default">Go to Google</a>

JavaScript

Если JavaScript разрешен, установите window.location.href,

<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />

1550



<button onclick="location.href='http://www.example.com'" type="button">
     www.example.com</button>

395



Если это внешний вид кнопки, которую вы ищете в базовом теге привязки HTML, вы можете использовать Щебетать рамки для форматирования любой из следующих распространенных ссылок / кнопок HTML-типа для отображения в виде кнопки. Обратите внимание на визуальные различия между версиями 2, 3 или 4 структуры:

<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

Бутстрап (v4) внешний вид образца:

Sample output of Boostrap v4 buttons

Bootstrap (v3) внешний вид образца:

Sample output of Boostrap v3 buttons

Бутстрап (v2) внешний вид образца:

Sample output of Boostrap v2 buttons


387



Use:

<a href="http://www.stackoverflow.com/">
    <button>Click me</button>
</a>

Unfortunately, this markup is no longer valid in HTML5 and will neither validate nor always work as potentially expected. Use another approach.


127



As of HTML5, buttons support the formaction attribute. Best of all, no Javascript or trickery is needed.

<form>
  <button formaction="http://stackoverflow.com">Go to Stack Overflow!</button>
</form>

Caveats

  • Must be surrounded by <form> tags.
  • <button> type must be "submit" (or unspecified), I couldn't get it working with type "button." Which brings up point below.
  • Overrides the default action in a form. In other words, if you do this inside another form it's going to cause a conflict.

Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction Browser Support: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Browser_compatibility


79



It is actualy very simple and without using any form elements. You can just use the <a> tag with a button inside :).

Like this:

<a href="http://www.google.com" target="_parent"><button>Click me !</button></a>

And it will load the href into the same page. Want a new page? Just use target="_blank".


38



If you are using an inside form, add the attribute type="reset" along with the button element. It will prevent the form action.

<button type="reset" onclick="location.href='http://www.example.com'">
    www.example.com
</button>

34



<form>
    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'"> 
</form>

24



You can simply put an a tag around the element:

<a href="http://google.com" target="_blank">
<button>My Button</button>
</a>

https://jsfiddle.net/hj6gob8b/


21



Are there any downsides to doing something like the following?

<a class='nostyle' href='http://www.google.com/'>
    <span class='button'>Schedule</span>
</a>

Where a.nostyle is a class that has your link styling (where you can get rid of the standard link styling) and span.button is a class that has the styling for your "button" (background, border, gradient, etc.).


17



The only way to do this (except for BalusC's ingenious form idea!) is by adding a JavaScript onclick event to the button, which is not good for accessibility.

Have you considered styling a normal link like a button? You can't achieve OS specific buttons that way, but it's still the best way IMO.


16



There seems to be three solutions to this problem (all with pros and cons).

Solution 1: Button in a form.

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

But the problem with this is that in some version of popular browsers such as Chrome, Safari and Internet Explorer, it adds a question mark character to the end of the URL. So in other words for the code above your URL will end up looking like this:

http://someserver/pages2?

There is one way to fix this, but it will require server-side configuration. One example using Apache Mod_rewrite would be to redirect all requests with a trailing ? to their corresponding URL without the ?. Here is an example using .htaccess, but there is a full thread here:

RewriteCond %{THE_REQUEST} \?\ HTTP [NC]
RewriteRule ^/?(index\.cfm)? /? [R=301,L]

Similar configurations can vary depending on the webserver and stack used. So a summary of this approach:

Pros:

  1. This is a real button, and semantically it makes sense.
  2. Since it is a real button, it will also act like a real button (e.g. draggable behavior and/or mimic a click when pressing space bar when active).
  3. No JavaScript, no complex style required.

Cons:

  1. Trailing ? looks ugly in some browsers. This can be fixed by a hack (in some cases) using POST instead of GET, but the clean way is to have a server-side redirect. The downside with the server side redirect is that it will cause an extra HTTP call for these links because of the 304 redirect.
  2. Adds extra <form> element
  3. Element positioning when using multiple forms can be tricky and becomes even worse when dealing with responsive designs. Some layout can become impossible to achieve with this solution depending on the order of the elements. This can end up impacting usability if the design is impacted by this challenge.

Solution 2: Using JavaScript.

You can use JavaScript to trigger onclick and other events to mimic the behavior of a link using a button. The example below could be improve and remove from the HTML, but it is there simply to illustrate the idea:

<button onclick="window.location.href='/page2'">Continue</button>

Pros:

  1. Simple (for basic requirement) and keep semantic while not requiring an extra form.
  2. Since it is a real button, it will also act like a real button (e.g. draggable behavior and/or mimic a click when pressing space bar when active).

Cons:

  1. Requires JavaScript which means less accessible. This is not ideal for a base (core) element such as a link.

Solution 3: Anchor (link) styled like a button.

Styling a link like a button is relatively easy and can provide similar experience across different browsers. Bootstrap does this, but it is also easy to achieve on your own using simple styles.

Pros:

  1. Simple (for basic requirement) and good cross-browser support.
  2. Does not need a <form> to work.
  3. Does not need JavaScript to work.

Cons:

  1. Semantic is sort of broken, because you want a button that acts like a link and not a link that acts like a button.
  2. It will not reproduce all behaviors of solution #1. It will not support the same behavior as button. For example, links react differently when dragged. Also the "space bar" link trigger will not work without some extra JavaScript code. It will add a lot of complexity since browsers are not consistent on how they support keypress events on buttons.

Conclusion

Solution #1 (Button in a form) seems like the most transparent for users with minimal work required. If your layout is not impacted by this choice and the server side tweak is feasible, this is a good option for cases where accessibility is the top priority (e.g. links on an error page or error messages).

If JavaScript is not an obstacle to your accessibility requirements, then solution #2 (JavaScript) would be preferred over #1 and #3.

If for some reason, accessibility is vital (JavaScript is not an option) but you are in a situation where your design and/or your server configuration is preventing you from using option #1, then solution #3 (Anchor styled like a button) is a good alternative solve this problem with minimal usability impact.


16