This is the 7th lesson of the HTML5 Tutorial and here you will discuss about New form attributes,Progress and meter.So let’s start.
Html5 Tutorial – Lesson 7
2.5:New form attributes
In this lesson we take a look at some of the new html5 attribute.You’re already familiar with some of handful of attribute.Let’s do a refresher in this lesson.The first one is placeholder.
The next one is required number for this area there were ways to specify for accessibility recent this input must be filled out.But now we can remove that and use this html5 attribute.If we try to meditate without entering any thing now we get an alert saying “hey you got to fill this field” so that’s an easy way to add an additional layer of validation
Next we come to pattern in this it’s a way to specify with your own regular expression what is required.So if I want somebody to enter their age I can say the pattern is I want to look for at least one digit for the maximum of three digits.And that way we can accept an age of nine or an age of 90 or even an age of a hundred.So let’s add a little more here and let’s switch the input type 2 numbers and now they can either ticket if they want or they can type what they want my age is 50 and if we click submit that successfully submitted.And in this case it’s filling with Js.Now what’s important to keep in mind though is even though we have this pattern here and we specify that we looking for at least one digit if we do not have the required attribute watch
I click it and it still submit and I think this one’s a little bit odd.
My pattern should specify that hey there has to be at least one number here for a minute but this seems to be a common issues.So you want to be careful and if there has to be at least something make sure that you add on required attribute as well.Now you want to specify that the browser should ignore its built-in validation here.May be we have an input type of email and will remove this right here and we want to say I want to be able to submit this even if non valid email address is submitted.
We can add an attribute here that says form no validate and now if I click submit it will process.Now this can either be applied to the form element or to an input.Now additionally with forms there are of course attributes that are specific to certain input types.So if we return to the input types of range we know that we can specify and minimum and maximum but we can also specified with step.We can set each step is 5 and with that mean says there’s only going to be a total of three steps 0,5 and 10.
Now we don’t have time to cover every single attribute is quite a few.But I want you to take a look at state of html5 forms in this was created by Weebly Chris Coyer and it’s an excellent resource to keep up-to-date on with the browser do and do not support.
So we can see a lot of input types that we’ve already learned about there’s also a date time one in this allows it to specify even with monthly time.And we come down here some attributes we from the placeholder there’s also an auto focus,maxlength,pattern that we learned about form no validate
So be sure to bookmark this and come back to it when you’re working on her Florence because there’s a lot of fun stuff to play with trial
3.6:Progress and meter
The progress tag is vary need.So if I added on like so you can see that it instantly add some feedback may be for uploading or downloading
Now we can specify the value.So we set that 20 that going to appear that nothing is showing but what happens if we set a minimum of zero and maximum of a hundred now itspacifies that we are one fifth of the tota
In our next lesson we will try to discus about the Feature Detection,