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:
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
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 VALUE | FUNCTION |
Help | It is used to link to help resource documents. |
External | It tells the web browser that the linked document is not in the current document. |
License | It links to a copyright information document of terms and policies. |
Next | It links to the next document in the web browser. |
Noreferrer | t tells the web browser to omit the referer header when the user clicks on a hyperlink. |
Prev | It links to the previous document. |
Search | It links to a search tool in the document. |
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 VALUE | FUNCTION |
Blank | When the target attribute value is set to _blank, it will display the response in a different window. |
Self | Self is the default setting of most web browsers. It will display the response on the current web page. |
Parent | When the target attribute value is set to _parent, the web browser will display the response in the parent frame. |
Top | When the target attribute is set to _top, the web browser will display the response in the entire window body. |
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>