How to Create an HTML Form (Examples Explained)

Forms are used to collect data from users, such as contact information, or to allow users to interact with the website, such as post comments or perform searches. In this article, we'll learn how to create a basic form using HTML.

Structure of an HTML Form

An HTML form is created using the tag. Within this tag, you can have a variety of different input elements, such as text fields, buttons, checkboxes, radio buttons, and more.

input elements go here

Input Elements

Text Fields

Text fields are created using the tag with the attribute type laid on text. For example:

Name:




Phone

The element used for phone number input fields.

Phone:


Date

The element used to select a date.

Birthdate:


Password

The element used for password input fields. Text entered in this field is displayed as dots to hide the password.

Password:


Archive

The element is used to allow the user to select a file from their local file system.

Upload file:


Check box

The element used for input fields that allow the user to select none, one, or multiple options.

I accept the terms and conditions

Radio

The element used for input fields that allow the user to select one option from a set of options.

Gender:

Man

Women

Number

The element used for numeric input fields.

Amount:


Range

The element used for input fields that must contain a value from a range of values.

Volume:




Buttons

Buttons are created using the tag with the attribute type laid on submit. This button, when pressed, will submit the form data. For example:

Name:




Handling Form Input

When the submit button is pressed, the form data is submitted for processing. This is done through one of two methods: GET or POST, which are specified using the attribute method In the label .

GET method

The GET method submits the form data as part of the URL. It's useful for things like searches, where the form data isn't sensitive. However, this method has limitations in terms of the length of data that can be sent.

input elements go here

POST method

The POST method submits the form data separate from the URL. This is more secure and can handle a much larger amount of data, so it's used for things like contact or login form submissions.

input elements go here

In both cases, the attribute action is used to specify the URL of the server-side script that will process the form data.

HTML form example with all elements 

Here is a form that uses all the elements we reviewed in this article:

Registration Form

Name:



Last name:



E-mail:



Phone:



Birthdate:



Password:



Upload file:



I accept the terms and conditions


Gender:

Man

Women

Amount:



Volume:




This form has fields for first name, last name, email, phone, date of birth, password, a field to upload a file, a checkbox for terms and conditions, radios to choose gender, and number and range fields for quantity and volume, respectively.

The "Submit" button at the end is the one that would be in charge of submitting the form to the URL specified in the attribute action Of the label shape (in this case, "/submit_form"). In order for this form to work on a real website, you would need to have a server configured to receive and process the information from this form in the "/submit_form" path.