Single page applications and <form> elements

Question

Are there still any benefits of using a <form> element instead of let's say a <div> element in the context of a single page application? The purpose of the <form> element makes sense to me if the "form" submission isn't made with an ajax call (I'm talking about the more traditional way of submitting a form, with a input/button of type "submit" and the action attribute of the form element that describes the url to call), but otherwise I do not see it's utility (maybe for search engines?).

Neurasthenia

1. form elements make clear your intentions. 2. some methods only work with forms like serialize() – Checkroom

For my information, is the "serialize" method you are talking about from PHP? – Neurasthenia

No, I meant from jquery. Sorry, should have made that clear – Checkroom

Ah, no problem! Surprisingly, I have never used or needed this method, but it's good to know. – Neurasthenia

Answer 1

1. Semantically, using <form> is clearer than <div>.
2. If you still want your form to work without JavaScript, you'd better choose <form> (since you used the word application, this may not be considered though).
3. More importantly, it'll be really painful of using <div> if you do care about accessibility.

Jerid

Perfect! If anyone has more arguments as to why the form element is better than a div for an actual form, in the context of a single page application, don't hesitate to comment below. – Neurasthenia

Accessibility shouldn't be optional. Using semantic HTML mark-up and relevant attributes achieve SEO and accessibility conformance with ease. When a framework malfunctions b/c of using correct markup, it's clear the makers didn't understand the nature of HTML to begin with and makes me wonder what other "gems" are in there waiting to mess up conformance and SEO. – Tautog

Instead of a <button type="submit">Submit</button> use a <button type="button">Submit</button>. It'll work like a charm and you won't need any extra JS to re-enable submitting a form when you actually want to send data. – Tautog

How would a single page app work without javascript? – Dampen

Answer 2

No, you don't. The form tag, in terms of SPAs is largely archaic. However, it can be beneficial for accessibility issues.

As an alternative, you can specify roll="form".

<div role="form" 

In general, there's no down side to use form. And, there are several good reasons to use the form tag, and only very few against. Treat it like a wrapping div tag around your input elements: also, you don't have to use the submit action.

• Mozilla's take on the use of form tags.
• W3School Accessibility Forms Introduction
• Web Dev
• Mozilla's description of the submit action.

Larainelarboard

Answer 3

I think the answer is, no, if you're not going to "submit" a form, there's no need for the <form tag. Very often, our interactive controls are in places that would not be considered a "form" - checkboxes here, select menus there. I think most of them work just fine without a

Accessibility, I don't know anything about.

Feint

Accessibility is automatically built-in based on semantic HTML mark-up and attributes. If you can't use the correct mark-up you're damaging your application's experience, seo, and accessibility conformance. – Tautog