Why use a form tag when you're submitting via ajax?

Question

Philosophical question:

Say I've got a web app that requires javascript and a modern browser, so progressive enhancement is not an issue. If my form is being built via javascript, and my data updates are all being done via ajax POSTs & PUTs, is there really any reason to wrap my controls in a form tag? If I'm still going to use the tag, say for semantic or structural reasons, is there any reason to have action and method params that I'm going to ignore? It kind of feels like a hold-over from an earlier era to me.

Solution 1

There is at least one important user-experience feature provided specifically by wrapping inputs inside a form tag:

The enter key will submit the form. In fact, in Mobile Safari, this is how you get the "Go" button to appear on the keyboard.

Without a form wrapping the inputs, there is nothing to submit.

You can of course provide enter-key behavior through a keypress event, but I don't know about if this works for mobile devices. I don't know about you, but I'd rather work with the semantics provided by the browser than have to imitate them with events.

In your case, you would simply provide an onsubmit event handler for the form, which would do your AJAX submit, then return false, canceling the actual submit.

You can simply provide action="" (which means "self"), and method is not required — it defaults to GET.

Solution 2

If you do not need progressive enhancement, you theoretically don't need them.

On the other hand, forms have some cool grouping and semantic effects. Using them, you can group your form elements logically, and make it easier for your scripts to gather the values of certain elements.

For example if you want to ajax-submit some user input, it is always easier to say: "let's take all elements in this form and submit them" than saying "let's take this input, these two selects and these three textareas and submit them". In my experience, it actually helps the developer if form tags are present.

Solution 3

AJAX is great but as JamWaffles (+1 to him) said, using form tags provides a fallback method.

Personally I use form tags, even for things I submit with AJAX because it is syntactically clear and makes it easy to grab all inputs within a specific form. Yes you could do this with a div or whatever too but as I said, using a form is syntactically nice.

Incidentally, screen readers treat the content inside a form differently so there are accessibility issues to be considered whichever way you choose to go. Note that anecdotal evidence suggests that Google considers accessibility in its rankings so if SEO is a concern for you, use a form and do it right.

Solution 4

Summary: forms OK for MVC, simple web apps, bad for component oriented, rich web apps.

Reason: forms cannot nest other forms: big limitation for a component-oriented architecture.

Details: For typical MVC applications, forms are great. In rich, complex web applications using a lot of javascript and AJAX and with a lot of components here and there, I don't like forms. Reason: forms cannot nest another forms. Then if each component renders a form, components cannot nest each other. Too bad. By changing all forms to divs, I can nest them, and whenever I want to grab all parameters in order to pass them to ajax, I just do (with jQuery):

$("#id_of_my_div").find("[name]").serialize();

(or some other filtering)

instead of:

$("#id_of_my_form").serialize();

Though, for sentimental and semantic reasons, I keep naming my divs something_form when they are acting as forms.

Solution 5

In my opinion: If you use it for semantic reasons, then use it as intended. The action attribute is required (also can be left empty) to be well-formed, also you can separate your URI-s from your js logic, by setting the action attribute, and reading it before the ajax call.

View more solutions

Comments

[Omer Tuchfeld]

I guess not... there is no reason for them, they are useful but must having them for controls is pretty stupid... You can always put a blank valid form like this: <form action="#" method="post" onsubmit="return false;"> </form>

[Admin]

You could have the action go to a page that says "This site requires javascript, and your browser isn't executing the javascript. Screw you."

[Alex K.]

Not being able to identify which elements belonging to a particular form could have some impact on accessibility/screen reader software

[Brian Patterson]

Im pretty sure you could just disable the submit button with disabled="disabled"

[Brian Patterson]

Im pretty sure you could just disable the submit button with disabled="disabled"

[Reid]

+1 -- this is exactly what I thought when I saw the question.

[Brian Patterson]

This is the best answer so far. NOT the one currently at the top of the list as of this comment.

[Nicole]

@Brian - the poster says "data updates are being done via ajax POSTS & PUTS". That pretty clearly means submit to me, just not the page refresh kind. Just because you don't want a page refresh doesn't mean you don't want the same user experience.

[Matthew Pitts]

Right, but in certain circumstances you don't need the added benefit of serializing a form before submitting on the client, then being able to de-serialize on the server. Sometimes, you just need to submit a couple of values for which there is not a corresponding model on the server. In these cases, I opt to not use a form.

[pspahn]

You may have overlapping values in your form. A form may have several fields titled "options" where each option's value is an auto-incremented ID. Without setting <form> as a wrapper, you might be stepping all over yourself when trying to get specific values from the form's input options as there may easily be values of 1, 2, 3, etc.

[Abdalla Arbab]

But If you consider that spam bots may access your forms...then you may not add action or method attributes. 70% of them doesn't use javascript.

[Joel M]

Yes, forms not being able to be nested is an enormous limitation in some contexts. I almost always use a form tag but in my opinion you should definitely consider not using it if its going to make your life difficult for any reason.