HTML FORMS ATTRIBUTES

These are the available HTML forms attributes and how they are used in the form.

  • THE <FORM> ACTION ATTRIBUTE

The action attribute tells the web browser the database on the webserver to send the collected information to after submission. If the action attribute isn't provided, the collected data will be sent to the absolute URL of the current page holding the form. To know more about how the web server handles the information collected, go to the tutorial on PHP about HTML form attributes.

Here is an example:

<form action="https://currentpage.com">
  <label for="name">First name:</label><br>
  <input type="text" id="name" name="First name" value="">
  <br>
<label for "contact">Contact number:</label>
<br>
<input type="number" id="contact" name="Contact number" value ="">
<br><br>
<input type="submit" value="Submit">
</form>

However, when practicing you can use the "#" to represent a dead link or dead action page.

  • THE <FORM> AUTOCOMPLETE ATTRIBUTE

The autocomplete attribute in a form element tells the web browser to fill the fields containing the values the user has entered in the past that matches the current field. The autocomplete attribute can be set to on or off. When it is on, the above instruction happens.

Here is an example:

<form action="#" autocomplete="on">
  <label for="name">First name:</label><br>
  <input type="text" id="name" name="First name" value="">
  <br>
<label for "contact">Contact number:</label>
<br>
<input type="number" id="contact" name="Contact number" value ="">
<br><br>
<input type="submit" value="Submit">
</form>
  • THE <FORM> ENCTYPE ATTRIBUTE

Enctype is a contraction of encryption type. It tells the web browser how to encode specific values when sending them to the web server HTML form attributes.

The possible values used with the enctype are:

application/x-www-url-encoded: This the default enctype type.

multipart/form-data: This enctype type value is used when the input type value has files to upload to the web server.

text/plain: This enctype type has no encryption to it at all.

The enctype value can, however, be overridden by button formenctype value. Also note that the enctype attribute is always used with the method="post" attribute.

Here is an example of HTML forms attributes:

<form action="/fileupload.php" method="post" enctype="multipart/form-data">
  <label for="name">First name:</label><br>
  <input type="text" id="name" name="First name" value="">
  <br>
<label for "contact">Contact number:</label>
<br>
<input type="number" id="contact" name="Contact number" value ="">
<br><br>
<input type="submit" value="Submit">
</form>
  • THE <FORM> METHOD ATTRIBUTE

In the HTML forms, the method attribute tells the web browser how the collected user data should be sent. The method attribute can be sent as a URL known as GET or as an HTTP variable.

The GET method attaches the form-data name into the URL variable. It is not recommended to attach sensitive information using the GET method as the information will be displayed on the web browser address bar when you submit the form. It is useful for bookmarking unsecured information on the web.

The post method attaches the form-data into the HTTP request body without displaying it on the address bar. Since it is a secure way to send data, the data sent cannot be bookm

arked.

Here is an example HTML forms attributes:

<form action="#" method="post" target="_blank">
  <label for="name">First name:</label><br>
  <input type="text" id="name" name="First name" value="">
  <br>
<label for "contact">Contact number:</label>
<br>
<input type="number" id="contact" name="Contact number" value ="">
<br><br>
<input type="submit" value="Submit">
</form>
  • THE <FORM> REL ATTRIBUTE

The rel attribute is used to tell the web browser the relationship between the linked resource document and the current document.

In the html form element, the rel attribute is used with any of these values:

REL ATTRIBUTE VALUEFUNCTION
HelpIt is used to link to help resource documents.
External It tells the web browser that the linked document is not in the current document.
LicenseIt links to a copyright information document of terms and policies.
NextIt links to the next document in the web browser.
Noreferrert tells the web browser to omit the referer header when the user clicks on a hyperlink.
PrevIt links to the previous document.
SearchIt links to a search tool in the document.
Rel attribute values

The syntax for the rel attribute is written as:

<form rel="value">
  • THE <FORM> NOVALIDATE ATTRIBUTE

The novalidate attribute is a boolean attribute, which means a true or false attribute. When the novalidate attribute is used in the form element, it means the data entered should not be validated after submission.

Here is an example:

<form action="#" method="post" target="_blank" novalidate>
  <label for="name">First name:</label><br>
  <input type="text" id="name" name="First name" value="">
  <br>
<label for "contact">Contact number:</label>
<br>
<input type="number" id="contact" name="Contact number" value ="">
<br><br>
<input type="submit" value="Submit">
</form>
  • THE <FORM> NAME ATTRIBUTE

The name attribute in the HTML form element tells the web browser the name of the form it should be referenced to after submission.

Here is an example:

<form action="#" method="get" target="_blank" name="Allforms">
  <label for="name">First name:</label><br>
  <input type="text" id="name" name="First name" value="">
  <br>
<label for "contact">Contact number:</label>
<br>
<input type="number" id="contact" name="Contact number" value ="">
<br><br>
<input type="submit" value="Submit">
</form>
  • THE <FORM> TARGET ATTRIBUTE

After submission, the attribute tells the web browser on what page to display the response.

By default, the target attribute is always set to _self, but that can be changed by using any of the target attribute values.

They are:

TARGET ATTRIBUTE VALUEFUNCTION
BlankWhen the target attribute value is set to _blank, it will display the response in a different window.
SelfSelf is the default setting of most web browsers. It will display the response on the current web page.
ParentWhen the target attribute value is set to _parent, the web browser will display the response in the parent frame.
TopWhen the target attribute is set to _top, the web browser will display the response in the entire window body.
Target Attributes Values

Here is an example:

<form action="/action_page.php" target="_blank">
  <label for="name">First name:</label><br>
  <input type="text" id="name" name="First name" value="">
  <br>
<label for "contact">Contact number:</label>
<br>
<input type="number" id="contact" name="Contact number" value ="">
<br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>