HTML Forms

HTML Forms

The HTML form is a document section that contains controls such as text fields, password fields, checkboxes, radio buttons, submit buttons, menus, etc.

An HTML form makes it easy for the user to enter data to be sent to the server for processing, such as name, email address, password, phone number, etc. Users can enter their information into the given form fields and then submit the form by clicking on the submit button. Once the form is submitted, the data is sent to the server for processing. This could involve storing it in a database, sending it to another server for further processing, or displaying it on the webpage in some form.

 If you're interested in learning more about how to create HTML forms, I recommend taking an HTML Certification Course. HTML forms are a very important component of many web applications and are widely used for online surveys, contact forms, and e-commerce sites. HTML Form elements and HTML input tags are also part of the HTML Form which helps to make to make it work, we will learn about these in next article

Use of HTML Form

HTML forms are required if you want to collect some data from the user. Here are some Examples

1. Contact forms: some websites have a contact form that allows visitors to send a message directly to the site owner or support team.
2. Registration forms: Some websites require users to create an account on the website and then registration forms came into use to collect user data, such as name, email address, and password feedback
3. Forms: Many websites use feedback forms to gather feedback from visitors about their experience with the given service.
4. Surveys and polls: Some websites use HTML forms to create surveys and polls to gather visitor data.
5. Order forms: E-commerce websites use order forms like mention address, and mobile no. to allow customers to purchase products and services online.
6. Login forms: Websites that require users to log in to access some specific features will use login forms to collect user credentials.

Syntax

<form>
  <!--form elements-->
</form>

Form Attributes in HTML

Form attributes in HTML are used to define the behavior, appearance, and functionality of HTML forms

 Action Attribute in HTML

What is Form Action in HTML?

The action attribute in HTML Forms defines the action to be performed when the form is submitted. Usually, the form data is sent to a file on the server when the user clicks on the submit button. The action attribute value defines the web page where the information is going. It can be .php, .jsp, .asp, etc., or any URL where you want to process your form.

Example

<form action="scholar.html" method="post"> 
<label>Email:</label><br> 
<input type="text" name="name"><br><br> 
<label>User Password</label><br> 
<input type="password" name="pass"><br><br> 
 <input type="submit"> 
   </form>

Output

Method attribute in HTML

The method attribute in HTML defines the HTTP method that the browser is used to submit the form. The possible values of the method attribute can be:

post attribute: You can use the post attribute of the method attribute when you want to process the sensitive data as it does not display the submitted data in the URL.

Example:

<form action="scholar.html" method="post"> 

get attribute: The get attribute of the method attribute is the default value while submitting the form.

Example

<form action="scholar.html" method="get"> 

Get vs post Method

• Data submission: Get method attribute increases form data to the URL of the action page, while the post method attribute sends the form data in the request body
• Security: The POST method attribute is more secure than the GET method attribute as the data is not visible in the URL
• Data length: GET method attribute has a limit on the amount of data that can be submitted, while the POST method attribute does not have any limit.

Target attribute in HTML

The target attribute in HTML Forms says where to open the response after submitting the form. There are some keywords in the target attribute such as :

_self: By using _self as an attribute value, then the response will show on the current page only.

Example:

<form action="schlor.html" method="get" target="_self"> 

_blank: By using the _blank attribute with HTML <target> attribute it will load the response on a new page.

Example:

<form action="schlor.html" method="get" target="_blank"> 

Autocomplete attribute in HTML

The autocomplete attribute in HTML is a newly added attribute of HTML5. It enables an input field to complete by itself. It can have two values "on" and "off" which enables autocomplete either ON or OFF. The default value of this attribute is "on".

Example:

<form action="scholar.html" method="get" autocomplete="on">

Example:

<form action="scholar.html" method="get" autocomplete="off"> 

This attribute can be used with <form> element and <input> element both.

enctype attribute in HTML

The enctype attribute in HTML defines the encoding type of form content while submitting the form to the server. The possible values of enctype can be:

application/x-www-form-urlencoded: It's a default encoding type if the enctype attribute is not added in the form. All characters should be encoded before submitting the form.

Example:

<form action="scholar.html" method="post" enctype="application/x-www-form-urlencoded" >

multipart/form-data: It does not encode any character. It is used when our form has file-upload controls.

Example:

<form action="scholar.html" method="post" enctype="multipart/form-data">

text/plain (HTML5): In this encoding type only spaces are encoded into the + symbol and no other special character is encoded.

Example:

<form action="scholar.html" method="post" enctype="text/plain" >

Novalidate attribute in HTML

The novalidate attribute in HTML is a newly added Boolean attribute of HTML5. If we apply the novalidate attribute in the form then it does not perform any type of validation and submit the form.

Example:

<form action = "scholar.html" method = "get" novalidate>

Summary

HTML forms are one of the important components of the web, it is used to collect user input and data. To make forms functional and accessible, they require attributes that help to define their behavior and appearance. In this article, you have learned about HTML Forms and Forms attributes in HTML but there is a lot more like Form elements in HTML and HTML input tags. Form elements are the building blocks of web forms that allow users to submit data to a web server. The <form> and <input> tags are used to create various form controls such as text boxes, radio buttons, checkboxes, submit buttons, and more. These are the factors that are needed to create an HTML form. In the next article, we will learn about these factors in more detail. If you are interested in learning more about HTML form creation, HTML Certification Training can help you with that.

Take our Html skill challenge to evaluate yourself!

In less than 5 minutes, with our skill challenge, you can identify your knowledge gaps and strengths in a given skill.

GET FREE CHALLENGE