HTML Forms - Basics and Types of HTML5 Form Controls

1. What are HTML Forms?

Sometimes we want to collect certain data from our website visitors for a purpose. For this intent, we incorporate the HTML forms by utilizing the HTML5 <form> element. By using the HTML forms, we can collect different types of information including text data, numbers, email addresses, etc. Basically, we provide our users with an HTML form that contains various types of input fields.

In this tutorial, we will be looking into the HTML forms, basics, and how to create them. Further, we will explore the different types of HTML5 from controls and the details we collect using specific control tags. Moreover, some special attributes that we can incorporate into a form, and lastly we will discuss the submission and validation of the HTML5 forms.

1.1. Syntax of HTML5 Forms

The syntax of HTML forms is very straightforward and we can incorporate an HTML5 form by the following syntax notation. We can include an HTML5 form by the below syntax.

<form>
<!-- Add some form input elements here -->
</form>

1.2. How to Create an HTML5 Form?

• Let us discern now how can we employ the HTML5 <form> element to create a form.
• By using the above syntax of HTML forms, we have added an example below with some input fields.
• Further, these HTML forms can have distinct input fields depending upon the required data.
• Also, these input fields are also named as form controls or control elements.
• Additionally, the users fill up the forms by named controls that are usually set by the name HTML attribute.
• We will discuss all of the input HTML elements used in HTML5 forms later in this tutorial.
• Consider the following instance to understand how can we create an HTML5 form.
• You can also visit the CODELAB by following the link to learn more about HTML5 forms.

2. What are HTML Forms Basics?

2.1. Why Use HTML Forms?

• As we are living in a modern world and technologies are advancing day by day.
• Therefore, we have to interact with people globally over the internet and receive multiple sorts of data.
• Moreover, due to excessive usage of the internet and most businesses shifting online, companies want to acquire consumers' data abundantly.
• Firms receive statistics in various ways as per their need like sign-ups, sing-in, feedback, etc.
• Further, the data may include name, email address, phone number, address, gender, etc.
• In order to collect these types of data, HTML5 markup allows us miscellaneous form elements to get the appropriate kind of input from the users.
• As the use of forms is so much involved in our daily life, we have to keep some basics and rules in our minds for their correct usage to get the relevant data keeping on a safer side.
• The basics of HTML5 forms are helpful for the developers to develop a form with appropriate standards.

2.2. Basics of HTML Forms Controls

Since we create an HTML form in order to collect data from the users. The HTML form collects the data by employing certain input elements known as form controls.

• Also, these are named form controls with HTML name attribute and further, there are variety of input control elements as per the data type.
• Moreover, the scope of the name attribute is limited to that particular HTML form control element.
• Additionally, each control has an "initial" value and a "current" value.
• Generally, the "initial" control value of an input element is set by using the "value" attribute.
• However, the "initial" value of the <textarea> element is declared by its contents and the "initial" value of the <object> tag is given by the object implementation.
• Initially, the "current" value of the HTML form controls is equal to the "initial" control value which is later changed by users or other scripts.
• Furthermore, the "initial" value of a control does not change and it sets back to its original value upon resetting the form.

3. Types of  HTML Forms Inputs or Controls

3.1. Types of User Input Data With HTML Forms

Depending upon the circumstances and requirements, the HTML forms may be incorporated to obtain the below types of information from the users.

• Search Query: The most common use of the form is the Google search or other search engines
• User Input: Register or Sign-up on the websites
• User Password: Login or signup to any website requires password input
• Filter Data: With choices and other filters
• Making choices: Single or even multiple choices
• Upload Files: Uploading files or images to social media or other websites
• Submit Data: Submitting the text and files to different websites and platforms
• Reset Form: Resetting an already filled form

3.2. Types of Controls in HTML Forms

Usually, we can include the below types of form controls to get the user's data.

1. Button Controls
2. Checkbox Controls
3. Radio Controls
4. Menu Controls
5. Text Input Controls
6. File Select Controls
7. Hidden Controls
8. Object Controls

1. Form Button Controls

<form>
	<label>Your Name</label>
	<input type="text" name="name" value="John Doe" />
	<label>Your Email Address</label>
	<input type="email" name="email" value="johndoe@example.com" />
	<input type="submit" value="Submit" />
	<input type="submit" value="Reset" />
</form>

2. Form Checkbox Controls

<form>
	<input type="checkbox" id="html" name="html" value="HTML Language">
	<label for="html"> HTML Language</label>
	<input type="checkbox" id="css" name="css" value="CSS Language">
	<label for="css"> CSS Language</label>
	<input type="checkbox" id="sass" name="sass" value="SASS Programming">
	<label for="sass"> SASS Programming</label>
	<input type="checkbox" id="php" name="php" value="PHP Programming">
	<label for="php"> PHP Programming</label>
</form>

3. Form Radio Controls

<form>
	<input type="radio" id="new-york" name="new-york" value="New York">
	<label for="new-york">New York</label>
	<input type="radio" id="toronto" name="toronto" value="Toronto">
	<label for="toronto">Toronto</label>
	<input type="radio" id="sydney" name="sydney" value="Sydney">
	<label for="sydney">Sydney</label>
</form>

4. Form Menu Controls

<form>
	<label for="city">Choose a City:</label>
	<select name="city" id="city">
		<optgroup label="USA">
			<option value="new-york" >New York</option>
			<option value="california" >California</option>
			<option value="washington" >Washington</option>
		</optgroup>
		<optgroup label="UK">
			<option value="london" >London</option>
			<option value="manchester" >Manchester</option>
			<option value="birmingham" >Birmigham</option>
		</optgroup>
	</select>
	<input type="submit" value="Submit">
</form>

5. Form Text Input Controls

<form>
	<label for="first-name">First name:</label>
	<input type="text" id="first-name" name="first-name">
	<label for="last-name">Last name:</label>
	<input type="text" id="last-name" name="last-name">
</form>

6. Form File Select Controls

<form>
	<label for="cover-letter">Select Your Cover Letter:</label>
	<input type="file" id="cover-letter" name="cover-letter" />
	<label for="resume">Select Your Resume:</label>
	<input type="file" id="resume" name="resume" />
</form>

7. Form Hidden Controls

<form>
	<label for="first-name">First name:</label>
	<input type="text" id="first-name" name="first-name" />
	<input type="hidden" id="year" name="year" value="2022" />
	<input type="submit" value="Submit" />
</form>

8. Form Object Controls

<form>
	Full Name: <input type="text" name="name" />
	<input type="submit" value="Submit" />
</form>
<object data="/coast.jpg" aria-label="coast"></object>

4. HTML Forms Associated Tags or Elements

Since we can collect or submit the above types of input data using forms, for this purpose, the HTML language provides us with different HTML5 control tags or elements. All of these HTML form control elements are listed in the following table and we often add the singleton <input> tags in our forms to get the job done.

5. Attributes of HTML5 Forms

Besides the input control elements in HTML forms, there are various attributes that are incorporated to get even more functionality. Moreover, there are certain global attributes that can be applied to all HTML elements including form control tags.

1. HTML <form> Element Attributes
2. HTML <button> Element Attributes
3. HTML <caption> Element Attributes
4. HTML <datalist> Element Attributes
5. HTML <fieldset> Element Attributes
6. HTML <input> Element Attributes
7. HTML <isindex> Element Attributes
8. HTML <keygen> Element Attributes
9. HTML <label> Element Attributes
10. HTML <legend> Element Attributes
11. HTML <object> Element Attributes
12. HTML <optgroup> Element Attributes
13. HTML <option> Element Attributes
14. HTML <output> Element Attributes
15. HTML <select> Element Attributes
16. HTML <textarea> Element Attributes

6. HTML5 Forms Validation And Submission

6.1. HTML Form Validation

While getting the user input with an HTML form, it is very important to check that all the input fields by the user are populated with correct data types. We do not want to collect names for password fields, images for birthday fields, and so on. These types of checks ensure the correct format of data and are called form validation. Basically, there are two methods of form validations.

1. Client-side Form Validation: This type of validation is incorporated within the HTML form and is an initial check to validate the input controls before submission.
2. Server-side Form Validation: This type of validation is done after a user submits the data and is more secure. In this validation type, we can perform various functions on the input data, store it, sort it, store it in a particular list, etc.

6.2. HTML Form Submission

After validating the input data at client-side, a form is submitted using the form <input> control with type="submit" attribute. For submitting the form data, we also incorporate an HTML attribute method that specifies the HTTP method used to send the form data. There are two values for this attribute.

1. GET: If this method is used, the form data is appended to the URL defined by the action attribute to send the form controls data to the processing agents or database.
2. POST: If this method is utilized, the input data is included in the body of the form and sent to the database or other localtion as defined by the URL with the HTML action attribute.