Back when I learned HTML, CGI was king, and the proper way to interact with the server was to put <input> tags inside of a <form> tag. When the user pressed the "submit" button, either an HTTP GET or an HTTP POST message was sent to the server and the browser refreshed using the HTML code returned from the CGI program on the server.

Now I've started doing web stuff again and I've been learning JavaScript and jQuery. Since jQuery can intercept events like click, keypress, and focusout, and can read data with $.ajax() and $.getJSON(), is there still a need to have a <form> tag at all?

Maybe "real forms" are still necessary if I want to support users that have JavaScript turned off?

Back when I learned HTML, CGI was king, and the proper way to interact with the server was to put <input> tags inside of a <form> tag. When the user pressed the "submit" button, either an HTTP GET or an HTTP POST message was sent to the server and the browser refreshed using the HTML code returned from the CGI program on the server.

Now I've started doing web stuff again and I've been learning JavaScript and jQuery. Since jQuery can intercept events like click, keypress, and focusout, and can read data with $.ajax() and $.getJSON(), is there still a need to have a <form> tag at all?

Maybe "real forms" are still necessary if I want to support users that have JavaScript turned off?

• javascript
• jquery
• html
• ajax
• forms

• 1 You should consider JavaScript as 'extras' to the presentation layer, not a replacement for HTML standards. Yes, you can use JavaScript behaviors in place of DOM behaviors. But, just as it's possible to drive 90mph in a 45mph zone, you really shouldn't. See the wiki article on Unobtrusive JavaScript for more information: en.wikipedia/wiki/Unobtrusive_JavaScript – Jim Schubert Commented Mar 25, 2011 at 19:29
• If I can summarize the answers so far, it sounds like the <form> tag is only necessary when serializing the elements in a form. But thinking deeper, it sounds like there is a difference between "single-page" websites like GMail and Google Maps, and multipage websites like Amazon.. I can see the value of using forms for multipage websites, but "single-page" websites might be better off with pure JavaScript and no forms, although it probably wouldn't hurt to have forms as long as the submission is done asynchronously with JavaScript. – Nathan Farrington Commented Mar 25, 2011 at 20:32

3 Answers 3

Forms can still help you, but the short answer is no, not really.

If you have a group of inputs that are going to pertain to a certain AJAX request, then it might be easier to keep them in their own form for validation/serialization purposes. For example:

$.ajax({
    url: 'ajax/test.html',
    dataType: 'json',
    method: 'POST',
    content: $('form#login_form').serialize(), // <-- Serialize elements only in
    success: function(data) {                  //     the login_form container.
        $('.result').html(data);
    }
});

Depending on your requirements, you may need to keep your forms around for nice degradation for users who have Javascript turned off. You're still going to need to submit the forms, so having the form set up and in place is a good idea.

If you're using ajax, as long as you don't have any direct posts or gets, a form tag is not required. However, it is still good html design.

You can do both, submit or not. It can depend on which form element you want to listen to for changes. But you can do something like this as just one example:

<SELECT NAME="tree" onchange="doSomething( someVar );">

But again, it depends on which element of the page you want to manipulate.