标签云

微信群

扫码加入我们

WeChat QR Code

I would like to create an HTML button that acts like a link. So, when you click the button, it redirects to a page. I would like it to be as accessible as possible.I would also like it so there aren't any extra characters, or parameters in the URL.How can I achieve this?Based on the answers posted so far, I am currently doing this:<form method="get" action="/page2"><button type="submit">Continue</button></form>but the problem with this is that in Safari and Internet Explorer, it adds a question mark character to the end of the URL. I need to find a solution that doesn't add any characters to the end of the URL.There are two other solutions to do this: Using JavaScript or styling a link to look like a button.Using JavaScript:<button onclick="window.location.href='/page2'">Continue</button>But this obviously requires JavaScript, and for that reason it is less accessible to screen readers. The point of a link is to go to another page. So trying to make a button act like a link is the wrong solution. My suggestion is that you should use a link and style it to look like a button.<a href="/link/to/page2">Continue</a>


Change GET to POST. Nobody seems to have addressed the OP's first problem, which was the ? on the URL. This is caused by the form being type="GET", change this to type="POST" and the ? at the end of the URL disappears. This is because GET sends all variables in the URL, hence the ?.

2019年05月24日43分29秒

redfox05 This works in a context where you are not strict about which method you accept for your pages. In a context where you reject posts on pages that are expecting GET it will fail. I still think that using a link make sense with the caveat that it will not react to "spacebar" when active like button does. Also some style and behavior will be different (such as draggable). If you want the true "button-link" experience, having server side redirects for URL finishing by ? to remove it might be also an option.

2019年05月24日43分29秒

cssbuttongenerator.com might come in handy if you want to create a button with css.

2019年05月24日43分29秒

I think it is better iade to create a link that looks like a button

2019年05月24日43分29秒

Just a note, for me "button acts like link" means, that I can do right-click and decide whether to open in new tab/window, which is not working with JS solutions...

2019年05月24日43分29秒

Simple and nice. A fine solution. Add display: inline to the form to keep the button in the flow.

2019年05月24日43分29秒

in safari, this adds a question mark to the end of the url...is there a way to do it that doesn't add anything to the url?

2019年05月24日43分29秒

BalusC Nice solution, but if it is inside some other form (parent form), then pressing this button redirects to address in the parent's form action attribute.

2019年05月24日43分29秒

Is it just me or is the <button> tag missing an obvious href attribute?

2019年05月24日43分29秒

Looks simple and nice, but may have side effects if not considered properly. i.e. creating 2nd form in page, nested form etc.

2019年05月24日43分29秒

pinouchon Should work. window is implied. Could be an IE9 bug, stackoverflow.com/questions/7690645/…

2019年05月24日43分29秒

It seems that if you don't specify type="button" this won't always work. Looks like the button will default to "submit"

2019年05月24日43分29秒

If you want to open the link in a new window/tab use: onclick="window.open('example.com','_blank');"

2019年05月25日43分29秒

kenitech correct, according to specs: "The missing value default is the Submit Button state."

2019年05月24日43分29秒

but user cannot right click open in new tab, for that to work , u need the anchor tag

2019年05月24日43分29秒

Seems a little overkill for styling a single button, no? With border, padding, background, and other CSS effects you can style buttons and links to look similar without bringing over an entire framework. The methodology Bootstrap uses is good, however using Bootstrap seems excessive.

2019年05月24日43分29秒

Doesn't (X)HTML-validate.

2019年05月24日43分29秒

BalusC: Neither does this page

2019年05月24日43分29秒

Rob: that's not my problem :) Throw it at Meta and see. However the target attribute is imo on the edge.

2019年05月24日43分29秒

Doesn't work in IE8 (Standards mode)

2019年05月24日43分29秒

Just to complete information: formaction is compatible since "IE world" since version 10 and above

2019年05月24日43分29秒

EternalHour Genuinely curious. In the examples you and I have provided is there supposed to be an appreciable difference between the behavior of those two forms? In this specific case does <button formaction> === <form action>?

2019年05月24日43分29秒

pseudosavant - The difference is that your answer relies on Javascript in order to work. In this solution, no Javascript is needed, it's straight HTML.

2019年05月24日43分29秒

EternalHour Sorry, I should have been more clear. Obviously the JS makes mine different but it is just a progressive enhancement. The form still goes to that link without the JS. I was curious about the intended behavior of just the HTML <form>s in each of our examples. Is formaction on a button supposed to add the ? to an empty GET submission? In this JSBin it looks like the HTML behaves exactly the same for both.

2019年05月24日43分29秒

Its useful to note that this only works when wrapped by form tags. Found that out the hard way...

2019年05月24日43分29秒

While this works, it should not be considered as a solution but a workaround because if you pass this code through W3C validator, you will get errors.

2019年05月24日43分29秒

Yes, Hyder B. you're right, but one you also should keep in mind that the standards are only raw guides. As a programmer you should always think outside the box and try things that are not in the book ;) .

2019年05月24日43分29秒

Robusto that was a snarky comment about the empty space that used to be there :) This is not a good solution IMO, as it won't work without JavaScript.

2019年05月24日43分29秒

Pekka: yup, and also it's not even well-formed xhtml

2019年05月24日43分29秒

if using form just use a submit, if using onclick why bother with the form. -1

2019年05月24日43分29秒

It is not well-formed HTML. The tag input does not have an ending tag.

2019年05月24日43分29秒

PeterMortensen According to the HTML spec, the input element is a void element. It must have a start tag but must not have an end tag.

2019年05月24日43分29秒

No, you can't. HTML forbids nesting <button> inside <a>.

2019年05月24日43分29秒

This is essentially the same as this answer from years earlier.

2019年05月24日43分29秒

If it forbids it then why does it work? :) No serious developer takes heed to everything W3C validator says...try passing Facebook or Google or any huge website through there...The web isn't waiting for anyone

2019年05月24日43分29秒

UriahsVictor It may work today, but one day browser vendors may decide to change the behavior as it isn't valid.

2019年05月24日43分29秒

UriahsVictor Flash and Java applets were pretty common too.

2019年05月24日43分29秒

No downsides that I can see, and works without javascript, inside a form and probably in all other situations. A span can be styled to have a button-like (and for the end user, identical) appearance as per your own CSS or as per a framework with pre-styled options for buttons - such as Bootstrap. This is the best answer I have seen and is fine in html5.

2019年05月24日43分29秒

Which leads to the question "how do I style a link like a button" which I see has been answered here:stackoverflow.com/questions/710089/…

2019年05月24日43分29秒

I think he is talking about not only functionality (click) but also appearance.

2019年05月24日43分29秒

Web Logic yup, that's why I'm talking about styling the link to look like a button.

2019年05月24日43分29秒

"which is not good for accessibility." citation required

2019年05月24日43分29秒

ChrisMarisic there's many downsides to using onClick: it doesn't work with JS turned off; the user can't open a link in a new tab/window, nor copy the link into their clipboard for sharing; parsers and bots won't be able to recognize and follow the link; browsers with a "prefetch" feature won't recognize the link; and many more.

2019年05月24日43分29秒

While those are valid points, I don't really think that really address accessibility. Did you mean usability, not accessibility? In web development accessibility is usually reserved to be specifically about whether users who have visual impairments can operate your application well.

2019年05月24日43分29秒

You actually get a reasonable button without any CSS at all

2019年05月24日43分29秒

Keep in mind the spec says this is not valid as buttons should not contain any interactive descendants. w3.org/TR/2011/WD-html5-20110525/the-button-element.html

2019年05月24日43分29秒

Both of you are correct.VS2015 flags this with a warning: "Element 'a' cannot be nested inside element 'button'" but it works with: IE11, Edge, Chrome, Firefox, Safari and at least some (perhaps all) mobile browsers currently.So don't use this technique but if you did in the past, it works for now ;)

2019年05月24日43分29秒

Doesn't validate. Pasting into validator.w3.org/nu/#textarea gives Error: The element input must not appear as a descendant of the a element.

2019年05月24日43分29秒

Set the button type="button", that will allow you to click it without submitting the form.

2019年05月24日43分29秒

Element 'button' cannot be nested within element 'a'.

2019年05月24日43分29秒

according to the standard no, But in my experience this works fine though. Haven't cross-browser tested it extensively yet, but at least FF and Chrome seem to handle it just fine, with expected behaviour.

2019年05月24日43分29秒

Arius: Read up a bit, experimented some more, and found that a button element can in fact be nested inside a <a> element, as long as the button element does not have its own action applied (since that would obviously result in a conflict - which action will the browser perform? the buttons or the <a>'s ?) but as long as you make sure the button-element itself doesn't trigger any action once clicked,this should work just fine (probably shouldn't be considered a best practice though)

2019年05月24日43分29秒

It's not about possibility. This is just against HTML5 specification and that's all.

2019年05月24日43分29秒