What are the Attibutes of Input Type in HTML?

Hello friends,

You all are welcome in this HTML series.

We have learned about form attributes in our last segment, how many types of attributes are there like action, method, target, no validate, and enctype.

How can we design the form as per the requirement with the help of this and how to provide functionality.

I hope that all you have tried and performed the practical of what we have learned in the last segment,

If you faced any difficulty in performing the practical then you can tell us on forum.learnvern.com. We will try to fix and revert your issues as soon as possible.

So form attributes were our last topic.

Our today's session is HTML input attributes.

So there is a difference between form and Input attributes.

We will learn different types of Input attributes in today's session.

So, let's start today's segment.

Our first input attribute is Name (Given here)

so, let's start understanding all these attributes with examples.

so, this is our form's example, in which we usually create a form.

In this, we create a form.

We will enable our default action and method attributes. In form, the very first input element we will take is, let's say the input element we will take is, let's say our input type is text.

So, the very first input attribute is Name. As here the name is present.

We have learned and taken a detailed understanding of how many types are available in HTML4 and HTML5 in the last two sessions.

So, we are not covering types as we have already gone through those attributes.

Today we are going to learn the Name attribute.

How the Name attribute helps us.

So, when we post or submit our data on the server then in that case to handle the server's data, the Name attribute is required.

So, as we have submitted a form in the last segment. and the name given was "submit_form.html" and the method we put was "post" but currently we are putting it as "get".

So here the type text will come, and here is the name.

So if we are taking the first name then the label should be taken the first name and we will require a button. so "input type= submit value=submit" then save and after reloading the page.

Now, here we got the form in which the First Name and submit button is there.

Kindly ensure when you give "name=firstName" then firstName is named as f is small and first has to come and then N is capital.

We have followed a fixed nomenclature of how we can give a name. To identify the first name, I wrote it in this way here.

Then when I go to the form and submit the form by writing abcd in the first name then my form gets submitted to another webpage where we have written that "The form is submitted successfully". along with that in my URL, this portion shows my webpage, and after the question mark shows the value of which attribute is present.

The input control name is firstName which is here and the value given to the firstName is shown here after=.

The name attribute which we have given in the form, the same name follows on the submitted page

so if I write xyz in place of firstName then it will show as xyz here.

So, you must have remembered that we will receive the data from the server if we follow the proper nomenclature, and that will be in an identifiable way because if I write xyz then the person sitting on the server-side shall not be aware of this then in that case if we are using the proper nomenclature then it is useful for server-side too, so our name attribute is the requirement gathering we are taking from the user, the same name shall be pass by server-side.

So this is our name attribute.

After that, the value attribute arrives.

The value attribute is used to set the default value. For example: If I give the value in input type after the name that "This is my first name" then here we got the default value.

You can give the required name by removing this but the value we have passed in our input type will be shown in our input type. As here This is my first name, which means I have got the default value of my input type.

In the same way, we have given the value to submit in input type. Then this Submit is showing here upside down. If I change this by Click Me then after saving its name it gets changed to Click Me!

It's not necessary to give the name submit,

You can give the name of your choice but make sure the name you are passing must be user-friendly.

Our next attribute is the required attribute, This is an important attribute.

If I want that My form would not get submitted when my input field is empty. Then I will require the input field. I am removing the current attribute and placing the required. Save and reload!

So Currently, my text field is required as every time I click on the submit button then my form gives me a message of "Please fill in this field".

So, your form will not get submitted until you fill the required field.

It also restricts our user that you have to fill so and so form.

So, the required attribute is used when we get the compulsory or mandatory data from the user.

Now, Autofocus.

To explain autofocus, I will make text fields.

Here my first is the First name, second is the Last name. Save and reload!

As I reloaded it, there was no focus in any of my text fields. Focus means my cursor comes into the text field when I click here, So currently my screen's focus is on the First Name.

If I click on Last name then my cursor on the Lastname's text field means my focus is on the Last name.

So every time we click then we get redirected to the first or Last Name's text field.

We use Autofocus if we want to redirect to the text field automatically.

So, let's say I shall compulsorily autofocus to First Name's input field as I reload my web page in the browser.

In that case, I will use the autofocus attribute in this.

As I just reloaded it and by not clicking anywhere but still my cursor got into the First Name's field. This is the functionality of Autofocus. This means it is decreasing my one click, I am not going to the field by clicking, automatically my cursor is showing on the text field.

Next is Place holder. Currently, we have given the label of First Name to define the first name and Last Name to define the last name. I am introducing another one, let's say Contact Number. Type=number, Name=contact number and save!

So, now the contact number is here and my autofocus is on First Name. So if I am going to the contact number and type anything then it is taking my values, I am changing the number as a telephone.

By doing this the dropdown of numbers got removed.

So it is allowing me to enter anything which I want to enter. In the last segment, we have seen that the contact number must be in a fixed pattern.

So the pattern which we have seen is [0-9]{3} times repeating the first number 3 times then again the number [0-9] how many times {3} times then - again accept a number between [0-9] and repeat this to 4 times {4} and then save and reload!

Now when I am entering any random number but showing an error at the time of submitting.

I am removing the required from Firstname and Lastname. Reload!

Now when I am entering any random number and after clicking, an error message shows "Please match the format requested ". So, compulsorily I have to add a number in this format.

So, if I add this number 123-456-7890 and after clicking, my data is getting submitted successfully and getting this number in our contact number.

But how can the user get to know that it must compulsorily have two hyphens present in the data which I have to enter?

So this occurs as a problem as we have to inform the user that you have to enter the data in a fixed pattern.

We can use “Place holder” named attribute in that case. We can inform the user to enter the data in a fixed pattern by the use of a placeholder. It should be like format: You can pass any data in a placeholder that is useful to you.

Currently, I am passing 123-123-1234. After saving and reloading, This is showing us (Format; 123-123-1234) means this is information to the user that the data of or contact number you have to enter must be in this format. So, my placeholder will be visible until I enter a number into it and visible to me as I remove the number.

Placeholder is a very useful functionality of input type. By using a placeholder we can inform the user which data you have to enter in a specific text field again by using a placeholder you can tell the user for the data they want to enter. Also, you can use a placeholder in multiple ways as I can use it in the first name to tell the user to type the first name in the field. Here I have shown on the contact number label but specified through placeholder that you have to submit data in this format.

Our next is Disabled.

It is also very useful if you want to disable any text field. I want the user cannot to enter the data in that.

So, in that case, we use disabled. Save and reload!

As I use the Disabled attribute, I can not edit the text field of First Name, and also the color has been changed to gray out. So this is the use of disabled attributes as if you want to show the text field to the user but don't allow you to enter the data in that. Then in that case we can disable the text field.

So, here the first name is disabled that's why I can enter the data in Last Name and contact number but cannot enter anything in the disabled field.

Next is size. We use the Size attribute when we have to fix the size of any text field. Let's say I am giving size and typing 8 as my last name. so when defining 8 Size and after reloading, the text size of Last Name comes in 8 means its pixel size or the width comes in 8. Size doesn't mean that I can add only 8 characters. I can add any number of characters. The size attribute is used to control the field's width.

Our next input attribute is Form.

Let's say we have defined a form in this code name from here to here. We have not given any name to the form. so if I want to give an Id to this form then I can give it this way. We are going to learn about Id further.

So, let's say I am given an Id "form-control" which I have given to the form and save.

So, let's say all my input elements in this form belong to this form so when I click on submit button then all my elements in Input elements (First Name, Last Name, and Contact Number) will get submitted with the form data. but let's say I want to define a control or an input element outside the form but I want that input to be a part of this element.

So, in that case, we can write like, I am copying this portion and pasting it here. And I am writing "email" which means email is currently I am defining outside the form "name=email". So, let's save and run this!

My email is showing below my submit button means it is outside my form.

So, when I click on submit my data is getting submitted but here you can see that only last name and contact number, only two things came.

So, let's remove this firstName, this Size. Save and continue!

Now when I type something in the first name let's say abcd then xyz then format and click.

When I submitted the data then I got my first name, last name, and contact number but I am not getting the email.

I am typing this abcd@mal.com then submit.

Still, I am not getting the email.

This is because the email is not part of the form.

If we can see in the code then the form starts from here and ends up here. And the form is defined outside the form.

So, if I want to make this email a part of the form then, in that case, I will pass that is that we have given to the form under the form attribute.

Reload and run!

By filling in all the details and then save!

Now we have seen that we got a first name, last name, contact number, and email.

So, In this way, by defining form attributes explicitly. If there is something which we want to use in our form that we can do with this. For the parts which are outside the form, we can submit the fields or parts that are placed outside the form.

So, these are Input attributes (Name, Value, Required, Autofocus, Placeholder, Disabled, Size, Form) which we have seen today.

In the next topic, we will learn about HTML head. If we look at the code then there is only a title in the head. Apart from the title, we can add many elements.

So, how many elements we can add in HTML that we will discuss in our next topic.

So, guys today we have seen different types of attributes. So, I request you to try yourself and perform a practical.

It's really good if the practical you have performed runs successfully. But 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!