HTML form or div for JQuery login?

Question

I want to create a login form on a single HTML page to display with JQuery (I am new to the technology).

I am wondering whether I should use a <div> and hide/display it, or use a <form> and hide/display it. The info will be sent to a servlet with Ajax.

If I use a <div>, what should I use as a substitute for <input> available in forms?

If I use a <form>, I believe I have to provide an action, which is annoying, since I use a single page. Is there a way to dodge this issue?

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

Answer 1

If I use a <div>, what should I use as a substitute for <input> available in forms?

It's perfectly legit to include <input> outside of <form>.

Having said that I would typically use a <form> so you can bind to its onsubmit event, instead of having to worry about people pressing Enter to submit the form and what events that generates (which is dependent on the browser and contents of the form). Better to mark a form up as a form and let the browser apply its normal form-like behaviours than to chase around trying to fake it.

Ideally, to do progressive enhancement properly, you should make the form work without JavaScript first, so there will actually be something useful at which to point action. Then add scripting/XMLHttpRequest on top. If you must have a form that only works with script, you could add it to the page from script, so that it's not present for non-JS users and they don't get confused trying to submit it.

Answer 2

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

Use a form. Build on things that work

If I use a <div>, what should I use as a substitute for <input> available in forms?

If you were to use a div then you would still use an input, but use a form.

If I use a <form>, I believe I have to provide an action, which is annoying, since I use a single page.

Don't do that. Build on things that work.