HTML5 Input Types: Color Picker, Range Slider and Search Box

March 30, 2014
In HTML5, color picker can be achieved just by using color input type in the form. On clicking color picker, a pop up will be displayed, a user can select the color. Another important input type is range. For interactive UI, to get value from user, range slider is used. Now to use in our UI, just use HTML5 input type range and you are done. One more requirement in interactive UI is search box. If user has entered search keyword, and then he wants to remove it in one go, a cross sign is given in search box. Do it easily in HTML5 just by using an input type search. We will see above input type in detail with example. I have run all below examples on Opera version 12.12

"color" Input Type in HTML5

In the below example, we are using color input type. When we run it we get an icon and clicking on that color picker is opened. Select the color picker and submit.
<!DOCTYPE html>
<html>
<body>
<h4>color Demo in HTML5</h4>
<form action="">
  Select color: <input type="color" name="mycolor">
  <input type="submit" name="Submit">
</form>
</body>
</html>
 

Test now.

"range" Input Type in HTML5

Using range input type create a slider. By mouse we can slide it. There will a minimum and maximum value within which it will slide. We can also define step that will define how long it move in one go.
<!DOCTYPE html>
<html>
<body>
<h4>range Demo in HTML5</h4>
<form action="">
  Select Your Range between 5 to 10: <input type="range" min="5" max="10" step="1" name="urange">
  <input type="submit" name="Submit">
</form>
</body>
</html>
 

Test now.

"search" Input Type in HTML5

HTML5 input type search is used to create search box. What we achieve here is when we start writing keyword to search, a cross sign appears in search box. When we click the cross sign, the keyword entered in search box is cleared.
<!DOCTYPE html>
<html>
<body>
<h4>search Demo in HTML5</h4>
<form action="">
  Enter Keyword to Search <input type="search" name="cpsearch">
  <input type="submit" name="Submit">
</form>
</body>
</html>
 

Test now.







©2024 concretepage.com | Privacy Policy | Contact Us