What are the Input Types in HTML Forms?

Hello friends,

You are welcome to our HTML series,

In the last segment, we studied HTML forms, how we create forms in an HTML webpage.

The different fundamental elements of the form like form tag, fieldset, legend, different types of input fields, and text area all these elements we studied can be used to make a proper form.

So, I am guessing that you all performed the practical yourself and made a good html form.

If you had any difficulty or problem in creating that HTML form you can let us know at forum.learnvern.com we will solve your problems and try to revert you.

In today's segment, we will study the input types of the forms.

In the last segment we went through the fundamental input types like email, password, radio button, checkbox, text area, submit and button.

In today's segment, we'll study the remaining input types and the newly added input types in HTML 5 which were not there in HTML 4.

Let us start today's segment.

First are the input types as shown in the slide.

The first input type is the text.

Let me open the code along with this.

Here HTML, okay

Example form

So, here we will create a demo form so that we can see with examples

For creating a form the first tag was the form

Inside the form tag action and method, we can use any method among get or post as we learned in the last session and the upcoming sessions about form attributes.

The first input type is the text.

First, let us add the fieldset

Inside legend "Registration form".

And input type

The first is the input text

As we already saw, in the input type equal to text we define input field control in which we can enter the text. It can be anything like characters, numbers or special characters etc.

After that, we saw the password where we can enter the passwords that are not visible on the screen or the front end.

After that, we saw input type equals submit in which we studied that in one form there should be one submit button

The one which we didn't go through is the reset button and we'll see that today.

After that the radio buttons, as we saw to select one option

 Among multiple selections.

Then we have checkboxes,

If there is one or more than one selection in front of us and we need to select one or more than one we use the checkbox.

Then we studied the input type equals button and saw the difference between the button and submit button.

There can be only one submit button in a form whereas one form can contain multiple buttons.

And next is the file and image which we didn't study yet, so we will study three things from this slide today.

One is reset and the second two are files and images.

Firstly, we will prepare a form here.

Input type equals text and name. I am taking the first name.

Last name after the first name, username

Password

And

Let's say if we take the checkbox or radio button.

Input type equals radio name should be gender

The value should be male,

Second, we will take female

Here, other

So these are the three checkboxes

Sorry, three radio buttons.

After this, we will take a few checkboxes

Input type equals checkbox and we will take sports in it

A value equal to cricket

In the label, we will add sports to identify

First is cricket,

The second checkbox we are taking will be football

Let's add football in value too.

And which will show on the front end that too will be football.

And last will be volleyball.

So, our form is almost ready

Here, we will add a gender label

Before password, we will add "password".

Before username, we will add a "username" label.

Before the last name, we will add the "last name" label

And before the first name, we will add the "first name" label.

And at last, we will add a submit button

So it should be input type equals submit and value should be submit.

We will save it with the name like form.html

Now we will go to the folder

This is the form.html

Upon running our form is shown something like this

The first name, last name, username, password then gender where we can select any one and for multiple selections, we have the checkboxes and submit.

So on clicking submit usually our form gets cleared because our data gets submitted.

So, We have created a dummy form.

Currently, we haven't added any URL in action through which the data gets submitted on a webpage because we do not have to submit it on a server or a webpage.

So, it's fine if you are putting a value here or if not the page will only reload and it will not be submitted anywhere.

And we have used the post method so that the sensitive data don't show up in the URL.

Currently, we have used all the useful input controls in this form that we studied in the last segment.

So, today we will study a few more input types that are remaining.

The first among them is the reset.

When we use "reset", the form we have filled gets reset so that's why below this br I will add an input type that should be reset, the name we do not need and value should be reset.

Save and reload,

When we reloaded

Here, we have a reset button.

Now, let's see what happens when we click it.

Let me add the first name, let's say abcd, XYZ is the last name, the username is username, the password should be abcd, here I am performing any selection, and selecting some sports.

The moment I click the reset button the data gets cleared.

I am repeating,

Using reset all the fields are set to null.

So, if you have made a mistake in filling the form then with the help of the reset you can clear the form and fill it again.

The difference here between reset and submit is that when we submit the form the data gets cleared but the data gets sent and submitted to the server.

While through reset the data doesn't get submitted anywhere the fields just get cleared and set to null.

So, if you are using the reset button you have to take care that if you have written any important data here it doesn't get erased or the field doesn't get empty.

And if you're using the submit then you have to take care that incorrect data shouldn't be submitted on the server.

That was the difference, through reset only the form gets cleared whereas using submit the form gets cleared along with the data sent to the server.

The next input type is file.

So let's try that as well

So, here we are taking an input after the br

Input type equals file, name equals file

And after that two br tags

Save

So this is the "choose file" and “No file chosen”.

Whenever we take the input type as a file with its help we can upload any file with our form.

Usually, if you have filled out any registration file you need to upload your documents or any other important nationalized documents by scanning them.

So in that scenario when we have to upload the documents and send them to the server in that case we can use the input type as file.

We have taken no value here, we just added input type equals file and name equals file and we get this portion (choose file and no file chosen)

No file chosen means no file has been uploaded yet.

The moment I click on this choose file we get an option from here we can select and choose any file.

So, currently, I can upload any image or file from the html portion here.

So let's say, here is the image I have of shoes.jpg I can upload it and the moment I am selecting my image the name of the file shows up here.

So, this is the Indication that the file has been successfully attached with the form but not submitted on the server.

It will be submitted to the server when we click on the submit button.

So, the advantage of using the input type file is that the name of the chosen files shows up here.

The next input type is the image.

With the help of the image tag, we are creating a submit button or a button but adding a graphic with it.

Like if we are showing an image and on its click, we need to perform the submit.

We can do that by using the image input type.

Now, we have to pass the source of the image in the input type equals image because we are going to use it as a submit button.

I am commenting on the submit button because we learned in the last session that a form can only contain one submit button and that is why I have commented the submit button.

Now, I will add input type equals image, "alt" means it's Alternative equals submit.

This means if the image is not showing I will show the submit written as the option as its alternative so that the user knows if the image can't be loaded then the button is there for submitting purposes.

After submit, the source name (src) where the image has been taken will be mentioned.

Currently, I am taking the image of learnvern from our folder named learnvern.jpg.

And this image is in the folder named images.

So, it's like images/learnvern.jpg.

So, here is the input type, alternative (in case the button doesn't show what will be shown) and the source.

One more thing that is optional is width, we will see it later, if the button is occupying more space then we can add the width manually.

So save and I am going to the form and reloading it.

As soon as I reload the page we can see the learnvern's logo here.

When I hover on the image the cursor changes to the hand pointer which indicates that this image is working as a button.

So, if I click it the form is getting submitted.

So, you can see the reload happening when I submit.

That means the image button is currently used as a submit button.

So let's say, I remove this from here

Save and reload it

So I can again see the submit written here because we have given submit as the alternative for the image.

So, if the image isn't identified the alternative text will show up.

So, after reset, it is "submit".

Again doing the same

Save reload.

Now we can see learnvern as a button.

After that, we can give it a width.

Let's say I want to give a width of 100 pixels.

So save and reload.

Now it's showing like a small & proper because all the buttons are of the same size so we have a proper button here.

So as you saw, we have learned three more input fields here

The first is reset by which we can clear out the form.

The second is "file" by which we can attach a file with the form.

And third is the "submit" and we used an image in place of it.

The third is input type equals image that we can use as an alternative to submit.

It's not mandatory to use the image as the alternative to "submit" ; you can use it in the place of any button.

If you can find a proper image for reset then you can use that in place of the reset button and use that image as a button task.

If you are having any attractive image for file upload then you can use that image in place of input type equals image.

So, you can use it in multiple ways.

Next, let us see the slide

We have completed the reset, file and image.

Let us move further,

All the input types mentioned in this slide are added in HTML5.

We will study all input types one by one which are added in HTML5.

We will start with color.

So let's say this is our form

We will add more input types in the same form

Currently, I am commenting that input type equals image.

That is our input type equals submit.

Now, here, under file, we will add different input types added in HTML 5.

So let's say the first of all types is colour.

With the help of colour, we can add a colour palette.

So let's say colour, we will give the name colour

Save and reload.

Let me add two br tags after it

As soon as I reloaded

Here we have a colour selection, when we take input type equals colour the default colour that comes in black.

So that is why we can see black colour in the colour selection.

When I select it I get the colour selection option, we can select different colours with its help.

The circle you can see, if you move it on the palette and on whatever colour you will take the cursor you can see that colour in this portion.

Which means that colour is getting selected.

If you want any other colour in place of red then a tray has been given below you can select different colour combinations from that tray.

As I am moving the icon the numbers here are also getting changed, these numbers are actually RGB codes.

Code of Red green and blue

So this colour we can see is a combination of red green and blue.

As we move we will get different colour combinations here.

This is the picker, using it we can take any colour from the screen.

If any colour is not available here then with the help of the picker you can select any area on the screen and the colour of the particular area will show here.

So, as I clicked here and it is white in colour that is shown in the colour palette.

So, this is the colour selection option that comes through the input type equals colour.

It will be removed after clicking outside.

That input type equals colour that is added in HTML5.

Here I am adding a label so that we can identify that this input type is for colour.

Colour

Reload

Colour

Okay

Next is the date.

Let's say after br I am copying this portion.

Date

Let's say we are selecting a birth date.

Save and reload.

Here the date is shown, an input field is shown in which we can select the dates in two ways.

If you click on this icon a calendar will open you can select the date by this calendar or if you remember the date and want to enter manually you can add it as per the dd-mm-yyyy format.

Let's say, I add 01-01-2021 you can add it in this way also.

If you want to select a particular date then you can either type or can select from the calendar.

So there are multiple options for date selection.

So here the date picker has also been added in HTML5.

After that there is DateTime-local, using this we can select the time zone.

So let's say I write it here, after copying.

Here I will write the DateTime-local.

Remember the format, it is in everything small

Datetime dash local.

I am removing it from here currently and reload

So The difference here is when we use the date-time local we are getting a date but also time selection along with it.

Same way if I click on this icon, we can select the date from the left portion and from here we can select the time.

Like 10, or when you will scroll this will move up and down you can also use it with the arrow keys it's going to and down using the arrow keys.

So there are multiple ways of selecting it.

So that was our date time local.

The difference between date and DateTime is that you can select only the date in the date while you can select the date and the particular time in DateTime local.

The next input field is email

We have seen it in the last segment also, when we have to add an email we use the input email.

After that it's month,

With the help of "month", we can only select a month.

Let's say the label is the month

Type equals month, name equals month

Save and reload

When we took "month" here we can see a few things here.

The first option is for the month, so if you type anything from abcd

The month's name, like January starts, with J, so when I'm pressing J, June, July and January all three options are available.

If there is any month starting from A we will type that.

So let's say April and August starts with a, so those are showing.

Same way if I am pressing S then I can see September.

So, that was the month.

After the month, the year is also shown in the option.

So as soon as I press the down key with the tab the current year shows up, and on pressing the down key it's going one year back.

We can select by this way and the calendar is also given, we can also select the month or year from the calendar.

To that was the month.

Next is the number,

When we use input type equals number.

Its example is whenever we need to add any telephone number we can use input type equals number.

So let's add the number as well.

So here I'm adding the label telephone number.

Input type equals number, and name we will take a telephone number

Save and reload the page.

As soon as I Reload the page the label of the telephone number is provided here.

And here input is provided, where if I type any characters like currently, I am typing abcd or any other character from the keyboard so that will not be shown except e.

E will be shown because it is used in mathematics, in logs we have used e.

So only e can be entered here no character other than that will show, so only e is allowed rest we can add numbers and we can press and enter them here.

So numbers you can either type from the keyboard or you can use the up-down key given here.

If I press up 1 will show and if I press down 0 will be shown.

As I'm pressing down the numbers are coming in minus and on pressing the upper arrow positive numbers are shown.

So you can select the numbers both ways either you can use the keys given or you can add the numbers manually from the keyboard.

Make sure the input type equals number will only allow numbers and e as a character nothing except that.

Next is the URL.

Url only allows the URL in the input field.

I'm copying the same URL, URL, URL

Save and reload.

As soon as we added the URL we got a text field for the URL here.

So let's say I try to submit it by typing abcd, so on submitting an error is shown that please enter the URL.

As we saw in the last segment for the email that proper validation is attached with the email and if the email is not in a proper format the form will not be submitted.

Same way, if we are using the URL text field and if we are using the submit button and if the URL isn't in the proper format the form will not be submitted and on submitting a notification show up,(please enter a URL).

So there are a few proper ways to enter the URL like I'm opening the learnvern's site.

As soon as I open the learnvern's website here in the URL tab we see https://www.learnvern.com

This is an example, let me copy it in the notepad.

Here in the URL, the thing to make sure is that some portion is fixed and that portion should come in the URL text field and one of them is this (https://) portion.

If HTTPS will not be there it will show an error and if www.learmvern.com will be mentioned it will accept it.

Currently, if I copy it and place it in this tab, the form is getting submitted successfully.

So if we enter a proper URL in a proper format, the URL accepts that.

Let's try this as well whether it is accepted or not.

So place and submit

It is not accepting

That means, it is mandatory to add HTTPS if we are adding a URL to the URL.

So we will have to add either HTTP or HTTPS.

So that was the URL and its format.

The next input type is week, it is used to select a week

So let's copy

Select week

Save and load

So on reloading, we get the week here.

Here we have three options

First is the week where we can select with numbers like 1st week and the second is the year that represents 1st week of this year or 2nd week of this year.

So with its help, we can select a particular week.

Let's say if you want to use an icon or enter it after visualizing so you can click the icon and from the palette, you can select.

Let us select the current week after that there are other weeks available month-wise, so you can select any week you want to.

That was our "week" input.

The second last is the search input.

What happens in a search input.

In this, an inbuilt button is given for search, through which we can perform the search.

Let's say here I am writing Search

Input type equals search, the name is "search".

Save and reload

So here we are provided with a search.

Maybe it's showing small so let me zoom it out.

Below we are having the search.

If we write anything here and click on submit the data will be searched but we need a submit button for it.

Currently, we have given the search button below it usually when we perform any search, besides the field a button is provided and we can search using that.

So, for proper user interaction if the search button is beside the search field it will be more feasible for us to remove the submit button from here and add it beside the search element.

So save it and run

So, here we know whatever data we have to enter, let's say I type "hello", and click the submit button the form is getting reloaded but also we can search the data using it.

So, that is the use of input type equals search.

The next input type is tel,

We always use tel for telephone number, whenever we want to accept the telephone number from the user and we use Input type equals tel.

Let us check that with an example.

As we wrote the telephone number above here.

Here we are taking a number as an input.

But here we will specifically take the name telephone number.

So let me add the contact number to the label

Type equals tel name equals contact number

We do not need an input field in it.

Save and reload.

Here we have the contact number, if I type anything here that will be accepted because it is performing like a number field without validation.

So, whenever we use tel and contact numbers input fields either we have to add the validation or attach a pattern.

So, what's a pattern?

The pattern is a fixed format that determines how the data entered in the field must show and look for this we use pattern.

So, currently, when I take the contact number and add any number that can be added multiple times and as we know any contact number can not be longer than 10 digits.

So let's say I want to add a particular number that is in a format.

So let's say the pattern of adding the telephone number is like

First I add three digits after that there must be a hyphen then again three digits hyphen and then four digits must be added.

So, the total is 4+3+3 means the number is 10 digits.

Usually, contact numbers are in this format.

So, if I want to accept this fixed type of contact number from the user I will introduce the pattern here.

So, it's like a pattern

There are a few ways for writing a pattern, so firstly I want to add a number that must be three.

As we know the numbers are between 0-9 and there are no numbers apart from that 0,1,2,3.....9.

So if we can add numbers from 0 to 9, where it will be zero dash nine.

This indicates that we are entering a number which is between 0 to 9 and we have to get it entered three times like 1st number, 2nd number and after that the third number.

That is why we will write three in this bracket, that's it.

This means, what entry we need is numbers between 0 to 9 but three times.

So, you add 1st number then 2nd number, then 3rd number and after this, the pattern will not allow.

But we need a total of 10 digits in the number so here we have a hyphen and I will add a static hyphen here.

This means, according to our pattern, after adding three digits there must be a hyphen compulsorily.

So here I have entered the hyphen.

Now, again I have to add the number three times so what we wrote here will be written here again.

That is 0 to 9 and three.

This means, any number from 0 to 9, that is repeated three times then hyphen.

Then again a number between 0 to 9 repeat it three times.

And again hyphen.

So this becomes 3+3 means 6 times the number got repeated.

Now, we have to add the number 4 times.

So after a hyphen again brackets 0 to 4 and this time the length should be 4.

What we have done here, is add numbers three times again three times and lastly add four numbers.

Save let's check the output

Reload.

So after reloading the page we have the contact number here.

If I write anything here it will be accepted but on submitting it won't work.

"Please match the format requested".

The moment we added a pattern in the web page, the web page is not allowing this format like characters and all.

So now we have to compulsorily add the number in that pattern only.

So let's say I add any random number 758 then hyphen then again 982 hyphen then 1234 and in this case, if I perform submit the data is getting submitted successfully.

This indicates if we have introduced any pattern in the web page and when we go to that field we need to compulsorily submit the data in that pattern itself.

So, if we introduce a contact number or any other text field like this in the web page, we have to take care of the fact that the data we enter must be in that particular format.

This performs validation in a way and avoids accepting incorrect data from the user.

So, If I want to try entering a dummy data like abcd that is not a number and is incorrect information.

So to restrict incorrect information from the user we can use the pattern.

So this performs a validation too.

That was our tel telephone type.

All these input fields we studied today were added to HTML 5, the input fields we learned yesterday were the fields of HTML 4.

Today's new input fields are of HTML5.

So, using these input fields we can create a form that can take the user-friendly, large amount and valid information from the user.

So, guys

The things we learned today related to different types of input fields and input types.

I request you all to perform this practical yourself and see the output whether the correct output is being provided or not.

If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.

Today's segment was about form inputs

The next segment will be about form attributes.

The form inputs we have studied in these two days and the attributes to be added will see them in the next session.

Thank you, guys.