In this session, let us learn about the new form input type form attributes and form over rates of html5. Let me first start with the new input types. Already we have learned there are few input types like input type equal to text type equal to radio type equal to submit button, then checkbox and also one example we are seeing input type equal to number similar to that there are multiple options available. Let us have a look on this email number already we have seen range search for telephone number, date, data type, data type, date, time location to the location specific the time alone You are weak. So these are the different options which are available for type equal to so you can choose info Type equal to color type equal to email like that, I have given an example over here, input type equal to number of course, you have seen how to use number without word and downward arrow input type equal to tell name equal to for it for telephone number, then date month range range will be like a slider where when you want to choose the price range you would have seen in different ecommerce sites where they give an option for you to choose the price range for that you can go in for this range, then input type equal to date time local, then type equal to email.

In this case if you are not providing a proper email address and.it will give you an error then type equal to color name equal to color. Now, with all these we will see an example here create an HTML page with all the input types that we have seen for number 10 date, month range data Same local image and color Let me open this in the browser. So right click open in browser. Let me minimize this minimize this also can see the output what is the age ages number so it has got an upward and downward arrow you can select that age for number it is t. So you can just you are supposed to give the value Okay. Next date so when you click the downward arrow automatically the calendar from the calendar you can choose the date then next month in case of month it is you the month and the year.

So I have to open the calendar, the moment I select the month automatically it will give the month and that particular year ranges I chose it is a slider how to get the value of the range. You know that with the help of output that you can retrieve the value of the range what you have selected then they are Time, so you can see date. And again time is over, given over here am rpm. Now let me select it, I'm selecting a day, then I have to select time. Can you see this? Okay, next email for email you're supposed to give at the rate and now I am writing a simple six, then color, I can select a color the color palette will open.

I can select the hexadecimal value will be sent to the bus. Now I have entered all the values, what will happen if I click Add User button, all the values will be carried to the next page. Every all the values will be displayed in the URL because the method is get. But if you see in case of email, I have just entered only a text. So the HTML I mean, the browser will do the validation because you have given input type equal to email. Let me show you.

Let me select this ad user. The showing the error message please include ads rate and dot sign supposed to use at the rate a dot. Now let me click Add User, automatically the values are carry to the next page, we will see the values over here is equal to 32 for number whatever we have given date month, then email then color for color of a totally secure extra decimal value. So, this is how it works, but this is not the right approach. Why because you need certain validations to be performed. So how to do the validation that can be done with the help of the form attributes.

Now let us go to the format to do spot. So there are many form attributes that were introduced in html5. autocomplete, the name itself specifies you have to get an autocomplete option in that particular text, I mean form field, auto focus, focus across around that particular field. From from action encryption type from methods No validate from Target. All these work together with the form overriding factor, they disabled that particular field will be disabled height and width already we have seen that the image also lists we are seen with data lists min and max you're going to give a minimum value and maximum value that is your specifying the range. Then multiple we are seen with drop down pattern.

This is used with phone numbers like if you want to specify this can accept only zero to nine digit I sorry, the only 10 digits it has to be between zero to nine only in that scenario going for a pattern or if in case of a password if you want to specify that the password should be with this particular pattern with a special character with uppercase lowercase to specify the pattern that then placeholders already we have seen this request it is mandatory step for increment Read Only you cannot modify it is only a read only field. Now how to apply this I will show you an example. First input type equal to text name equal to f name values given read only means you cannot change the value required. So, it is I mean in this case it is mandatory, let me come to the third one disabled disabled means you I mean it will be in gray shade, then yes minimum should be at maximum can be at if you try to give a different value that is give a validation error.

All these are taken care by html5 says you don't need any JavaScript to to perform these kinds of validation I have given step two So, it will take it as 18 2022 like that, then telephone number I have given the pattern it has to be between zero to nine total number of digits has to be 10. Then date I have given a minimum date and the maximum date. Then month for that also minimum and maximum I have given range. Okay, then date time local okay fine email, email also I have specified it as required. First time if I'm not Entering anywhere is a required field and the next time only when I'm entering a wrong email. Sorry, if I'm entering a text instead of email, it will give me a validation error color of course, we have seen.

So on the same fields whatever we have seen, I have done are added all these formats reviewed. Now, let us try this example. Now, I have got the output let us discuss one by one first thing username, what it does it does read only can I go and change he does not even allowing me to change it or allowing me to select but it's not allowing me to change. Next name. For name I have humans required an autofocus without entering if they click Submit what happens? It is giving me a validation error message saying that it is mandatory and the cars are also focused in that particular form fields that may enter the name.

Next, company values 50 is disabled so it isn't a grave shadow. It has got a gray shadow. That's fine. What about age and capacity values, only between 18 to 80. So in a selecting the initial value 18 is coming, it is tempting to now let me do 23 Let me click Submit, please enter a valid value to New Year's value. So 22 and 24 is giving a nice validation error message also.

Next telephone number, telephone number let me interesting click Submit, please match the form a trick question. So I'm supposed to give a proper value or even a proper one date, date Also, I'm supposed to specify the value between 2016 I mean between 3112 2016 and 36 2017. So, accordingly, I have to specify the one even it will not give you any options it has got only May June only till that part. Next to that is not available because you are given the maximum and minimum range. So I have selected that similarly for month. Right that range is dead date and time.

Again, I have to select it. Okay, this is done, email, email is required. If I don't enter anything, click Submit. First I will get the validation message please fill in the form, then I'm just giving some man I mean, some text. Let me again click Submit, please include at the rate and then.at the rate a dot. Now I have given this click Submit.

Now automatically all the values are carried to the backend. So what I have shown you is how to use the form attributes with this input tag with all the input tags, we have used classroom form attributes like read only, then auto focus required min and max, then pattern what else then placeholder all those terms? Okay. Now, let me show you one more example of this. All right. What is the meaning of this form override, you know that whenever you have an in form fields inside the form, and if you are specifying the attribute, what it will do automatically it is going to do the form validation.

What if you don't want to do the validation. In that case, you can go in for the attributes that are available. Let me explain you with that have a look. I've got three input tags oneness with the name, it is a text field, then I've got three submit buttons. The first one is having form target underscore blank. So when I click Submit, it will open this basic dot html in a new tab that is okay fine.

I have used required attributes. So if I'm not entering any value, it will give me any error, it will give me a validation error. So I have to enter a value then only to go to the next page. Let me come to the next one. Here I have given form no validate. So even if I don't enter any value automatically, it will take me to the security A month.

What if there is a scenario wherein I don't want to go to the same basic dot html, but I want to open a new page UI layer in HTML four in older versions, it is not possible. Once you have a submit button, whatever you are given in the action will lead to this particular page it will go what the how many ever Submit button to God, all of them will take you to only basic dot html. But with the help of this form actions, you can go to a different page also. So when they click this ad, it will go to basic dot html and this will be opened in a new page. Then when I click the Submit wizard validation button, it will not do validation on the text field directly to go to basic dot html. And in the third case, when I click this edit button, here, valid validation will happen.

Right first thing because it is already Request Yama Do you think from no validate it will take you to table demo dot html but the values will not be shown in the URL because you are using form method as post you form method get the values will be shown in the URL you are explicitly specifying form method as post the values will not be shown in the URL, but it will do the validation proper validation because your specified request okay now let us try this out in sublime XML page with the form and two input types. One is the text field the other one is a submit button. We are going to see all the form attributes which are available. First let us try to so let me open this in the browser right click open in browser. When I click Add, it has to take me to basic dot html, but I have given required attribute so it will give me a validation error.

Let me click Add. So please fill in the fields let me enter a value Let me click Add. So it's taking me to basic dot html, the value is shown in the URL username equal t, this is fine. Next, add from Target from Target equal to underscore blank. So what it will do, it will open this basic dot html in a new page. Now, I will minimize this here.

I am going to the previous page Have a look. Now, let me refresh. Let me enter a new name. Click Add. Have a look on this. It's opening in a new page.

So my world page is over here, the new page basic dot HTML is over here. And again you can see user name equal to RA, right. So this is done next. Let us try this form no validate that we add input type equal to submit. So here from no validate. That's it now at minimum acknowledge me refresh the browser, I brought the button when I click No validate what will happen, it will not check in for the required option automatically it will take me to basic dot html basic dot html will be opened in the same page, because we are not using form target also, if we click this, you can see it is getting opened in the same page, it is not doing any validation also right.

So, this is done Next, we will try formats and going into a new page input type equal to so here it is input yes I have added all the content This is automatically and getting everything here new action. So, here I have to go in first form action, form action equal to so what is that I'm having like let me just open some other file demo dot html demo dot HTML form method equal to post Now let me save this and come back here, go to the back page refresh. Now I got this new one new action button also. Now when I click this new action what'll happen will it do the validation of course, it will do the validation because we are not used for no validation. So when I click this, please fill in the form. So let me enter my name.

Let me click new action. It is taking me to demo dot html. And because it this method is false, the values are not shown in the URL. Few attributes like form target form no validate form action and form method. The form no validate and form action are very useful. There are scenarios wherein you don't want to validate the form in that case going for the form no validate attribute when to use a form action.

There are places wherein within a form you will have we will be adding two buttons one Add button and one Edit button. When I click Add button, it has to take me to our dot html in when I click edit that should take me to edit dot HTML or any other page. So what you can do is with one button for it with one commit button you can map action which is given in form. And with another Submit button you can go in for this form action. So this is very useful when you're working with multiple buttons in an HTML page within a form the form overriding part what we are seeing in this session is that different form input types like email, color, date, time, date, date, time, local, telephone and so on. Then we are gone through the different form attributes.

The form attributes are of great help when you go and want to go in for validation using JavaScript. You can do the basic validation with the help of html5, we have seen like how to use request pattern min max, what is the use of auto focus, placeholder and so on. And then finally, we are seen how to use the form Right that tributes that holds the form name like form target form, no validate form method form action of the form size, attributes and form overrides. Thank you.