HTML Tutorial - HTML Form Attributes








Form autocomplete

There are times when you don't want the browser to fill out the form automatically.

We can use autocomplete attribute from form element to control this.

There are two allowed values for the autocomplete attribute: on and off.

The on value permits the browser to fill out the form and is the default value.

The following code shows how you can do this, using the autocomplete attribute on the form element.

<!DOCTYPE HTML>
<html>
<body>
  <form autocomplete="off" 
        method="post" 
        action="http://example.com/form">
    <input name="fave" /> <input name="name" />
    <button>Submit Vote</button>
  </form><!--from   www  .j  a  va2 s. co m-->
</body>
</html>

Click to view the demo





Example 1

You can be more specific by applying the autocomplete attribute to individual input elements, as shown in the following code.

<!DOCTYPE HTML>
<html>
<body>
  <form autocomplete="off" 
        method="post" 
        action="http://example.com/form">
    <input autocomplete="on" name="fave" /> 
    <input name="name" />
    <button>Submit Vote</button>
  </form><!--from www  .  j a v  a 2 s  .c o m-->
</body>
</html>

Click to view the demo

The autocomplete attribute on the form element sets the default policy for the input elements in the form.

You can override that policy for individual elements.

In the code above, the attribute on the form element disabled autocomplete, but the same attribute applied to the first input element switches it back on.

The second input element, to which the autocomplete attribute has not been applied, is subject to the form-wide policy.





Form Target

The default behavior of a browser is to replace the page with the response the server.

You can change this behavior by using the target attribute on the form element.

This attribute works in the same way as the target attribute on the a element, and you can select from the range of targets.

  • _blank - Opens the server response in a new window (or tab)
  • _parent - Opens the server response in the parent frameset
  • _self - Opens the server response in the current window (which is the default behavior)
  • _top - Opens the server response in the full body of the window.
  • <frame> - Opens the server response in the specified frame

The following code shows how to use the target attribute.

<!DOCTYPE HTML>
<html>
<body>
  <form target="_blank" 
        method="post" 
        action="http://example.com/form">
    <input autocomplete="on" name="fave" /> 
    <input name="name" />
    <button>Submit Vote</button>
  </form><!--from w w w  .j av a2  s .  co  m-->
</body>
</html>

Click to view the demo

Form Name

The name attribute sets a unique identifier for a form.

The following code shows a form element with the name and id attributes. They have the same value.

<!DOCTYPE HTML>
<html>
<body>
  <form name="fruitvote" 
        id="fruitvote" 
        method="post"
      action="http://example.com/form">
    <input name="fave" /> 
    <input name="name" />
    <button>Submit Vote</button>
  </form>
</body>
</html>

The value of the name attribute is not sent to the server when the form is posted. This attribute is only useful in the DOM operation in the client side and is not as important as the name attribute on the input element.

If an input element doesn't have a name attribute, the data that the user has entered will not be sent to the server when the form is submitted.

form attribute

In HTML5, you can associate elements with forms anywhere in the document by using the form attribute, which is defined by input, button, and the other form-related elements.

To associate an element with a form that is not an antecedent, you set the form attribute to the id value of the form.

The following code shows how to use the form Attribute.

<!DOCTYPE HTML>
<html>
<body>
  <form id="voteform" method="post" action="http://example.com/form">
    <p>
      <label for="fave">Fruit: <input autofocus id="fave"
        name="fave" /></label>
    </p><!-- ww  w. ja v a  2  s  .  c om-->
  </form>
  <p>
    <label for="name">Name: <input form="voteform" id="name"
      name="name" />
    </label>
  </p>
  <button form="voteform" type="submit">Submit Vote</button>
  <button form="voteform" type="reset">Reset</button>
</body>
</html>

Click to view the demo

In code above, only one of the input elements is a descendent of the form element. The other input element and both of the button elements are outside of the form element, and they use the form attribute to associate themselves with the form.