How to Create HTML Forms – Tutorial with Examples

How to Create HTML Forms – Tutorial with Examples

6 mins read65.3K Views Comment
clickHere
Updated on Dec 29, 2023 16:38 IST

HTML forms are a part of a document that can help you collect some data from the site visitor. Through this guide, you will understand how to create the HTML form, also known as the Web Form.

2022_04_How-to-Create-HTML-Forms.jpg

HTML forms or web forms are a powerful medium for interacting with users. They have interactive controls for submitting information. Web forms enable us to collect data or personal information from site visitors, such as names, email addresses, passwords, phone numbers, etc.. In this blog, we will understand the fundamentals of HTML forms. We will explore how to make form in HTML, the Form element, the Input element, control types, and more.

Before understanding how to create HTML forms, let’s first understand what are forms in HTML.

To learn about HTML- read our post: What is HTML?

Must Check: How to Create Table in HTML

Table of Contents

Explore Popular HTML Courses

What is an HTML Form?

An HTML or a Web form helps collect user input. HTML forms can have different fields, such as text areas, text boxes, radio buttons, checkboxes, drop-down lists, file uploads, etc.

The collected data can be validated on the client browser using JavaScript. After validation of form data on the client-side, the user clicks on the Submit button in the form. After this, data is sent to the server for further processing.

Check out: JavaScript Online Courses & Certifications

Must Read – Understanding HTML Elements With Examples

Process to Create Forms Using HTML

Let’s learn how to create forms in HTML.

HTML <form> Element

To create an HTML form, we will use the HTML <form> element. It starts with the <form> tag and ends with the </form> tag. We can add the input elements within the form tags for taking user input.

Syntax:


 
<form>
form elements, such as text box, textarea, etc.
</form>
Copy code

Explore the world of HTML/CSS with online courses from leading colleges. Enroll now to advance your career in web development.

HTML <input> Element

We use the HTML <input> element to create form fields and receive input from the user. We can use various input fields to take different information from the user. Using different Type attributes, we can display an <input> element in various ways.

Here is an example to take text input from the user:

Output:


 
<!DOCTYPE html>
<html>
<head>
<title>Text Input</title>
</head>
<body>
<form>
Enter your first name <br>
<input type="text" name="username">
</form>
</body>
</html>
Copy code
2022_04_Simple-Text-Input-HTML-Input-Element.jpg

Check out- HTML Underline Tag – Understand u Tag with Examples

Common HTML Form Tags

The following are some of the commonly used HTML tags to create web forms:

Tag Description
<form> This tag defines an HTML form to receive input from the user.
<input> Defines an input control.
<textarea> Defines a multi-line input control.
<label> Creates a caption for input elements.
<select> & <option> Create a drop-down menu with various options. The <select> tag defines the selection or the drop-down, while the <option> tag represents all the options in the list.
<optgroup> Creates a drop-down list of related options.  
<fieldset> Groups the related element in a web form.  
<legend> It defines a caption for the <fieldset> element.
<button> Creates a clickable button.
<output>             It is used for defining the result of a calculation.

Explore the Difference Between HTML4 and HTML5.

HTML Form Controls

An HTML form has form controls, such as text fields, text areas, checkboxes, buttons, etc. It is a user interface control that acts as a point of connection between the user and the server. Here are some of the commonly used HTML form controls to gather data:

  • Text Input Controls
  • Password in an HTML Form
  • Radio Button Control
  • Checkbox Control
  • Submit Button Control

Let us understand each of these Form controls using the different Type attributes in HTML <form> tag.

1. Text Input Controls

The <input type=”text”> control defines a single-line text input. We can use the HTML <textarea> tag for creating multi-line input control, if the user imput may be longer than a single line.

Let us look at an example to take the user’s first name and last name as input.

Example of a form with Text input fields:


 
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "fname" /><br>
Last name: <input type = "text" name = "lname" />
</form>
</body>
</html>
Copy code

Output:

2022_04_HTML-Forms-Text-Input-Field.jpg
 

2. Password in an HTML Form

We use the type value as ‘password’ to take the password as input. The password entered by the user will not be visible in the password field control.

Example:


 
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form>
<p>
<label>Username : <input type="text" /></label>
</p>
<p>
<label>Password : <input type="password" /></label>
</p>
</form>
</body>
</html>
Copy code

Output:

2022_04_HTML-Password-Input.jpg

3. Radio Button Control

Radio buttons let users select one option out of many options. We can create a Radio Button control using the HTML <input> tag and the type attribute will be radio. <input type=”radio”> defines a radio button.

Example of an HTML form with radio buttons:


 
<!DOCTYPE html>
<html>
<head>
<title>Radio Button Control</title>
</head>
<body>
<form>
<input type = "radio" name = "Gender" value = "Male"> Male
<input type = "radio" name = "Gender" value = "Female"> Female
</form>
</body>
</html>
Copy code

Output:

2022_04_HTML-Forms-Radio-Button.jpg

4. Checkbox Control

The checkbox is used when more than one option is to be selected from the given options. We can create it using the HTML <input> tag and set the type attribute to the checkbox.

Example:

Below is an example to create a form with checkboxes.


 
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
Choose Colors:<br>
<li><input type="checkbox" name="color" value="red" />Red</li>
<li><input type="checkbox" name="color" value="blue" />Blue</li>
<li><input type="checkbox" name="color" value="green" />Green</li>
</form>
</body>
</html>
Copy code

Output:

2022_04_HTML-Forms-Checkbox-Input.jpg

Suggested read:

Creating HTML Tables (Tutorial With Examples)
Creating HTML Tables (Tutorial With Examples)
This guide offers an introduction to HTML tables. You will learn how to create tables in HTML to present tabular data. Tables are a great way to present data visually....read more
Basic Structure of an HTML Document
Basic Structure of an HTML Document
In this blog, you will learn how an HTML page is structured. We will cover the essential elements required to create an HTML document.
10 Best HTML Editors for 2024
10 Best HTML Editors for 2024
Have you ever wondered which HTML editor best suits your coding needs in 2024? Choosing the right tool is crucial in the ever-evolving landscape of web development. Let us read...read more

5. Submit Button Control

We can create clickable buttons in HTML using the <input>tag and setting its type attribute to Submit. Using the type=”submit”, we can add a submit button on the web page.

Users can submit the details provided in the form by clicking on the Submit button in an HTML form. These details are submitted to the form handler – a file on the server with a script for processing input data. 

Syntax:


 
<button type="submit">submit</button>
Copy code

Here is an example to create an HTML form with Submit button:


 
<!DOCTYPE html>
<html>
<head>
<title>Submit Button</title>
</head>
<body>
<form>
<p>
<label>Username : <input type="text" /></label>
</p>
<p>
<label>Password : <input type="password" /></label>
</p>
<p>
<input type = "submit" name = "submit" value = "Submit" />
</p>
</form>
</body>
</html>
Copy code

Output:

2022_04_Submit-Button-Control-in-HTML.jpg

HTML Forms Example

Let us look at an example to create a basic employee detail form that will take input data, including First Name, Last Name, Gender, Employee ID, Designation, and Phone Number.

Create an HTML Form to Input the Basic Details of an Employee

To create an Employee detail form, we will use a combination of tags, such as <legend> to specify the caption; <input> tag for First Name, Last Name, and Phone Number; radio button for gender; <button> to submit, etc.


 
<!DOCTYPE html>
<html lang="en">
<head>
<title>Employee Details</title>
</head>
<body>
<form>
<fieldset>
<legend>Employee Details</legend>
<p>
First name: <input type = "text" name = "fname" />
</p>
<p>
Last name: <input type = "text" name = "lname" />
</p>
<p>
<input type = "radio" name = "Gender" value = "Male"> Male
<input type = "radio" name = "Gender" value = "Female"> Female
</p>
<p>
Employee ID: <input type = "text" name = "ID" />
</p>
<p>
Designation: <input type = "text" name = "ID" />
</p>
<p>
Phone Number: <input type = "text" name = "phone" />
</p>
<p>
<input type = "submit" name = "submit" value = "Submit" />
</p>
</fieldset>
</form>
</body>
</html>
Copy code

Output:

2022_04_Employee-Details-Web-Form.jpg

Conclusion

HTML forms are an excellent way to collect and manage user data and information quickly and efficiently. We hope this blog on HTML Forms will help you start creating web forms to gather user information.

FAQs

How do I create an HTML form?

To create an HTML form, you use the element. It acts as a container for various form controls such as input fields, checkboxes, radio buttons, and buttons. You can specify the form's action attribute to determine where the form data will be submitted.

What is the purpose of the action attribute in an HTML form?

The action attribute in an HTML form specifies the URL where the form data will be sent when the form is submitted. It can be a relative or absolute URL, or it can use JavaScript to handle the form submission.

How do I add input fields to an HTML form?

To add input fields to an HTML form, you use the element. It has different types, such as text for a single line text input, password for a password input, email for an email input, and more. The input fields should be placed within the element.

What is the purpose of the name attribute in an HTML form?

The name attribute in an HTML form is used to identify the input field when the form is submitted. It provides a name-value pair that represents the data entered in the field. The name attribute is essential for processing form data on the server or accessing it with JavaScript.

About the Author

This is a collection of insightful articles from domain experts in the fields of Cloud Computing, DevOps, AWS, Data Science, Machine Learning, AI, and Natural Language Processing. The range of topics caters to upski... Read Full Bio