CODEWITHSUNDEEP
phphtml
RKh
RKh

Reputation: 14161

Is the form tag necessary?

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?

Upvotes: 1

Views: 1557

Answers (6)

sheats
sheats

Reputation: 34662

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.

Upvotes: 2

GameFreak
GameFreak

Reputation: 2931

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

Upvotes: 0

CodeJoust
CodeJoust

Reputation: 3790

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.

Upvotes: 0

Mark Biek
Mark Biek

Reputation: 150749

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>

Upvotes: 11

John Calsbeek
John Calsbeek

Reputation: 36497

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.

Upvotes: 2

rubayeet
rubayeet

Reputation: 9400

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

Upvotes: 2

Related Questions