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:
Simple form
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>.
Ezoic - wp_longest_content - longest_content -->
So let’s go to the body of the index.html file and add this tag:
eholder-120" data-inserter-version="2">
<form><form> 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.
input type text
The type attribute is what specifies the type of the <input/> tag.
On the browser we have:
Input text results
<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.
attributes added to the tags
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.
name attribute
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.
value attribute
So in the browser we have:
Michael as a value attribute
b)- <input> type password
Another type of <input/> tag is password. Let’s add an <input/> of type password.
input 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:
Password input displayed
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:
adding <br/> tag
So we’ll have:
inputs alignement after <br/> tag
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.
input email
That will look like:
input email on the browser
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.
input type tel
So we’ll have:
input type tel on the browser
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.
input type date
And we’ll have:
date input on the browser
f)- <input> type color
If you want the user to choose a color you can add an <input/> of type color:
input color
So we’ll have:
color picker
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.
checkbox input
This will look like:
checkbox displayed
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.
input type radio
And that will be:
Radio button displayed
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:
input file
On the browser we have:
input file displayed
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.
input submit
This will look like:
submit button
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:
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:
error message
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:
maxLength attribute
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:
multiple attribute
So now if we try to upload 4 files at the same time, it will tell us that we have uploaded 4 files:
multiple files uploaded at the same time
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:
placeholder attribute
And on the browser it will look like:
placeholder
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:
readonly attribute
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/>.
autocomplete attribute
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.
browser suggestions
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/>.
disabled input
So we’ll have:
input disabled
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.
