What are HTML Form Attributes?

Hello friends,

Welcome to our HTML series

In the last segment, we learned various input types of html 5, we covered almost every input type of html 5.

I hope you went through all the types one by one and performed the practical.

If you have faced any difficulty in performing the practical you can let us know at forum.learnvern.com

We will solve your difficulties and try to revert to you as soon as possible.

Today's session will be HTML form attributes.

The forms we created in the last few sessions and the different attributes we used in them we will go through all of them and take in-depth knowledge about them.

So let us start today's segment.

The first in the form attribute is the action attribute.

So let us go to the program

We will explain it through the program itself.

When we see an example for html form we usually start with the form tag.

Here in this form tag, there are two fundamental attributes in which the first is the action attribute.

In the action attribute, we usually identify or put the name of the server page where we have to submit the data of the form.

Last time we redirected this form to another web page where the output "your form has been submitted successfully" was shown.

We redirected this data from one html page to the other.

But the data of the form don't need to be redirected to an html webpage.

The data is submitted on the URL mentioned inside the action attribute when we click on the submit button.

These can be .php, .jsp(Java server page), or any other url type page instead of .html.

So it's not necessary to redirect from one html page to the other you can redirect to any form page.

The second attribute is the method.

As we saw last time there are two types in the method attribute: either get or post.

Now, why do we use the method attribute?

The method attribute is used for the HTTP method.

HTTP stands for hypertext transfer protocol.

As you know, when we study the form, the data collected from the user is submitted on another page.

There is a way and some protocols for submitting the data and there is a path that defines how the data has to be submitted on another page.

So this way of submitting & rules and regulations are defined in HTTP.

HTTP means hypertext transfer protocol, the data we have to transfer from one page to the other, and the related rules are defined by the HTTP method.

We learned two HTTP methods one was the post method and the second was the get.

As we know, if we want to pass any sensitive data that should not show on the front end or the screen.

Like we used the password in the get method we were able to see it in the URL bar.

So the difference between the get and post methods is whenever we are passing sensitive data from the form or the URL we must use the post method,

and when we are sure that there is no sensitive data in the form then we can use the get method.

The difference between both is in the get method the data is shown in the URL bar whereas in the post method the data doesn't show in the URL bar.

Next is the target,

Like we used different input methods and we submitted the data by filling the inputs.

Two options are provided when we submit the form

First is that the submitted data or the page after submission opens on the same page or in a new tab.

This we have to see with an example.

So let's say in the current form the action I have given in form.html and in the method I write get and in the action I will write submit_form.html which we have not created yet but we will create it.

In the current form, let's say we include a header "This is the form".

When we run the program we can see "This is the form" here.

Now we will create one more form

The html submitted form will be the title.

Inside the body, we will take the h1 tag "This is the submitted form".

Let me save it.

With the name submit_form.html.

Here we have passed the same name submit_form.html.

So, when we will introduce the save button inside it.

Type equal to submit and its value will be submitted.

Save and load

So we get two things here

The header of the form and the submit button.

Let's open the second program as well so that we can see what its output is.

So, here I am opening the submit_form from the programs.

When we will be on the form we will see "This is the form" where we have given a submit button.

When we will submit it we will see "This is the submitted form".

We created two programs and currently, we have opened them individually so I will close the submitted form.

And now by clicking on the submit button we will be redirected to that page.

We have not added any target attribute currently, so when I am clicking submit the page is getting opened on the same tab.

That means we are getting redirected to the page on which we are supposed to and it's getting opened on the same tab and no new tab is being opened.

So, the use of the target attribute is that the default value will always be _self, but if we want to open the submitted data in a new tab, in that case, we enter the _blank value.

So, same target _self this is the default option for loading the data into the same tab.

To save and load.

I am going to the first program, reload

When I am clicking on submit we remain on the same tab.

Now I will change its value from _self to _blank.

When we use _blank and click on the submit button the page will open in a new tab.

The next attribute is auto-complete.

Using the autocomplete attribute we identify whether to fill the input fields automatically or not.

Let's say, we add an input field inside the form.

Input type equals the first name, name equals the name

Sorry input type equals text.

We will give a label to it "First name".

Save, here br

So here in the form, we can see a label and input field of the first name.

Currently, when we click on it we cannot see anything but let me add abcd and submit.

Our data is submitted.

Now, when I reload this page and come to this field as soon as I click on this an option of abcd is shown.

This means when we loaded the page the first time we couldn't see this option, but when we submitted the form and visited it the next time on that page we got an option to automatically fill in the data.

So, this option is provided through auto-complete.

Usually, we write autocomplete like this.

There are two values for it on and off, default value is on.

When I came to this page I didn't give any value but still, when I referred to the page again the option was shown automatically.

That means the option on autocomplete is on by default.

If I don't want it, I will set the value of autocomplete as off.

Reload the page, we will come back to it.

When I am clicking it, the option I wrote at the first time abcd is not showing in the drop-down now.

This indicates, if we want to every time show the data filled by this system on this form we will set autocomplete as on and if we don't want to let different users see the data of previous users we will set the value of autocomplete as off.

As a proper way of creating a form setting the value of autocomplete as off is more useful because if from a single system multiple users are accessing the same form

In that case, it's not a good practice that the different users can see the data of other users.

And in this case, keeping autocomplete off is mandatory.

This is a facility of autocomplete attributes.

Next is the ENC enctype.

Now, there are three available options in enctype.

The first is application/x-www-form-urlencoded.

This is the default option and in this option, all the values we have entered in the input fields like first name, last name, username, password etc. gets encoded.

This means every character will be encoded into a different character.

The use of encoding is that whenever we submit the data and if that data gets submitted as it is, and if anyone wants to check or hack the data it can be seen as it is, in that case, the encoding type is so important.

If we want to securely transfer the data to the server or the resultant web page, in that case, we can use the encoding techniques.

Using encoding techniques not only the data passes successfully but securely too so that if any mediator wants to interpret the data he cannot interpret the data easily and the data should only be known to the user and the person to whom it has been submitted.

The first technique application/x-www-form-urlencoded, is the default technique, and in this technique, all the characters get encoded and changed and then passed and get decoded on the server end, and we can see them in a decoded way.

The next technique is multipart/form-data, in this technique no character gets encoded (like we mentioned abcd in the input field), and whatever files we have uploaded from the form gets encoded.

So if we are using any files in any form, we can use this technique while encoding the files, data will not be encoded and it will be passed as it is.

So, that was our second technique.

The third technique is plain text, under this, all of our data like the entries we made in the text fields will not be encoded either the files will be encoded but only the spaces will be replaced by the plus sign.

Like we wrote abcd after space we wrote XYZ in the first name in this abcd and XYZ will remain the same only the space will be replaced by the plus sign.

As written here only "spaces are encoded into + symbol".

That means the data will be passed as it is but only the spaces will be converted to + sign.

So these were the three techniques.

The first technique, application one is the default technique and mostly we must use that only because that is the safest of all because in that our data gets totally transformed and only then it is passed.

We don't have to define the enctype that is not for the user, the browser takes the values by default and we don't have to define them.

If you create any webpage inside which you have to explicitly define the encoding type then you can use any of these three.

Last is the novalidate,

Through novalidate you can submit the form without any validation.

So that is our novalidate attribute.

For example, if I go to the form and write novalidate here, I need to pass the value too.

Ideally, there must be no value so we will remove and save it.

Through novalidate, even if we have given incorrect data ni validation will be performed and the form will be submitted.

So let's say I'm taking the email input field as an example.

Label email

Okay

Type equals email,

The name should be email,

Save and load.

So, here I have taken the email.

Let me remove this novalidate.

Save and reload.

So, if I write abcd here and submit a notice it shows that the @ sign is not there.

That means the email is incorrect.

Now, if I add the novalidate attribute here and save it.

I am loading it.

And I am writing abcd that is an incorrect email, even after that the form is getting submitted successfully.

This means if we include novalidate attribute in the form no validation is performed and even if the data is incorrect we can still submit the data on the server.

So, all these we studied today are the attributes of our form.

Action, method (two types of method: post & get),

One is the target attribute with self and blank

After that, it's the autocomplete, enctype and novalidate.

So, all these are the attributes for a form and using these attributes we can design a form as per our requirements.

In the segment after this, in that segment, we will learn about the input type attributes.

The attributes we learned today were the attributes of the form.

In the next segment, we will learn the input type attributes.

The form attributes we studied in today's session you must practically perform.

In the form we created in the last segments you must try to add these attributes to that form.

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.

Thank you, guys.