Why use <form> with jquery

Question

If I am writing an application where I can dictate that the users must have a modern browser with javascript enabled, what is the benefit of using the html tag.

For instance if I submit all of my "forms" by doing something like this, but I don't actually have any form tags in my html. I just build a datalist to pass through the data parameter of the $.ajax call

$('#submit_form').click(function(){
   var datalist='foo='+$('#foo').val();
   $.ajax({
     // ajax json here
   });
}

Why would I use the form tag in my html code? I am sure there is probably a good reason, but a friend asked me the other day and I couldn't give him a good reason why it was needed.

If you don't need a form, either as a fallback or to serialize the data or for validation or anything else a form can be useful for, there's no reason to use a form. — adeneo
– adeneo, Commented Jan 20, 2014 at 19:09
Forms are optional -- you don't have to use them unless you specifically want to refer to items within the form and handle a form like a form... — Dan H
– Dan H, Commented Jan 20, 2014 at 19:10
The only other reason I can think of is that I'm not sure if validators kick up a fuss if they find input tags that are not contained within a form tag. If that sort of thing is important to your app, that could be a concern. — Jason M. Batchelor
– Jason M. Batchelor, Commented Jan 20, 2014 at 19:11
Don't you need a <form> in order to post a file (<input type="file" />)? — David Hoerster
– David Hoerster, Commented Jan 20, 2014 at 19:13
@DavidHoerster : I think you can post a file from an AJAX call without the <form> element. However, for fallback purposes you might want an actual form, though the OP has specified he's requiring his users to have a modern browser with JS enabled. — Jason M. Batchelor
– Jason M. Batchelor, Commented Jan 20, 2014 at 19:20

Quentin · Accepted Answer · 2014-01-20 19:10:54Z

1

Your server side fallback will cause the form to continue to work if the JavaScript fails for some reason other than "the user has turned it off" (such as a network interruption)
Having the fields logically grouped in a form will make them more easily navigable in most screen reader software.

answered Jan 20, 2014 at 19:10

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Gilberg Over a year ago

1. Can you tell me more about how network interruption may play a role? 2. What is a screen reader software?

Quentin Over a year ago

1. For example, user is on a train and enters a tunnel while downloading the page. The Internet connection drops, the JavaScript file doesn't download. 2. Screen readers read out content and describe UI controls over headphones/speakers so people with vision related disabilities can still use computers.

Gilberg Over a year ago

Thanks for the response. I understand about screen readers and that is a great point. Tell me more about the Network Interruption. I mean if a connection is lost, you not going to get much done on a website that doesn't use javascript either. In your experience would you recommend to always use forms even if I can save some time by not using them.

Quentin Over a year ago

If the network is lost momentarily then it can trash an attempt to load a file, and if that file is JS or CSS then, if the site is well designed it will still be usable. Yes, use forms, skipping them isn't going to save you a significant amount of time.

Idan Magled · Accepted Answer · 2014-01-20 19:57:26Z

1

that and also you can use the html 5 attribute such as "required" (not submitting the form if this field empty)

<input type="text" required = required />

or <input type="email"/> (make sure its a valid email address). without a form this attribute will not work. with this code you save a bunch of code in JS.

hope i helped.

edited Jan 20, 2014 at 19:57

answered Jan 20, 2014 at 19:15

Idan Magled

2,2161 gold badge24 silver badges35 bronze badges

Collectives™ on Stack Overflow

Why use <form> with jquery

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related