Tutorialspoint

Programming Examples

HTML DOM Input Reset form property

<!DOCTYPE html>
<html>
<body>
<h1>Input reset form Property</h1>
<form id="FORM_1" style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Age"> <br><br>
<input type="reset" id="RESET1">
</form>
<p>Get the form id by clicking on the below button</p>
<button type="button" onclick="formId()">GET FORM</button>
<p id="Sample"></p>
<script>
function formId() {
var P=document.getElementById("RESET1").form.id;
document.getElementById("Sample").innerHTML = "The id of the form containing the reset button is: "+P ;
}
</script>
</body>
</html>

HTML DOM Input Reset disabled property

<!DOCTYPE html>
<html>
<body>
<h1>Input reset disabled Property</h1>
<form style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Age"> <br><br>
<input type="reset" id="RESET1">
</form>
<p>Disable the above reset button by clicking on the DISABLE button</p>
<button type="button" onclick="disableReset()">DISABLE</button>
<p id="Sample"></p>
<script>
function disableReset() {
document.getElementById("RESET1").disabled=true;
document.getElementById("Sample").innerHTML = "The reset button is now disabled" ;
}
</script>
</body>
</html>

HTML DOM Input Reset autofocus property

<!DOCTYPE html>
<html>
<body>
<h1> Reset Autofocus property</h1>
<form style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Age"> <br><br>
<input type="reset" id="RESET1" autofocus>
</form>
<p>Get the reset button autofocus property value by clicking the below button</p>
<button type="button()" onclick="FocusVal()">CHECK</button>
<p id="Sample"></p>
<script>
function FocusVal(){
var f = document.getElementById("RESET1").autofocus;
document.getElementById("Sample").innerHTML = "The reset button autofocus property is set to: "+f;
}
</script>
</body>
</html>

HTML DOM Input Range value property

<!DOCTYPE html>
<html>
<body>
<h1>Input range Value property</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
<p>Get the above element value by clicking the below button</p>
<button onclick="getValue()">Get Value</button>
<p id="Sample"></p>
<script>
function getValue() {
var t = document.getElementById("RANGE1").value;
document.getElementById("Sample").innerHTML = "The value for the radio button is : "+t;
}
</script>
</body>
</html>

HTML DOM Input Range type property

<!DOCTYPE html>
<html>
<body>
<h1>Input range type Property</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
<p>Get the above input element type by clicking the below button</p>
<button type="button" onclick="rangeType()">GET Type</button>
<p id="Sample"></p>
<script>
function rangeType() {
var P=document.getElementById("RANGE1").type;
document.getElementById("Sample").innerHTML = "The type for the input field is: "+P ;
}
</script>
</body>
</html>

HTML DOM Input Range stepUp method

<!DOCTYPE html>
<html>
<body>
<h1>Input range stepUp() method</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
<p>Increment the slider control value by clicking the below button</p>
<button type="button" onclick="stepIncrement()">INCREMENT</button>
<p id="Sample"></p>
<script>
function stepIncrement() {
document.getElementById("RANGE1").stepUp(10);
}
</script>
</body>
</html>

HTML DOM Input Range stepDown method

<!DOCTYPE html>
<html>
<body>
<h1>Input range stepDown() method</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
<p>Decrement the slider control value by clicking the below button</p>
<button type="button" onclick="stepDecrement()">DECREMENT</button>
<p id="Sample"></p>
<script>
function stepDecrement() {
document.getElementById("RANGE1").stepDown(10);
}
</script>
</body>
</html>

HTML DOM Input Range step property

<!DOCTYPE html>
<html>
<body>
<h1>Input range step Property</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
<p>Change the step property value of the above range control by clicking the below button</p>
<button type="button" onclick="changeStep()">CHANGE</button>
<p id="Sample"></p>
<script>
function changeStep() {
document.getElementById("RANGE1").step ="30" ;
document.getElementById("Sample").innerHTML = "The step attribute value is now 30";
}
</script>
</body>
</html>

HTML DOM Input Range object

<!DOCTYPE html>
<html>
<head>
<script>
function rangeCreate() {
var R = document.createElement("INPUT");
R.setAttribute("type", "range");
document.body.appendChild(R);
}
</script>
</head>
<body>
<h1>Input range object</h1>
<p>Create an input field with type range by clicking the below button</p>
<button onclick="rangeCreate()">CREATE</button>
<br><br>
VOLUME:
</body>
</html>

HTML DOM Input Range name property

<!DOCTYPE html>
<html>
<body>
<h1>Input range name Property</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
<p>Change the name of the above range control by clicking the below button</p>
<button type="button" onclick="changeName()">CHANGE NAME</button>
<p id="Sample"></p>
<script>
function changeName() {
document.getElementById("RANGE1").name ="VOLUME" ;
document.getElementById("Sample").innerHTML = "Range control name is now VOLUME";
}
</script>
</body>
</html>

1 2 3 4 5 6 7 ... 8478 Next
Advertisements
Loading...

We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy.