1)- What is an HTML form?

An HTML form is simply a form used to collect user’s data. It is the same form that we find in websites in the contact page (contact form) for example, or when we want to subscribe to the newsletter. It looks like this:

Let’s see how we can create one.

2)- How to create an HTML form?

HTML form is made of many elements that we call form elements.

To create an HTML form we use the tag <form></form>.

So let’s go to the body of the index.html file and add this tag:

Inside the <form></form> tag is where we will add our <input/> tags or input elements.

<input/> tags are simply where the user will enter their information (name, email, phone…). We can call them the user input.

Depending on the type of information we want the user to enter, we will choose the type of the <input/> tag.

a)- <input> type text

Let’s say that we want the user to enter their first name, or last name. The first name and the last name are text. so the <input/> tag type we will add will be of type text.

The type attribute is what specifies the type of the <input/> tag.

On the browser we have:

<label></label> tag is here to give more information about what should the user enter as information in this <input/>.

Now if you click on the empty field you can enter your first name. However, let’s say that when you click on the label, you want the input area to be active, like when there is a checkbox for example in certain websites, you don’t have to click on the checkbox itself to be checked, you can just click on the label and it is checked.

to bind the label and the input together there is an attribute for that we add to the <label></label> tag and attribute id that we add to the <input/> tag.

The value of both attributes must be the same.

Now if you click on the label you will see that the caret of the cursor is placed automatically in the text area.

Once the form is completed by the user, all the information will be sent to a server and stored in a database. However, as there will be many <input/> tags, the server will not understand which <input/> tag contains the first name, and which one contains the password and so on…

So to make it easier for the server to understand, we add another attribute which is name and we give it the type of information stored in the input field.

So now upon data reception the server will understand that in this input it is the user first name that is stored.

Also we can add value attribute to the <input/> tag. What is the value attribute you would ask?

The value attribute will contain the real value of an <input/> tag.

For example we have a user, his name is Michael, when Michael enters his name in the text field area, this becomes the value of the <input/> that will also be sent to the server.

So in this example we will add a value attribute from the beginning, but when you’re coding a real project, the value will vary depending on the names of different users.

So in the browser we have:

b)- <input> type password

Another type of <input/> tag is password. Let’s add an <input/> of type password.

Same thing here, to bind the label and the password input we use the attributes for and id.

So on the browser if you type a password you’ll have:

Now you might say that both inputs are aligned and wonder how can we make them aligned vertically. For the moment you can add a <br/> tag at the end of each <input/> like this:

So we’ll have:

Another method is to make them inside a <div></div> tag or just leave them like this and apply the display CSS property.

c)- <input> type email

We can also add an <input/> of type email so that the user can enter their email address.

That will look like:

On form submission, If the user enters numbers in this area or special characters or just letters instead of a correct email, when they will click on the submit button at the end to submit the form they will receive an error message saying that the type of data they entered is not correct, and so the form will not be submitted to the form handler.

d)- <input> type tel

If we want to ask the user to leave their phone number for example, the type of <input/> we’ll add is tel.

So we’ll have:

Same thing as for type email input, if the user enters anything else but a number, the form will not be submitted.

e)- <input> type date

We can also add an <input/> of type date.

And we’ll have:

f)- <input> type color

If you want the user to choose a color you can add an <input/> of type color:

So we’ll have:

g)- <input> type checkbox

You can have a choice selection to offer the user. So for multiple choices you can add a checkbox <input/> type.

This will look like:

h)- <input> type radio

Similar to the <input/> type checkbox, you can add <input/> type radio for multiple choices. You can create as many radio buttons as you want.

And that will be:

i)- <input> type file

The <input/> type file allows the user to upload any documents (pdf, word, images…) if it is required.

To add it we have the following code:

On the browser we have:

file inputs are very important to submit documents to the website owner.

j)- <input> type submit

To submit the form to a form handler (most of the time the server) we’ll need an <input/> of type submit that will create a clickable button.

This will look like:

These are the most used types of the <form></form> tag, there are other types but they are less used.

3)- Other <input> attributes

There are many other <input/> attributes that we can use depending on what we want the form to do or what kind of information are important. Let’s have a look at some of them.

a)- required attribute

required attribute is here to make the <input/> compulsory to complete. For example let’s say that the user must add their first name.

You can add required attribute to the <input/> to make the user add their first name, otherwise the form will not be submitted.

Let’s remove the value attribute and add required attribute:

As required is boolean, we can also add required=”true” instead of required alone.

So now if the user clicks on the submit button and tries to submit the form without adding their first name they will get the following message error:

You can add required attribute to all <input/> tags if you want.

b)- maxLength attribute

To specify the maximum number of characters allowed in an <input/> you can use maxLength attribute.

For example, for a phone number it should be 10 characters long.

To specify that we’ll add the following code:

This attribute will not alert the user in case if they want go beyond 10 digits, it will simply not accept additional numbers.

c)- multiple attribute

multiple attribute allows the user to enter more than one value in the <input/>. But it works only with 2 types of inputs: email and file.

Let’s say that we want let the user upload many documents, so inside the file <input/> we’ll add the attribute. The code will be:

So now if we try to upload 4 files at the same time, it will tell us that we have uploaded 4 files:

d)- placeholder attribute

placeholder attribute gives the user a small hint of what they should add in an <input/>.

For example let’s say you want to tell the user to add their email. So in the email <input/> you’ll add the attribute like this:

And on the browser it will look like:

e)- readonly attribute

If an <input/> is readonly, that means it cannot be changed. The user cannot modify this <input/>.

Let’s make the phone <input/> readonly. To do that we’ll add the following code:

Now if you try to add a phone number you will not be able to. You can try it.

f)- autocomplete attribute

If you add autocomplete attribute to an <input/>, the browser will display a list of auto-suggestions when the user is trying to fill in the <input/>. Exactly like when you go to Google and start typing, google displays a list of auto-suggestion keywords or phrases.

autocomplete attribute takes 2 values: on or off.

Let’s add the attribute to the first name <input/>.

So now on the browser if you try to enter a name for the first time and hit enter, and then enter another name for a second time and hit enter, the third time when you will try to add a name you will see the browser suggesting the 2 previous names you entered.

g)- disabled attribute

disabled attribute makes the <input/> field disabled. Which means the user cannot click on it or use it.

Let’s disable the password <input/>.

So we’ll have:

4)- Conclusion

In this tutorial we’ve seen different form inputs and custom form controls.

To make either a simple form or a complex form we use the <form></form> tag. This tag will contain the different input types we want the user to submit.

There are many types of inputs, and many type attributes that can go with each type of input to configure the form how we want it to be.

With attributes we can already set the form how we want and offer a better user experience, but for advanced configuration we’ll need JavaScript code.

To submit a form, all form fields and form controls must be filled in correctly.