A website sometimes needs information from the user. For example, a website may ask for your:
- Name
- Password
- Age
- Date of birth
- Gender
- Hobbies
We use HTML forms to collect this information. In this chapter, we will learn about HTML Forms and Input Types, and HTML Form Elements.
What is an HTML Form?
An HTML form is a section of a webpage where users can enter or select information. For example, a simple form can ask for a person’s name and email.
<!DOCTYPE html>
<html>
<head>
<title>HTML Form</title>
</head>
<body>
<h1>Contact Form</h1>
<form>
<label>Name:</label>
<input type="text">
<br><br>
<label>Email:</label>
<input type="email">
</form>
</body>
</html>
Output
Contact Form
Name: [____________]
Email: [____________]
Here:
<form>– Creates the form.<label>– Tells the user what information to enter.<input>– Creates a field where the user can enter information.
HTML Input Types
The <input> element can be used in different ways. We change its type to create different HTML input types. For example:
<input type="text">
creates a text field.
<input type="email">
creates an email field. Let’s look at the most useful input types.
Text Input
type="text" is used when the user needs to enter normal text.
<!DOCTYPE html>
<html>
<head>
<title>Text Input</title>
</head>
<body>
<h1>Student Form</h1>
<label>Full Name:</label>
<input type="text">
</body>
</html>
Output
Student Form
Full Name: [________________]
Email Input
type="email" is used for an email address.
<!DOCTYPE html>
<html>
<head>
<title>Email Input</title>
</head>
<body>
<h1>Student Form</h1>
<label>Email:</label>
<input type="email">
</body>
</html>
Output
Student Form
Email: [________________]
The browser can also check whether the entered value looks like an email address when the form is submitted.
Password Input
type="password" is used when the user needs to enter a password.
<!DOCTYPE html>
<html>
<head>
<title>Password Input</title>
</head>
<body>
<h1>Login</h1>
<label>Password:</label>
<input type="password">
</body>
</html>
Output
Login
Password: [••••••••]
The characters are hidden while the user types.
Number Input
type="number" is used for numbers.
<!DOCTYPE html>
<html>
<head>
<title>Number Input</title>
</head>
<body>
<h1>Student Details</h1>
<label>Age:</label>
<input type="number">
</body>
</html>
Output
Student Details
Age: [ 14 ▲▼ ]
The browser may show small up and down controls for changing the number.
Date Input
type="date" allows the user to select a date.
<!DOCTYPE html>
<html>
<head>
<title>Date Input</title>
</head>
<body>
<h1>Student Details</h1>
<label>Date of Birth:</label>
<input type="date">
</body>
</html>
Output
Student Details
Date of Birth: [ MM/DD/YYYY 📅 ]
The exact appearance can be different depending on the browser and computer.
Radio Buttons
Radio buttons are useful when the user should choose one option from a group. For example, a form may ask the user to choose a class.
<!DOCTYPE html>
<html>
<head>
<title>Radio Buttons</title>
</head>
<body>
<h1>Select Your Class</h1>
<input type="radio" name="class" value="9">
<label>Class 9</label>
<input type="radio" name="class" value="10">
<label>Class 10</label>
</body>
</html>
Output
Select Your Class
◯ Class 9
◯ Class 10
The same name value groups the radio buttons together, so the user can select only one of them.
Checkboxes
Checkboxes are useful when the user can choose more than one option.
<!DOCTYPE html>
<html>
<head>
<title>Checkboxes</title>
</head>
<body>
<h1>Choose Your Hobbies</h1>
<input type="checkbox" name="hobby" value="cricket">
<label>Cricket</label>
<br>
<input type="checkbox" name="hobby" value="music">
<label>Music</label>
<br>
<input type="checkbox" name="hobby" value="gaming">
<label>Gaming</label>
</body>
</html>
Output
Choose Your Hobbies
☐ Cricket
☐ Music
☐ Gaming
Here, the user can select one, two, or all three options.
File Input
type="file" allows the user to choose a file from their device.
<!DOCTYPE html>
<html>
<head>
<title>File Input</title>
</head>
<body>
<h1>Upload Your Photo</h1>
<label>Select a file:</label>
<input type="file">
</body>
</html>
Output
Upload Your Photo
Select a file: [Choose File] No file chosen
Submit Button
A form usually needs a button to submit the information. We can use:
<input type="submit" value="Submit">
Let’s put some form elements together.
<!DOCTYPE html>
<html>
<head>
<title>Student Form</title>
</head>
<body>
<h1>Student Registration</h1>
<form>
<label>Full Name:</label>
<input type="text">
<br><br>
<label>Email:</label>
<input type="email">
<br><br>
<label>Password:</label>
<input type="password">
<br><br>
<label>Age:</label>
<input type="number">
<br><br>
<input type="submit" value="Register">
</form>
</body>
</html>
Output
Student Registration
Full Name: [________________]
Email: [________________]
Password: [••••••••]
Age: [ 14 ▲▼ ]
[Register]
This is a simple example of an HTML form using different HTML input types.
HTML Form Elements
A form can contain different elements for collecting information. Some important HTML form elements are:
| Element | Used for |
|---|---|
<form> | Creates a form |
<label> | Describes an input |
<input> | Creates different types of input fields |
<button> | Creates a button |
We will learn more form elements, such as dropdown lists and multi-line text boxes, in the next chapter.
Frequently Asked Questions (FAQs)
Q1. What are HTML Forms and Input Types?
HTML Forms and Input Types are used to collect information from users on a webpage. Forms can contain fields such as text boxes, passwords, email fields, checkboxes, radio buttons, and submit buttons.
Q2. What is an HTML form used for?
An HTML form is used to collect information entered by a user. Common examples include login forms, registration forms, contact forms, search forms, and feedback forms..</p>.
Q3. What are HTML input types?
HTML input types define the kind of information a user can enter or select in a form. Common types include text, password, email, number, radio, checkbox, date, and submit.
Q4. How do you create a form in HTML?
You can create an HTML form using the <form> tag. Inside the form, you can add <label>, <input>, <textarea>, <select>, and button elements to collect user information.
Q5. What is the <input> tag in HTML?
The <input> tag creates an input field where users can enter or select information. Its type attribute determines what kind of input field is displayed.
Q6. Which HTML input types should beginners learn first?
Beginners should first learn common HTML input types such as text, password, email, number, radio, checkbox, date, and submit, along with the <label> and <form> tags.
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
