input type

color Input Type: HTML5

color input type fields expect the user to pick the color from the color palette. Once the user selects the color its corresponding hexadecimal value is being stored in the input field.

Demo

There are jQuery plugins to accomplish this task, but with HTML5 we need not use any plugins to accomplish this!

HTML file
index.html

< !DOCTYPE html>
<html>
<head>
<title>color Input Type: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
<script src="myScript.js"></script>
</head>
<body onload="fetch()">
 
<div>
<label for="color">Color pick: </label>
 <input name="color" type="color" id="get" onchange="fetch()"/><br />
<label for="hexa">Hex Code: </label>
 <input name="hexa" type="text" id="put"/><br />
</div>
 
</body>
</html>

Here we have 2 input fields of type color and text respectively. Once the user selects a color from the color palette, the corresponding hexadecimal value is shown in the text input type field.

JavaScript file
myScript.js

function fetch()
{
var get = document.getElementById("get").value;
document.getElementById("put").value = get;
}

Once the fetch method is called: it fetches the value present in the (color)input field and assigns it to text input field.

CSS file associated with this is same as present at pattern and title Attribute of Form Field: HTML5

Form Input Type – color: HTML5

[youtube https://www.youtube.com/watch?v=MiCOVDrVH44]

YouTube Link: https://www.youtube.com/watch?v=MiCOVDrVH44 [Watch the Video In Full Screen.]

Note: In real production server, you need not use two input fields as shown in this video tutorial. You can simply make use of the color input type and once you submit the form, you’ll get hexadecimal code value in place of the color input field. If you have a large audience still using Internet Explorer or other older browsers, then you can use jQuery plugin to accomplish the same task across all major browsers.

range Input Type: HTML5

Browsers which support range input type know that the field is used for entering a number with in a given range.

User Interface(UI) enhancement wise, you may get a slider control to select a range of number. You can even use min, max and step attributes to provide additional control for the field – for setting the range.

HTML file
index.html

< !DOCTYPE html>
<html>
<head>
<title>range Input Type: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
<script src="myScript.js"></script>
</head>
<body>
 
<form>
<label>Range(2 to 10): </label>
 <input type="range" min="2" max="10" id="get" step="0.2" onchange="fetch()"/>
 <input type="number" min="2" max="10" step="0.2" id="put" />
 <input type="submit"/>
</form>
 
</body>
</html>

Here we have 2 input fields of type range and number respectively. Both having minimum allowed value as 2 and maximum allowed value as 10, and a step of 0.2 (fractional value). The number input field is taken for the sake of illustrating the value selected by the user using the range input field – by using(sliding) the slider.

JavaScript file
myScript.js

function fetch()
{
var get  = document.getElementById("get").value;
document.getElementById("put").value = get;
}

Here we fetch the value selected by the user using the slider and assign the value to the number input field.

CSS file associated with this is same as present at pattern and title Attribute of Form Field: HTML5

Form Input Type – range: HTML5

[youtube https://www.youtube.com/watch?v=YecwKiFBt0s]

YouTube Link: https://www.youtube.com/watch?v=YecwKiFBt0s [Watch the Video In Full Screen.]

Note: Browsers which do not support range input type, simply fall back to text input type. However, you need to validate the user entered data at server-side for more security. Client side validation is done mainly for the sake of creating the illustration of speed of validating the data and for a better user experience.

Email Input Type: HTML5

Lets look at email input type of HTML5 forms.

In this video, we illustrate how you can implement simple email validation using email input type.

HTML file
index.html

< !DOCTYPE html>
<html>
<head>
<title>Email input type: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
<label for="mail">Email: </label>
 <input type="email"/><br />
 <input type="submit"/>
</form>
 
</body>
</html>

Here we have an input field of type email. We haven’t implemented complicated JavaScript to check if the entered text actually contains a @ symbol and a valid TLD. email input type checks for all these small requirements to pass it as an email address.

Form Input Type – email: HTML5

[youtube https://www.youtube.com/watch?v=nxMBsVw8LXw]

YouTube Link: https://www.youtube.com/watch?v=nxMBsVw8LXw [Watch the Video In Full Screen.]

Note:
It doesn’t validate the email address completely. Infact, it doesn’t check if the entered email address is actually a real email address or a dummy one. It simply checks for minimal thing in the entered text to determine if it is an email address or not – like @ symbol and a valid TLD(Top Level Domain) extension.

Also on mobile devices, when it encounters these email input type, user is prompted with keypad that aids in entering email address – like the @ symbol present on the same screen and need not to navigate to special symbols section on the keypad.