4 ms·

> As far as I know that's technically invalid HTML. You can't have an <a> as a child of a <button> (or even the other way around.) I'm also ignoring the invalid

by rkwz 2y ago

> As far as I know that's technically invalid HTML. You can't have an <a> as a child of a <button> (or even the other way around.) I'm also ignoring the invalid type="submit" against the <a> tag in the example button component in the post. It definitely feels weird to have anything other than text nodes inside <button>, didn't realize it's actually invalid HTML. I used this approach mainly to have the button component behave as a link button and a form submit button. Here's the actual code from my project - https://github.com/sheshbabu/mouji/blob/master/commons/components/button.html https://github.com/sheshbabu/mouji/blob/master/commons/compo... What are the drawbacks of this approach? I'm pretty sure I've used this before, can't recall any downsides.

philo23 2y ago
> I used this approach mainly to have the button component behave as a link button and a form submit button. Personally I think the "proper" way to do this would be use just <a> for links, and <button> for submitting forms, and then have the same CSS styles applied to both so that both <button>'s and <a>'s look the same visually if that's what you're going for. I'm not particularly familiar with Go, but I'd either make the wrapping tag name itself a template variable (maybe an enum between "Anchor" and "Button"? again not familiar with Go) or have two components one for forms and one for links. If I've understood the syntax, something like this? <{{.Tag}} class="button-container"></{{.Tag}}> But given both <button>'s and <a>'s have lots of different attributes to manage its behaviour and state (name/value/type/disabled vs href/rel/target etc) I'd personally split them into two separate components, even if it ends up doubling up some of the logic and styles. > What are the drawbacks of this approach? I'm pretty sure I've used this before, can't recall any downsides. As others have mentioned, while it's technically invalid browsers will still happily accept it so there's no real issue with it, personally I just find it a bit quirky to read. There's no harm in leaving it just as it is :)
robertoandred 2y ago
It breaks accessibility and semantics. Use a <button> for an action and an <a> for a link.
zdragnar 2y ago
A button with type "submit" will happily submit the form when you click on it. If you want it to look like a link, use CSS. Putting the submit on the anchor tag is pointless- the lack of a type on the button itself means the browser is inferring the intended behavior and defaulting to type "submit" rather than type "button". As others have mentioned, the main downside is likely accessibility.

by rkwz 2y ago

philo23 2y ago

> I used this approach mainly to have the button component behave as a link button and a form submit button. Personally I think the "proper" way to do this would be use just <a> for links, and <button> for submitting forms, and then have the same CSS styles applied to both so that both <button>'s and <a>'s look the same visually if that's what you're going for. I'm not particularly familiar with Go, but I'd either make the wrapping tag name itself a template variable (maybe an enum between "Anchor" and "Button"? again not familiar with Go) or have two components one for forms and one for links. If I've understood the syntax, something like this? <{{.Tag}} class="button-container"></{{.Tag}}> But given both <button>'s and <a>'s have lots of different attributes to manage its behaviour and state (name/value/type/disabled vs href/rel/target etc) I'd personally split them into two separate components, even if it ends up doubling up some of the logic and styles. > What are the drawbacks of this approach? I'm pretty sure I've used this before, can't recall any downsides. As others have mentioned, while it's technically invalid browsers will still happily accept it so there's no real issue with it, personally I just find it a bit quirky to read. There's no harm in leaving it just as it is :)

robertoandred 2y ago

It breaks accessibility and semantics. Use a <button> for an action and an <a> for a link.

zdragnar 2y ago

A button with type "submit" will happily submit the form when you click on it. If you want it to look like a link, use CSS. Putting the submit on the anchor tag is pointless- the lack of a type on the button itself means the browser is inferring the intended behavior and defaulting to type "submit" rather than type "button". As others have mentioned, the main downside is likely accessibility.