Forms are an integral part of websites, enabling users to interact with applications in countless ways—whether signing up, logging in, submitting feedback, or making purchases. While crafting a basic HTML form is straightforward, designing one that functions effectively and aligns with best practices can be a bit more nuanced.
In this tutorial, we’ll explore the fundamentals of creating forms using HTML. We’ll cover the essential elements, attributes, and properties that make up a form. This guide is focused purely on HTML—styling with CSS or adding functionality with JavaScript is outside the scope of this tutorial.
Below are a few examples of how forms typically look:
Example-1:
Example-2:
Let’s dive into the process of building a functional HTML form step-by-step. By the end of this tutorial, you’ll have a solid understanding of form creation and its key components.
The <form> Element
The <form> element is the foundation of any HTML form. It acts as a container that holds all the input fields, buttons, and other elements users interact with to submit data.
<form action="server-endpoint" method="POST">
<!-- Form elements go here -->
</form>
action="server-endpoint" This attribute specifies the URL or endpoint where the form data should be sent when the form is submitted.
**method**This attribute defines the HTTP method to be used when submitting the form.
Input Types:
There are many input types in HTML. We will talk about the most popular and used ones.
But before diving into different input types, learn about some of the attributes which are used in HTML tags often. Understanding them will help you learning the input types way better.
type="text" Here the type text suggests that the input is type text and not any other type of input.
id="my-id-1": Id is an attribute that uniquely identifies the input element.
placeholder Place holder creates a text (In this case “Enter Text”). That is visible on the text box but it disappears as soon as you write any text.
name= ” ” This attribute in HTML is a fundamental attribute used in form elements. It specifies a name for the form control, which is essential for associating user input with the corresponding data when the form is submitted.
Label:
The <label> element is an important part of accessible and user-friendly forms. It provides a description for form inputs, making it clear to users what information they need to enter. Additionally, when properly associated with an input field, clicking on the label focuses the corresponding input, enhancing usability.
<form action="server-endpoint" method="POST">
<label for="my-id-1">Label Text</label>
<input type="text" id="my-id-1" placeholder="Enter text" >
</form>
Always makes sure to keep the id of input items and the “for” of the <label> tag same. It allows the label to target the input element.
Text input:
You use this input types when you want the users to enter their names, company names or anything text based. Here’s how you create a text input:
<form action="server-endpoint" method="POST">
<input type="text" id="my-id-1" placeholder="Enter text" />
</form>
Password input:
You can use this input when you want the user to enter password. The difference between Text and password input is, whatever you write within the password field remains hidden.
<form action="server-endpoint" method="POST">
<label for="my-id-1">Enter Password: </label>
<input type="password" id="my-id-1" />
</form>
Look how the texts within the password field is not visible.
Email Input:
When you use email input, the input field to expect an email address. If the user enters an invalid email format, the browser will show an error when the form is submitted.
<form action="server-endpoint" method="POST">
<label for="email">Enter Email: </label>
<input type="email" id="email">
</form>
Observe how the input field is giving me a warning for not writing a proper email.
Numeric Input:
This type of input only allows the user to enter a numeric value and not any text or special character. You might use this input type when you need someone’s age or etc.
<form action="server-endpoint" method="POST">
<label for="number">Enter a Number: </label>
<input type="number" id="number" />
</form>
URL input:
It is designed specifically for users to input a valid web address (e.g., https://example.com). The browser performs simple validation to check if the entered value is in a proper URL format.
<form action="server-endpoint" method="POST">
<label for="website">Your Website:</label>
<input
type="url"
id="website"
name="website"
placeholder="<https://example.com>"
required
/>
<button type="submit">Submit</button>
</form>
Specialized inputs:
There are some specialized inputs as well which are used to get some specific data:
date Input:
You can use this input to get a specific date from calendar without the user having to write it manually.
<form action="server-endpoint" method="POST">
<label for="date">Your DOB: </label>
<input type="date" id="date" />
</form>
Time Input
It is just like date input but time input lets the user input specific time.
<form action="server-endpoint" method="POST">
<label for="time">Enter time: </label>
<input type="time" id="time" />
</form>
Range input:
This range input can be used in music player to track the progress also volume track as well.
<form action="server-endpoint" method="POST">
<label for="range">Range: </label>
<input type="range" id="range" />
</form>
Color input:
This input type is used to pick a specific RGB color code.
<form action="server-endpoint" method="POST">
<label for="color">Pick a color: </label>
<input type="color" id="color" />
</form>
File upload:
This input type is used to upload files on website:
<form action="server-endpoint" method="POST">
<label for="file">Upload Files: </label>
<input type="file" id="file" />
</form>
Drop down menu
A dropdown menu in HTML is created using the <select> element, which allows users to select a single option (or multiple options if enabled). It’s commonly used in forms for scenarios like selecting a country, age range, or category.
<form action="server-endpoint" method="POST">
<label for="select-id">Select Car:</label>
<select id="select-id">
<option value="BMW">BMW</option>
<option value="TATA">TATA</option>
<option value="Marsedes">Marsedes</option>
</select>
</form>
Radio buttons:
The <input type="radio"> element in HTML is used to create radio buttons, which allow users to select only one option from a predefined group. This makes radio buttons ideal for scenarios where a single choice must be made, such as selecting gender, a payment method, or a yes/no question.
<form action="server-endpoint" method="POST">
<label for="">Select your gender: </label>
<br />
<br />
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female" />
<br />
<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other" />
</form>
NOTE: Ensure that all the name attributes in the <input> tags for radio buttons are the same. This is essential because radio buttons with the same name attribute are grouped together, allowing only one option to be selected at a time. If the name attributes differ, the radio buttons will act independently, and multiple options can be selected, which defeats the purpose of using radio buttons.
Check box:
The <input type="checkbox"> element in HTML is used to create a checkbox that allows users to select one or more options from a group. Checkboxes are ideal for situations where multiple selections are allowed.
<form action="server-endpoint" method="POST">
<label for="">Name your favorite food:</label>
<br />
<label for="buger">Burger</label>
<input type="checkbox" id="burger" />
<br />
<label for="butter-paneer">Butter Paneer</label>
<input type="checkbox" id="butter-paneer" />
<br />
<label for="kaju-katlee">Kaju katli</label>
<input type="checkbox" id="kaju-katlee" />
<br />
<label for="biriyani">Biriyani</label>
<input type="checkbox" id="biriyani" />
</form>
Text area:
The <textarea> tag in HTML is used to create a multi-line text input field, allowing users to input longer blocks of text, such as comments, feedback, or messages. Unlike the <input> tag (with type="text"), the <textarea> element supports multiple lines and can be resized by the user.
<form action="server-endpoint" method="POST">
<label for="address">Address: </label>
<br />
<textarea
id="address"
rows="10"
cols="30"
placeholder="Address...."
></textarea>
</form>
Conclusion:
In this tutorial, we’ve explored and learned about HTML forms, including their key elements, tags, and attributes. While there’s much more to discover in HTML, this guide provides a solid foundation to get you started. With the knowledge gained here, you should be able to create a fully functional login page, sign-up form, and more. Now it’s time to put what you’ve learned into practice—go ahead and build a form! And remember, if you get stuck, don’t hesitate to search for additional elements and attributes to expand your skills.