In this section, we will learn what the forms are and how to create them in an HTML document.

What is Form in HTML?

If you open a webpage and it asked you to enter a value (like your username and password or simply a value of any type for any sort of operation) you’re interacting with a form.

In short, forms are our way of entering data into a website.

Alright, now let’s move on and see how we can practically create a form in HTML.

<form> Tag in HTML: Creating a Form in HTML

First and foremost, in order to create a form, we start with the HTML element <form>. This element acts as the container for the elements we would use to build the actual form itself. Using form, we can set the address where the entered data must be sent, how the data must be encrypted before being sent to the server, the method of sending data (GET, POST etc.) and some other information that we use the attributes of the <form> element to specify them.

Note that the <form> itself is just a container! The materials you see in a form are created using other HTML elements! But before we get into those elements, let’s first see the syntax of the <form> element and after that, we will continue our discussion related to form and its elements.

HTML <form> Tag Syntax:

This is how we use the <form> element:

<form method="post|get" action="url">




</form>

First of all, the body of the <form> element is the place where we define the elements that should be part of the created form. For example, if we want to create a password field or a text-box field in a form, this is the place to create them.

Within the opening tag of this element, if you look, we can see that there are two attributes called `method` and `action`. The action attribute defines the address where we want to send the data of the form after a user hits the submit button. For example, if we want to send the data to `registration` section of our website, then the value of this attribute would be “/registration”.

The `method` attribute, on the other hand, is the one that specifies how the data should be sent to the server! The value of this attribute follows the `method` property of the HTTP protocol. So the values could be GET, POST, etc.

Note that if the value GET is used, then the data will appear on the URL that is sent to the server (meaning everyone will see the data!); but if we use the POST value for this attribute, then the data will be encrypted within the body of the payload and so people won’t be able to see the data. (The use of POST value is especially useful when we’re sending sensitive data from a website to a server! Like the password or id card of a user).

Note: the <form> element has more attributes. You can check the HTML form attributes section in order to learn about the other attributes as well.

HTML Form Inputs: <input> Tag in HTML

The HTML <input> element is a key element that is used in forms, massively! As the name of the element suggests, it is used to get data from users!

This element has an attribute called `type` by which we can specify what type of input field we want to create in a form! For example, if we want to have a text box field in a form, then the value of this attribute should be “text”. So when the browsers see this element with this value for its type attribute, they know that a text-box field should be rendered on the page. Or if we want to have a password field on a page, then all we need to do is to set the value of this type attribute to “password”. Thus, the browsers will create a text field that if you enter a data in it, all characters will appear in a bullet point shape.

Note: other than <input> element, there are other types of elements that are used in form which you can learn about them in the HTML form element section.

Alright, now let’s move on and see the syntax of this element.

HTML <input> Element type Attribute Syntax:

This is how we create an <input> element in an HTML document:

<input type = “type” name = “name”>

The <input> element has only one tag. Also, as you can see, we use the `type` attribute to specify the type of the input element in the target form. (The type of values that we can set for this attribute are defined below).

Also, note that every <input> elements must have another attribute named `name`. The value of this attribute will be sent to a server, along with the data that a user has entered for that input field. So now on the server, we use the name of the input field in order to access the entered data of that field. In short, the value of the name field is the way we access the data entered into that field in the server.

HTML Form Input Types

Here’s the list of values you can use for the type attribute:

Name	Description
button	This value is used to create a clickable button.
checkbox	This value defines a checkbox
color	This value defines a color selector.
date	This value defines a date control (only year and month with but no time)
datetime-local	This value defines a date and time control (year, month, day, time)
email	This value defines a field that only emails can be set.
file	This value is used to create a file selector.
hidden	This value creates a hidden input field.
image	This value creates an image submit button.
month	This value creates a month and year control.
number	This value creates a field where we can only enter numbers.
password	This value creates a password field.
radio	This value creates a radio button.
range	This value creates a range control.
reset	This value creates a reset button.
search	This value creates a field for entering a search string.
submit	This value creates a submit button.
tel	This value creates a field for entering telephone number.
text	This is the default value and it creates a single line text field.
time	This value creates a field with controls entering a time.
url	This value creates a field specifically for entering URLs
week	This value creates a field with week and year control.

Notes:

• In the HTML Input types section, we’ve explained these types in greater details.
• The <input> element has other attributes as well. You can learn about them in the HTML input attribute section.

Example: creating textbox in HTML

See the Pen creating textbox in HTML by Omid Dehghan (@odchan1) on CodePen.

In this example, we’ve used the `<input>` element to create the username box so that users can enter their username there.

Note that we’ve used another element called `<label>` along with the <input> element as well. This element allows us to provide a label (the word username for this example) for an <input> element. Also, we can click on this label to bring the focus to the related field! In this example, if you click on the username word, the text-box will get the focus!

Note: to link a label to an input field, you must set the `for` attribute of the target <label> element to the same value as the value of the `id` attribute of the target <input> field.

Example: creating password box in HTML

See the Pen creating password box in HTML by Omid Dehghan (@odchan1) on CodePen.

Here we’ve added another input field to the form using the <input> element but this time because the field is about to get sensitive data (password) thus we’ve set the type of the <input> field to password so that no other person can read the data.

Form Submission in HTML

So far, we’ve seen how to enter data into a form using the <input> element of type text and password. But at the end, the data of a form must be sent to a server as well! Otherwise what’s the point of filling a form?!

To send the data of a form to a server, we use buttons! You’ve probably seen these buttons with the names like “Sign in”, “Sign up” or “Register” etc. All of them have one mission and that’s to trigger the process of sending data to a server.

Alright, now that we know buttons are in charge of triggering the process of sending data to a server, let’s see how we can create buttons in a form.

Submit Buttons in HTML:

Generally, there are two ways in which we can create a submit button in a form and use it as the submit button.

• HTML <input type= “submit”>
• HTML <button> Element

HTML <button> Element

The first element that we can use inside a form is the HTML <button> element. This element simply creates a button inside a form and, using it, we can submit the data of a form to a server.

Here’s the syntax of the <button> element:

<button> name </button>

The `name` is the string that will appear on the created button! For example, if you want to name the button as “Submit”, then simply write “Submit” within the body of this element.

Example: HTML form submission with <button> Element

See the Pen HTML form submission with <button> Element by Omid Dehghan (@odchan1) on CodePen.

Here, if you fill the username and password fields and then hit the submit button, the data will be sent to the server.

HTML <input type= “submit”> Element

The second method of creating a button in a form is by using the <input> element and setting its type to “submit”. This way, browsers will render a button as a result of using that <input> element.

Note: the string value of the button is defined using the `value` attribute.

Example: form submit in HTML

See the Pen form submit in HTML by Omid Dehghan (@odchan1) on CodePen.