How to Create HTML Forms – Tutorial with Examples
Have you ever wondered how websites collect your information? It’s done through HTML forms! By using simple tags like <form>, <input>, and <button>, you can create interactive forms that allow users to enter data directly on your website. Let's understand more!
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.
Best-suited HTML & CSS courses for you
Learn HTML & CSS with these high-rated online courses
Before understanding how to create HTML forms, let’s first understand what are forms in HTML.
Must Check: How to Create Table in HTML
Table of Contents
- What is an HTML Form?
- Process to Create Forms Using HTML
- Common HTML Form Tags
- HTML Form Controls
- Create an HTML Form to Input the Basic Details of an Employee
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
We will use the HTML <form> element to create an HTML form. It starts with the <form> tag and ends with the </form> tag. We can add the input elements within the form tags to take user input.
Syntax
<form>form elements, such as text box, textarea, etc.</form>
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 with the 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>
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 these Form controls using the different Type attributes in the 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 to create multi-line input control if the user input is longer than a single line.
Let us look at an example of taking the user’s first 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>
Output
2. Password in an HTML Form
We use the type value ‘password’ to input the password. 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>
Output
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>
Output
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 of creating 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>
Output
Suggested read:
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>
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>
Output:
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>
Output:
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.
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
Top Picks & New Arrivals
