This is our 6th lesson of the HTML5 Tutorial.In this lesson we will discuss about Search,Color,and Number inputs and learn how to
Range input and javascript.So Let’s start.
Html5 Tutorial – Lesson 6
2.3:Search,Color,and Number inputs
in this episode we will take a look at the search color number input types.Let’s begin with the most fun one that has the least amount of support,unfortunately that would be color.This allows the user to see a color picker built in color picker isn”t that need.However it only works at the time of this recording in Opera.So let’s load that up and now you can see the defult display in opera for the Color Picker is like so.And now we can choose our special color or we can just click other and it will bring into the default color picker for you to use.
Unfortunately that’s not going to work any other browser so if I switch over to Chrome what you’ll see is as with all input types when its not recognize the browser with defaults to a regular text box.
So this is the point when you would want to use what we would call a polygon and that means listen for what the browser does not support.If it does support this new feature,use them.But if it doesn’t we’re going to bring this an alternate script that will fill in the gaps so to speak or provided JavaScript-based color picker.
Next we are going to take a look at the search input.So if I change that’s into search and comeback what you’ll see is by default in most browsers the input will display rounded corners in this is very similar to what you might expect from.For example the Apple search feature large nice and smiled and rounded.However watch what happens if we return and now we are going to add a new attribute called results come back reload,now you can see it actually displays built in very handy little search feature and this is something we are familiar with.
If i begin typing you will see an ex display that will allow us to delete what we’d written.So if we try this out in opera and you’ll see that supporting statement again in Opera and in opera even though we have the results when I can get anything we don’t get the removal,we don’t get the search feature.And if we switch over to Firefox you’ll see that it doesn’t support it.So we are only getting a default text box.But that’s oaky it’s not to be different from what we will see in chrome.Now one thing I want you to know,though is when we are using this input type,what happens if I try to style it.So I am gonna type input[type=search] and the background color should be red.Then I reload the page is and that’s not working at all.
We want to inspect it right here you’ll see that it is bring it in so when we try padding a hundred pixel something huge and that’s not working either.I guess the idea is a search input look the same across all websites.Of course we know thats not really practical but I guess that’s the idea so they almost overwrite your ability to styling.However I still have control you just need to know how to get control and in this case if you want to scrap the search and put in your features and then WebKit appearance is none.And now I come back and reload the page it removes those rounded corners in an once again I can go to the input and set my background color to red and now that works.
So it’s up to you if you want to keep in the built-in styling or if need a little more control you can always take the WebKit appearance of that input and bring it back to nothing.Endlessly for this lesson we’re going to take a look at the number input type and this allows us to specify that we only wish to receive a number.So I close out and I type some letters it will submitted.There is no validation but we do get a nice little ticker right here.
I can click on it and I can specify my number.Now if we switch over to opera it’s all about same.Now try to if there any validation,no little except anything and finally if we go in firefox and I can type anything I want,Firefox does not support this type.So once again it defaults to text box. So this all might lead you to think it’s not working with these So if you used to clear pick guard don’t expect that to work in Firefox or Internet Explorer not going to work at least the time of this recording this is.Now we are describing it much more.So now we are describing that number input should only accept a number and email input only accept an email.
2.4:Range input and javascript
Now we’ll take a look at the range input type which allows you to create built in sliders.So for this lesson let’s add JavaScript in HTML & see our output to the right.So the first step is we want to add this input type=range
and if browsers support it we will get this nice new slider
that we can drag the left or right.Now we can also add a handful attribute. So let’s say that we want to create 3 slider for red,green and blue and then based upon how we move the sliders it was specified the color of heading just for something to play around with.
We can get this a min and max attributes so we know if we’re doing red green blue RGB that the max should be 255 and here we have between 0 and 255 to choose from.Next let’s wrap these within the definition list.Since we’re going to have a term for each and details so to the term in this case will be red and the details.Next I will copy this and paste it for green and lastly for blue.Next at a quick bit of styling projects it will just a makeshift form of reset and then finally I’m going to float the detail to the left provide some padding to the right.
And then finally make sure it clears anything that’s above it and Lestly i add some marjin bar it’snot very necessary for the lesso.Next I want to have our heading that we’re going to manipulate.So we’ll say Tuts+rocks and now how we manipulate sliders it should update a color in real time.Let’s see how we might do that.Well the first step is when you’re working with these new html5 input types you’d never want to assume that the browser will support that you need to check support and we call this feature detection.
Let’s create a function here and we’ll call it supports range and when we are determining whether the browser recognizes these new input.We usally follow a similar path and that is we create the input {var i=document.createElement (‘input’)}
If you were doing this and jQuery would simply do something like that but will stick with JavaScript for now and now we are going to set an attribute for going on at the type attribute equal to in this case range. Now the final step is simply to determine whether or not the type of the input we just created is set to range.
So what’s going to happen here is in browsers that support the range type we’re going to set the color attribute.However an older browsers or even some current browser like firefox doesn’t support the range input.So when it does that the browser going to say I don’t know what that is I’m just going to default back to text box.And that’s what we’re doing right here we’re saying is the type of the input a text box file or has it’s still retains the range type.So let’s try this out and see what we got is truth
So we know chrome supported however if I take this code in Firefox we would get false.So now rather than learning it I really want to do here either either true or false.So now we’re going to see if supports range only then are we going to progress in that way we’re not running all of this code when the browser has no clue how to work with it.Now to keep things clean it’s always a good practice to wrapper code in function so I will copy and paste it in like.
We create a function that performs feature detection and now we are determining whether we can use it.So that we can the next step is we want be manipulating this h1 right here.So I will go ahead and capture that heading equals Stein and will use some modern techniques and Javascript jQuery selector allows us to pass a CSS selector in javascript.Just be careful about doing this in older browsers.
So this case for simply looking for the heading 1 tag and I’ll be sure I declared that this is a good practice as well.So now we have reference to h1 tag we also need to have a reference with these three inputs.So I’m going to get each of them an ID in the name equal to in this case red, green, blue.
So green will be ID of g and we’ll do the same thing for name as well and then finally blue id=b named=B.So we will declare this at the top are G B name them really easy to understand.And now we’ll say red is going to be document.JeQuery selector and we are going to look for an input with an id of r.And we’re just going to repeat the street one that way we can latch onto each other values.Next I’m going to attach an event listener to the body and its been{body.addEventListener(‘change’)} and once again we’re using some advanced techniques here if you want to support older versions of IE you also want to do an attachment or you might be perfectly happy to do jQuery where you would to {document.body…}like so
So when something is changed here this is a simple projects so we don’t even need to determine what was training because we know it could only be the input.When it does in that case we want to update the color of the heading that makes sense when ever this is changed we always want to update the color of the heading.So when that does occur will simply say (heading.style..)
So now if we switch it you can see it immediately turns to red.So now we already have the functionality in place we simply need to substitute the current values. And remember when I slide one of these slider it will either be set to minimum of 0 or maximum of 255.So the middle would be 127.5 is that right.
Now if you prefer you can also set default values and that’s simply by doing the standard value.So I put it to 0 that will be pushed all the way to the left alternatively if I set it to 255 it knows that is the last number so it on all the way to the right.In this case we don’t need it either way the only thing we need to do at this point is grab the value substitite it right here.So what I will do is get rid of all of this and then to grab the value of the input we can do .value with JavaScript so we could say document that query selecter with an id will be equal to whatever the current value on the slider is.
I’m going to move it around and let’s try some colors trial if we have red 0 and green 0 we can set blue all the way to the top.And if we take red all the way to top and put it down we have red.red and we bring in a little bit of green bring down the red.Now we have the ability to specify this color using native html5 range inputs.
That’s the end of Lesson 6 we will come back soon with lesson 7 where we will discuss about new form attributes,progress and meter feature detection and many more.
The post Html5 Tutorial – Lesson 6 appeared first on DevsTrend.