Welcome back to our 5th lesson of HTML5 Tutorial courses.In this lesson we will discuss about Form and show you the easiest way of input email and url.
Html5 Tutorial – Lesson 5
2:Forms
2.1:Email inputs
Here we’re going to start digging into html5 forms which is one of the big things in html5 we have access to a plethora of new elements in attributes and input types.So I think you’ll be excited about this.The one thing I will warn you up some of this is new,some of these features are may be only implemented in opera.They might be implemented differently in chrome,So we’re almost in IE6 territory here but still you definitely want to be playing around with these because I shall find they actually degrade quite chrisley to simple text boxes.
So let’s bring in a simple and put here and you know that we have implotype text.Now if I wnat to remove this that would be the dafault anyways.So that a fault for an input is text and we can prove that there is our text box.Now lets add some new types that are available to us and we’ll set it to email.
So this is an input specifically made for validating an email address.In another nice thing about this is that mobile browser will be smart and handle them.So maybe if you have an input type of email or URL when you bring up the keyboard and maybe the iPhone or Android it will note to display a customized keyboards specifically for entering a URL that very helpful.Let’s come to email and see what we get in Chrome.It looks like a simple text box but its not.What happens when we come back and we’ll add a submit button and now what gonna happen this is going to provide some built-in validation for us.Browser validation that’s pretty need.I want some chips and when I click submit,you’ll see that we get this new announcement please enter an email address that’s pretty cool.
Let’s try it out some ofthe other browser,I’ll switch to opera and now its just ride estimate with nothing,that’s interesting it does submit even if you don’t tighten anything right keep that in the back of your mind and then once again I’m an introduction Buresh and now we get a slightly different display please enter a valid email address.And this is opera version 11.5.
Now lastly let’s switch over to Firefox and I’d like you to notice something to the best of my memory is the defoult value for a button always been submitted.But it seems like recently and Firefox they change it with little interesting because it’s less readable a little more confusing.I wonder why they did that.Anyhow if we once again I try to click submit. We also get please enter an email address.And the is fact that in every browser the display of the validation popup is going to be a little bit different and I don’t think that’s a problem that should be okay.We could also take a look and Safari but we could spend hours comparing browser to browser.
So we will stick with these three main ones.So now we successfully validating an email address.But I want you to remember you can’t rely on it for sensitive data.if I needed to get around your validation all that I would need to do is open up Internet Explorer 8 and then I can easily pass for validation.Because in those browser it defaults to a simple text box.So this is helpful for some built-in browser validation but you want to do your own form of service ID validation as well.I want you to note that this validation isn’t streaming and that’s because it’s incredibly hard to Valenti email address for every possible email.So I want you to note if I wrote 22 and click submit,didn’t work but if I do
a@a and click submit,you can see the question mark in the URL.That means it did submit succesfully.
So let’s take a look at both of these the first one is according to the browsers a@a that is valid email address and I’ve some debates on this I think we can all agree that technically a valid email address its not reeling and that’s why is the browsers have to accommodate for such a huge variety email address might be.
So ultimately what we end up with is they are making sure that they are sequence of letters or numbers than symbol and then after the @ symbol on one or more sequence of numbers or letters as well as relate the extent of the validations.So keep that in the back of your mind to how do we get rid of this fact that the formless mitt even if I don’t type anything.We wanted a valid email address so you think the absence of any letters would mean no email address.
But unfortunately that’s not the way it works.The way that’s work is we want to apply an attribute called required and we’ll take a look at more of these in the attributes section before now to take note that required means this input must have a value.Now come back and click submit you will get a new one that says please fill out this field.Same thing for opera.For all browser this is a required thing.in this roster as well this is a required field.So don’t rely on the validation to accommodate every possible scenario.In the next lesson we are going to take a look at the URL tied.
2.2:URl and tell input
In the last lesson we took a look at using the browsers new email type.This time we take a look at URL in this allows us to specify that what do you type into that input that must be a URL.And again for mobile phones they will display the necessary keys for entering a URL.So it also had set additional bit of accessibility and help.So now before began I want you to know URL is shady guys.
So let’s take a look at some of the issues we have to deal with right now.I’m in upper right now 11.5 in what you’ll see is I’m going to type anything and we all know that’s not URL.However if I submitted it’s going to submit successfully.It’s because Opera will automatically prepend http:// Saxon and we can see that simply by typing off Opera will go ahead an add that on there for you and really that’s the extent of corn court validation and operates performing and it’s really none.It’s just checking to make sure that http:// at the beginning of it.And if it’s not it will add that on there for you.
So in opera you’r not really getting validation.If we switch over to chrome,see what happens this time if I enter some gibberish click submit. Will there is some validation being applied there.But we never won a trust the browser to do real validation.So let’s what happens if I enter a colon, okay that’s working but now I’m going to add a letter before a colon now I’m going to hit submit,it’s submitted.What we see here is that the browser simply looking for sequence of letters then a colon and another sequence of letters.So just as a@a 8 would pass email validation and a:a will pass URL validation as you can see right there.So once again I must be honest I’m not sure why they are so liberal with what they accept and I can only assume it’s because there is such an enormous array of the URLs in emails that they end up making it very very simplistic in their validation.Nonetheless it’s really nice to know that we can have a little bit of built in validation for you can save yourself some time and we can do less work on the Surfside ultimately.
Next let’s take a look at the telephone input type tel for telephone on this was a little bit different in that there so many different phone numbers in the world he can’t really validates so if I reload rush that’s going to accepted at the time of this recording their own no built-in restrictions.However let’s say I am beast in the US in Tennessee and let’s say I want to make sure that the user enters a us-based phone number in that case on which built in I can use a new html5 attribute called pattern and now
I can enter a regular expression here if I’m familiar with it.So if you don’t know what your friends just watch me go through this and I’ll explain it along the way and when you’re done I really highly highly recommends that you pick up a regular expressions book guess it’ll do wonders for your cutting its excellent excellent skill.So here backslash div refers to any digit and I want to specify though that a US phone number will take the shape of three digits followed by 3 digits followed by 4 digits.Now there’s could be add prefix so could be 1 – 3 digits 3 digit 4 digit or you sure might potentially rapids within parentheses.And then finally to use for could not enter a dash it all so they do 123,123,1234.So I can see it’s actually a little bit difficult to validate phone number because there so many different ways to use your condenser.So you have a couple of option one,you can create a regular expression that handles all of these it’s not too tough or two you could provide the user some input on the format that the phone number they enter should take shape.For now take care of this one and then we’ll come back and upgraded.
So here I am saying look for three digits and then look for – then look for three more digits then a – an hour to this point we’re going to look for four digits.So now I will save that and when I come back and relode the page,and we enter anything we will get some new validation errors.by the way there is a spacing because I am joom them.If i try again it looks nice and normal this way it’s easier to see them.so now 
so now let’s try to do the actual syntax I will do 555-555-555,submitted and it worked successfully.So now we successfully added a pattern to our input type.Some people feel this isn’t the job of HTML in but I don’t think there’s anything wrong with attaching specific format.I think it actually helps to describe what is input type is.It is a telephone input that accept that’s accept this pattern.
Now I am going to finish it up for this lesson but if you’d like to stick around for the bonus rounds where we compensate for all of these as well let’s get into it let’s take care of this one by one.The first step is we are going to take a look at the second option online 11 and that’s for the leaves off the dashes and we can make that optional by doing a question mark after each dash and what that means is look for dash but its not required to look for zero or one of the preceding character and then we’re going to do the exact same thing to the second dash.
Now i return in the second version 555 555 555 and it worked successfully that’s no longer a valid phone number and we get an error very cool.Next take a look at this option this is where we had one prefix.So we can do that a very beginning and we could say another digits followed by a dash.However I want to make sure that this whole sequence is all should home.
So I’ll do here is I’m going to wrap it with imprint the Seas and then I’m going to place a question mark after that and that’s the another way for me to say everything that’s in parentheses before this question mark look for 1 or its optional.You don’t have to find it.And in the final step is you don’t have to do this but it’s helpful for performance in future years if I do question mark and colon within here that I don’t want to capture everything generally you use parentheses because later you want to capture that specific value that occurred between the those parentheses.However in this case the only reason I’m wrapping it is so I can make it optional.
So I’m going to specify that its non capturing don’t worry about that.That’s getting a little too complicated and now will do 1- 555555555 and submit and that works correctly.And then we want to do one more thing where we make the dash optional as well.In that way we can accept first syntax or the last syntax.And then the final thing is sometimes users can wrap their area code for the call destiny US is ssometimes users can wrap their area code within parentheses.
Now I’m going to wrap that within parentheses right there however for regular expressions as I noted for parentheses are used to group things together.So if we want to say no I’m literally referring to a parentheses I’m going to escape it in that way it’s not the regular expression symble but it’s a literal parentheses.And then I’ll do the same thing here.Lastly I am gonna make sure that each parenthesesis optional as well.That’s should take care of all of this.let’s do our final test and will do the base on 555-555-5555 and that’s workNext we move the dashes and that’s also works.Let’s do something wrong and that’s failing that’s what we wanted to do and then finally we’re going to wrap the area code within parentheses submit trial that works as well.So we built a fairly solid regular expression a usa-based phone number.
That’s all for the 5th lesson.Connect with us for our next lesson.
The post Html5 Tutorial – Lesson 5 appeared first on DevsTrend.