Is the form tag necessary?

Question

In my HTML code, I have a form tag that contains two input boxes, username and password. The form submits the values to a PHP file which validates the values with the database and redirects to another page if the login is successful.

The problem with this approach is that, if AJAX is not involved, it refreshes the page even if the login is unsuccessful.

I would like to remove the form tag altogether, merge the PHP code into the same file as the HTML. For this I attempted to add an onclick() event to the input boxes. But since form tag was removed, something awkward happened. I picked the values using: document.getElementByID

I want to know whether it is necessary for an input tag to be enclosed within the form tag? If I just want the input box and want to have some operation done using the onclick event, would it work?

Answer 1

It's not necessary to submit the form if you write your own handlers using onClick(). But you should maintain semantic HTML mark-up.

Answer 2

If you want to put them in a form, you still can; just don't put a submit button on the form. If you use a <button type="button"> element, the button shouldn't trigger form submission.

Answer 3

My preferred method is to leave the <form> tag but catch the onsubmit event of the form and just return false.

<form name="foo" id="foo" action="" method="post">
  <input type="text" name="bar" id="bar" />
</form>

Here's some rough PrototypeJS code that illustrates the approach.

<script type="text/javascript">
  //Handle the window onload event
  Event.observe(window, 'load', function() {

    //Handle the form submit event
    Event.observe($('foo'), 'submit', function(event) {
      //Stop the event so the form doesn't actually submit
      Event.stop(event);
    });

  });
</script>

Answer 4

It's not necessary, however, you need to make sure the form still is usable. The form tag provides better tabbed key navigation, along with the ability to submit on pressing the enter key. You can emulate these in javascript, but beware of that. If you want, you could try setting the form tag's action url to <form action="javascript:submitLogin();">, which would validate the form. If javascript was off, nothing would happen.

Answer 5

Although it is generally recommended, it is not necessary. In fact it validates as html 4.01 strict without is.

Answer 6

It is not necessary for an input tag to be enclosed in a form tag for the site to work as you want it to.

However, you should create your site in such a way that the majority of users can use it. So for those users who don't have JavaScript enabled or are viewing your site with a browser that doesn't have JavaScript capabilities, you should still develop your site so they will have a good experience.

The AJAX behavior should be added after the site works correctly without JavaScript enabled, following Progressive Enhancement principles. The best way to prevent the form from executing the default behavior is as Mark pointed out -- return false on the form's onsubmit event handler.

You will need the form tag as well if you are trying to create semantic HTML that passes validation.