HTML5 Anchor Tags and Submit Buttons
May 31, 2013
Earlier I was working on an app that uses Bootstrap and FW/1; specifically, building some UI-prototype stuff for a client so they can see how their legacy app might look if it were done in Bootstrap (the client actually approved building new versions of both of their apps with FW/1 and Bootstrap...even after telling them how much work that will take, the pitfals and concerns, they still said to go ahead...I LOVE this client, but that's another story).
I've got some code for buttons on the "login" screen, and since the buttons don't DO anything yet, I figured I'd just use the HTML5 "can wrap ANYthing with an anchor tag" functionality, to make the buttons "work" quickly (hey, it's a wireframe, this will work fine for now). My code looked like so: The "forgot password" button worked fine; but the "sign in" button did not. After doing some debugging I saw the differnce in the two, this little bit here:
type="submit"
Yep. That's it. As soon as I changed it to type="button", the code ran fine.
So while the <a> tag CAN be wrapped around any element in an HTML5 document (at least in theory), it doesn't behave the same way around a type="submit" button as it does around a type="button" button. In this case, the anchor tag was being ignored, and my button was performing the form submit, which is exactly what i didn't want to have happen in the prototype.
This is probably well documented somewhere in the HTML5 spec, but hey it's Friday afternoon and if I didn't post "reminders to myself" I'd probably never blog anything. :)
-nolan
I've got some code for buttons on the "login" screen, and since the buttons don't DO anything yet, I figured I'd just use the HTML5 "can wrap ANYthing with an anchor tag" functionality, to make the buttons "work" quickly (hey, it's a wireframe, this will work fine for now). My code looked like so: The "forgot password" button worked fine; but the "sign in" button did not. After doing some debugging I saw the differnce in the two, this little bit here:
type="submit"
Yep. That's it. As soon as I changed it to type="button", the code ran fine.
So while the <a> tag CAN be wrapped around any element in an HTML5 document (at least in theory), it doesn't behave the same way around a type="submit" button as it does around a type="button" button. In this case, the anchor tag was being ignored, and my button was performing the form submit, which is exactly what i didn't want to have happen in the prototype.
This is probably well documented somewhere in the HTML5 spec, but hey it's Friday afternoon and if I didn't post "reminders to myself" I'd probably never blog anything. :)
-nolan