HTML 5 Forms : Search Box & Range
07-05-2017    3018 times
HTML Search Box & Range

Search Box & Range

Search Box

In HTML5 provide another input type called search. By this input type we can define a textbox as a search box. But this control cannot produce the same result in all the leading Web Browser. The Syntax is given below

<input id="mysearchbox" type="search" />


Search Box

It is like a normal textbox, but when a user writes something on it the a blue cross sign(×) appears at the right hand side of the textbox. If we click on the (×) sign, then the text of the textbox will deleted.

Note: This control gives a cute appearance of the search box, But It is not automatically connected to the search engine. Only Safari (tested with Safari 5) and Google Chrome support this input type does that.

Input Type : Range

Range input type introduces in HTML5. It is actually shown a Slider control. It is used to control a number within a range. In the early days, if we want to use a slider control, then we must take help from the Java Applet or Javascript or flash. But HTML5.0 save lot of time and thousands of byte from programmer code.

The code can be as simple as :-

 <input id="test" type="range"/>

The following attribute is used for Range type input.




Minimum value of the range. Default minimum value is 0.


Maximum value of the range. Default maximum value is 100.


This attribute uses an integer number only. But if the minimum value of the control is a non integer, then the step value may also be a non integer.

Private Teacher

Now we are try to understand by Demos.

<!DOCTYPE html>



<title>Range Control Demo</title>


function printValue(sliderID, textbox) {

var x = document.getElementById(textbox);

var y = document.getElementById(sliderID);

x.value = y.value;


window.onload = function() { printValue('slider1', 't1'); printValue('slider2', 't2'); printValue('slider3', 't3'); }


<link href="style.css" rel="stylesheet" type="text/css">



<h3>Demo 1</h3>

<input id="slider1" type="range" min="150" max="650" step="5" onchange="printValue('slider1','t1')"/>

<input id="t1" type="text"><br><br><br>

<h3>Demo 2</h3>

<input id="slider2" type ="range" min ="-200" max="500" step ="20" value ="-200" onchange="printValue('slider2','t2')"/>

<input id="t2" type="text"><br><br><br>

<h3>Demo 3</h3>

<input id="slider3" type ="range" min ="-3.2" max="3.1" step ="0.1" value="2.5" onchange="printValue('slider3','t3')"/>

<input id="t3" type="text"><br><br><br>


HTML Range Control
Range Control
Tutorial at home
Tutorial at home
    Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
    Related Post
  Query About the post