Geek Answers Handbook

HTML form or div to enter jQuery?

I want to create a login form on a single HTML page to display using jQuery (I am new to this technology).

I am wondering whether to use a <div> , hide / show it, or use a <form> and hide / show it. Information will be sent to the servlet using Ajax.

If I use a <div> , what should I use as a replacement for the <input> available on forms?

If I use <form> , I believe that I should provide an action that is annoying as I use one page. Is there any way to avoid this problem?

What is the recommended login method to use in this case, <div> or <form> ?

+4
source share
5 answers

You should use the <form> tag because it is semantically correct (users fill out the login form )

You can leave action="" on the form and prevent the form from being onsubmit using the onsubmit property:

 $("form#myForm").submit(function() { // do your ajax here return false; // prevents the default action });
+3
source

If I use a <div> , what should I use as a replacement for the <input> available on forms?

It is acceptable to include <input> outside of <form> .

Having said that, I would usually use a <form> so that you can bind to its onsubmit event, instead of worrying about people pressing Enter to submit the form and what events that are generated (which depends on the browser and the form contents ) It is better to mark the form as a form and allow the browser to apply its usual behavior similar to the form than to chase around trying to fake it.

Ideally, to make progressive improvement properly, you should first create a form without JavaScript, so there will actually be something useful to indicate action . Then add the / XMLHttpRequest scripts on top. If you must have a form that works only with a script, you can add it to the page with the script so that it does not appear to users who are not JS users, and they are not confused when trying to submit it.

+12
source

I am wondering whether to use a <div> , hide / show it, or use a <form> and hide / show it.

Use the form. Build Things That Work

If I use a <div> , what should I use as a replacement for the <input> available on forms?

If you must use a div, you will still use input, but use a form.

If I use <form> , I believe that I should provide an action that is annoying as I use one page.

Do not do this. Work on what works.

+9
source

It practically doesn’t matter - if you are not concerned about semantic content (a <form> conveys this is intended for user input more clearly than a <div> ), elegant degradation (a <form> can work without JavaScript), accessibility (which is probably require the preservation of competent degradation), progressive improvement or unobtrusive javascript .

+5
source

If you plan to use the application for users without javascript enabled, use the form element, which is the standard way to represent forms in HTML.

If this is only for ajax type postbacks, you can also use a DIV. Of course, you still need <input ../> elements, since they cannot be replaced with anything else.

One thing you get when using the form approach is that you can then call the serialize() method of the form element to get all field names + values ​​in the string.

EDIT: No, in fact, the serialize() method can be used for any DOM element, so form has no advantage over a div .

+1
source

More articles:


All Articles