HTML Forms

This article explores the basics of HTML forms, how they are created, and some best practices for creating effective and user-friendly forms.

The HTML forms are used to collect input from users. It is usually a server that receives user input for processing.

HTML Forms gather website user input and post it to back-end applications such as CGI, ASP script, or PHP script. Depending on specified rules and logic inside the application, the back-end application will process the passed data.

A variety of forms elements are available, including text fields, textarea fields, drop-down menus, radio buttons, and checkboxes etc.


HTML <form> Element:

As shown below, you can create an HTML form by using the <form> element

This is a form element

An Html <form> can contain text fields, checkboxes, radio buttons, and submit buttons, among other input elements.

There are many different elements that make up HTML Forms.

HTML <input> Element:

There are many types of HTML elements, but the most commonly used one is the <input> element.

Based on the type attribute, HTML forms can display <input> elements in numerous various ways.

A few examples of these can be seen below:

<input type=”text”>Text input field with one line
<input type=”radio”>Contains a radio button (to choose from many options)
<input type=”password”>A password field is specified (characters are masked)
<input type=”checkbox”>Provides a checkbox to select between zero and many options
<input type=”submit”>Submit button (for offering the form)
<input type=”button”>It displays a clickable button

Here is a chapter that covers all the different types of HTML input.

Text Fields

Using <input type=”text”> characterizes a single-line text input field.
Here is a form with text input fields:


<!DOCTYPE html> <html><body><br><br><br><form><br><label for="fname">First name:</label><br><br><input type="text" id="fname" name="fname"><br><br><label for="lname">Lastname:</label><br><br><input type="text" id="lname" name="lname"><br></form><br><br> </body></html>

A browser will portray the HTML code above as follows:

First name:

Last name:

Important: Please note that the form itself is not seeable. You should also be aware that an input field’s default width is 20 characters.

The Element <label>

You might see how the example above utilizes an <label> element.

For many form elements, the <label> tag represents a label. If the user focuses on the <input> element, the screen reader will read the <label> out loud.

When the visitor clicks the text within the <label> element, it toggles the radio button/checkbox, which is useful for visitors who have tribulation clicking on very small regions (like radio buttons).

It is essential to bind the <label> and <input> elements with the for attribute of the label tag.


Using <input type=”password”> characterizes a single-line password input.


<!DOCTYPE html> <html> <head> <title>Input Type Password</title> </head> <body> <form> User ID : <input type="text" name="ID"> <br> Password: <input type="password" name="password"> </form> </body> </html>

Radio Buttons

A radio button is defined by the <input type=”radio”>.

There are a limited number of selections obtainable when the user selects a radio button.
An example of a form with radio buttons is as follows as it comes to HTML forms:


<!DOCTYPE html> <html> <body><form> <input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label><br> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label><br> <input type="radio" id="other" name="gender" value="other"> <label for="other">Other</label> </form></body> </html>

Here is how a browser will portray the HTML code overhead in a way that is easier to use:


A checkbox is defined by <input type=”checkbox”>.

If we talk about HTML forms, checkboxes permit users to choose ZERO or MORE options of a limited number.
Here is a checkbox-based form:


<!DOCTYPE html> <html> <body><form> <input type="checkbox" id="vehicle1" name="vehicle1" value="Truck"><label for="vehicle1"> I have a Tesla Truck</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="bike"> <label for="vehicle2"> I have a Suzuki AEM Carbon Fiber Hayabusa</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value="car"> <label for="vehicle3"> I have a Ferrari 250 GTO</label> </form></body> </html>

This is how the HTML code above will be displayed in a browser:

The Submit Button

In Html Forms, form fields with <input type=”submit”> represent a button for introducing form information to a form-handler.

Input data is processed by a script in the form-handler file on the server.

An attribute in the form’s action sets the form’s handler.
Submit button on a form:


<!DOCTYPE html> <html> <body><form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="Colin"><br> <label for="lname">Last name:</label><br><input type="text" id="lname" name="lname" value="Smith"><br><br><input type="submit" value="Submit"> </form></body> </html>

A browser will show the HTML code above as follows:

First name:

Last name:

CSS on Forms

CSS can also be applied to the form input fields here is an example:


<!DOCTYPE html> <html> <head> <style> input[type=text], input[type=submit] { width: 80%; padding: 10px; margin: 4px 0; border: 1px solid blue; background-color: #bbbcfd; color: rgb(233, 10, 10); } </style> </head> <body> <form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="Colin"><br> <br><label for="lname">Last name:</label><br><input type="text" id="lname" name="lname" value="Smith"><br><br><input type="submit" value="Submit"> </form> </body> </html>

Name Attribute for <input>

HTML forms require a name attribute for each input field.

It is impossible to send the value of an input field if the name attribute is forgotten.
In this example, the “First name” input field will not be submitted:


<!DOCTYPE html> <html> <body><form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" value="Colin"><br><br><input type="submit" value="Submit"> </form></body> </html>

HTML Forms Importance

HTML forms play a crucial role in the functionality of contemporary websites and web applications. They offer a means for users to provide input, interact with web pages, and submit information to servers for processing. The following are some of the key reasons why HTML forms are essential:

  • User Input: HTML forms allow users to provide a broad range of data, ranging from basic text and numbers to more intricate data types, such as files, dates, and times. This input is vital for various web applications, such as online shopping, social media, and banking.
  • Interaction: Forms provide users with a means of interacting with web pages, enabling them to search for information, submit feedback, and perform other actions that enhance their overall experience on the site.
  • Data Collection: HTML forms permit website owners to collect user data, including email addresses, contact information, and preferences. This data can be utilized for marketing purposes, to enhance the user experience, and to customize content to individual users.
  • Data Processing: Servers can process data submitted by users through HTML forms, which can be utilized for a variety of purposes, including sending emails, updating databases, and generating reports.
  • Accessibility: HTML forms can be designed to be accessible to all users, including those with disabilities such as visual impairments or limited mobility. This ensures that every user can interact with web pages and provide input, regardless of their abilities.
If this article met your educational needs somehow, do leave your reaction below as a source of appreciation or a suggestion for the betterment of this site.
We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *