HTML Form Attributes

Form Input Attribute

In order to accept data from the user, the HTML Form Attribute element is used to construct interactive controls for web-based forms. This attribute can be applied to the elements mentioned below:

The Value Attribute

The value attribute defines an input field's initial value.

<form>
  First name:<input type="text" name="first-name" value="Robert">
  Last name:<input type="text" name="last-name">
</form>

Output:

The readonly Attribute

The readonly attribute indicates that the input field is read-only, which implies that the value cannot be modified.

<form>
  First name:<input type="text" name="first-name" value="Robert" readonly>
  Last name:<input type="text" name="last-name">
</form>

Output:

The disabled Attribute

The disabled attribute indicates whether or not the input field is involved. You are unable to make any changes to the input field.

<form>
  First name:<input type="text" name="first-name" value="Robert" disabled>
  Last name:<input type="text" name="last-name" >
</form>

Output:

The size Attribute

The size defines the character size of the input field.

<form>
  Name:<input type="text" name="first-name" value="Peter" size="30">
</form>

Output:

The autocomplete Attribute

The autocomplete defines about the autocomplete option in an input field. When turned on, the browser automatically completes values of input fields based on previous values.

<form autocomplete="on">
  Name:<input type="text" name="first-name" >
</form>

Output:

The Action Attribute

HTML form action attribute is used to specify the action that takes place when the form is submitted. Most of the times, the form data is sent to a file on the server side which handles the form data. If there is no action attribute, then the action will be set to the current page.

<form action="handle_name.php">
  <label for="firstName">First name:</label>

  <input required type="text" id="firstName" name="firstName" />

  <label for="lastName">Last name:</label>

  <input required type="text" id="lastName" name="lastName" />


  <input type="submit" value="Submit" />
</form>

Output:

The Target Attribute

The HTML form target attribute is used to specify where the response that is received gets displayed after submitting the form. Following are the possible target attribute values:

• _blank: Response will be shown in a new tab.
• _self:Response will be shown in the current window. (Default)
• _parent:Response will be shown in the parent frame.
• _top:Response will be shown in the full body of the current window.
• Framename:Response will be shown in a named frame.

The Method Attribute

The HTML form method attribute is used to specify the HTTP method used when form data is submitted. The form data can be sent as http post transaction if the post method is used (method="POST") or it can be sent as variables in the URL using the get method (method="GET").

<form action="/handle_data.php" method="GET">

<form action="/handle_data.php" method="POST">

The nonvalidate Attribute

The HTML form novalidate attribute is used to specify if the form data should be validated when submitted. It is a boolean attribute, so when present, the form data is not to be validated when submitted.

<form action="novalidate.php" novalidate>

The enctype Attribute

The enctype attribute is used to specify how the form’s data is encoded when it is submitted to the server. This attribute can only be used if the method attribute is set to post.

Possible Values:

• application/x-www-form-urlencoded:This is the default. All the characters will be encoded before they are sent.
• multipart/form-data:This value is important if the user is required to submit a file in the form.
• text/plain:This will send data without any encoding.