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 1 Html5 Tutorial – Lesson 6
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.
And we can set this to a value will say enter your name and now you can see what we used to do with JavaScript is now being done naively.In the browser in this provides additional hence,when you click on it, it disappears.So now you don’t need to worry about using javascript solutions.However once again if you need that placeholder to be there and it’s more than just a hint at else in the exactly what to enter or a format.Be careful because older browsers that placeholder is going to be ignored and they won’t see anything at all so keep that in the back of your mind.
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
And this is pretty need so you can imagine using this with your javascript if you’re uploading something you can dynamically update this value accoedingly.If you want to do this really quick in the same query selector review look for the progress tag store that in a variable with P and weare gonna do this really quickly.We’ll update it every 50 milliseconds and you can eat every 15 milliseconds that updates.
You would do this with your JavaScript maybe at specific points during the process you can eat this value but nonetheless it’s very cool that I have this built into the browser.Lastly we should add value between a text that way in browsers support the progress tag there is something for them to ses. The next one is meter in this is pretty nee as well.This could be used for example to show a final score.So maybe we set that 250 minimum to 0 and maximum 100 point scale they got a 50 and now you can see it’s little bit different.
Get rid of this JavaScript there.Now ofcourse we can style this so I can say neither with a stranger pixels make so we can set the height.
I don’t think you want a height that big but it is cool to know that you have this built in.The meter tag would be one way that you could provide that to them.You use your server side or your javascript to determine how well they did then you dynamicly apply the value.So yeah both progress in meter are both very cool additions.
In our next lesson we will try to discus about the Feature Detection,
The post Html5 Tutorial – Lesson 7 appeared first on DevsTrend.