×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
Forms : Text Box Date Time Number Color
Forms : Search Box & Range - HTML 5
4104    Arnab De    07/05/2017

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" />

Output:

search-box
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.
softetechnologies

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.

Attribute

Descriptions

min

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

max

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

step

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.

softetechnologies

Now we are try to understand by Demos.

<!DOCTYPE html>

<html>

<head>

<title>Range Control Demo</title>

<script>

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'); }

</script>

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

</head>

<body>

<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>

</body></html>

HTML Range Control
Range Control
softetechnologies
Forms : Text Box Date Time Number Color
softetechnologies
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.
Enter New Comment
Comment History
No Comment Found Yet.
Swami Vivekananda
What makes one man great and another weak and low is shraddha (concentration).
Swami Vivekananda
3020
34.08
Today So Far
Total View (Lakh)
softetechnologies
01/01/2018     33580
28/06/2017     29498
02/08/2017     26981
26/05/2018     26935
15/05/2017     23200
06/07/2017     21670
01/08/2017     21288
25/06/2018     20034
21/04/2018     18609
14/07/2017     16432
softetechnologies