Why usually <form> used to aggregate elements and not <div> in case when form working with ajax submit event?

Question

Hi,

Why usually <form> used to aggregate elements and not <div> in case when form working with ajax submit event?

Ajax jquery function:

$('#parse-form').submit(function() {
        $.ajax({
            url: 'controller.php',
            type: 'POST',
            dataType:'json',
            success: function(data) {
                alert(data);
            }
        });
        return false; 
    });

Way1 - form:

<form>
 <input type="text"/>
 <button type="submit">submit</button>
</form>

Way2 - div:

<div>
 <input type="text"/>
 <button type="submit">submit</button>
</div>

(Maybe because when user press enter the form submitted, but in case of more than 1 form in webpage?)

---

Update: If the reason to write form because javascript disable state true:

1.What should be added in code that form will have 2 option ajax submit and regular submit ?

2.Does this reason taking place when we have website that working with jquery ui or other javascript library ui (menu, catalog, etc..)

Thanks

Answer 1

More than one form is a possible reason, but the bigger issue is graceful degradation for users who have javascript turned off - just using divs locks out any user who has JS disabled.

Answer 2

The idea is that if Javascript is turned off, the user can still submit the form in the traditional way.

Answer 3

Because the HTML specification doesn't much care for Javascript, and any sort of input element is pointless without an associated action, and hence a form element, in HTML.

Answer 4

To your update :

1. You should use the default submit system when designing your webpage and overwrite it with JS

2. You're supposed to have graceful degradation for every single functionality you use accross your website

Answer 5

I find very good tutorial jquery + Ajax + PHP for graceful degradation reason that makes form tag the only proper choise.

http://sholsinger.com/archive/2009/08/gracefully-degrading-ajax-php-jquery/