Why use a form tag when you submit via ajax?

Question

Philosophical question:

Let's say I have a web application that requires javascript and a modern browser, so progressive improvement is not a problem. If my form is built through javascript and my data updates are done via ajax POST and PUT, is there really any reason to transfer my controls to the 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 parameters that I will ignore? This is similar to retention from an earlier era.

Answer 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, you get the "Go To" button that appears on the keyboard .

Without a form wrapping input, there is nothing to send.

Of course, you can enter the input-key behavior through a keypress event, but I do not know if this works for mobile devices. I do not know about you, but I would rather work with the semantics provided by the browser than with simulating events.

In your case, you simply provide an onsubmit event onsubmit for the form that your AJAX submit will do, and then return false , overriding the actual submit.

You can simply provide action="" (which means "self"), and method not required - by default it is GET .

Answer 2

If you do not need progressive improvement, you theoretically do not need them.

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

For example, if you want ajax to send some kind of user input, it’s always easier to say: “let all the elements in this form represent them” than they say “let's take this input, these two choices and these three text fields and present them". In my experience, this really helps the developer if form tags are present.

Answer 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 that I submit with AJAX, because it is syntactically clear and makes it easy to capture all inputs in a specific form. Yes, you could do it with a div or something else, but as I said, using a form is syntactically nice.

By the way, screen readers handle the content inside the form differently, so there are accessibility issues that should be considered depending on how you decide to go. Please note that anecdotal evidence suggests that Google is considering accessibility in its rankings, so if SEO is bothering you, use the form and do it right.

Answer 4

Summary: forms for MVC, simple web applications, bad for component-oriented, rich web applications.

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

More: For typical MVC applications, the forms are excellent. In rich, complex web applications that use a lot of javascript and AJAX and with many components here and there, I don't like forms. Reason: forms cannot embed other forms. Then, if each component displays a shape, the components cannot insert each other. Very sorry. Changing all forms to divs, I can nest them, and whenever I want to capture all the parameters to pass them to ajax, I just do (with jQuery):

.

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

(or some other filtering)

instead:

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

Although, for sentimental and semantic reasons, I continue to call my divs something_form when they act as forms.

Answer 5

Not what I see. I am currently creating a web application that uses <form> s, but I use them, so I have a return method if the user has JavaScript disabled ( e.preventDefault usually stops e.preventDefault form). For your situation, when you say that the user SHOULD have JavaScript, the <form> not needed, but it may be an idea to save it in any case if the browser needs to do something with it or access it as a kind of class.

In short, no, you do not need to use <form> if you are doing pure AJAX, although you leave it to the idea if you suddenly decide to create backup code in the future.

Answer 6

In my opinion: if you use it for semantic reasons, use it for its intended purpose. The action attribute is necessary (it can also be left empty) to be well formed, you can also separate your URIs from your js logic by setting the action attribute and reading it before calling ajax.

Answer 7

I don’t understand why you need to use the form tag here. The only reason to use a form tag (in addition to getting your markup for verification) is if you want the user to "submit" data using gated input or a button tag. If you do not need it, then there is no need for a form. However, I’m not sure that this will be considered a “valid” markup. If you use it, you can simply do <form action=""> , since the action is the only required attribute of the form tag. However, you have a good point, the future of web applications will probably no longer need the form and traditional presentation methodology. Very interesting and pleases me. hehe :)