<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form action="" onsubmit="submitFunction()">
<label for="">Name</label>
<input type="text" id="fname" value="Gaurav Soni" onfocus="focusFunction(this)" onblur="blurFunction(this)" oninput="inputFunction(this)" onselect="selectFunction()" oninvalid="invalidFunction()" required><br><br>
<label for="">Class</label>
<input type="text" id="" onfocus="focusFunction(this)" onblur="blurFunction(this)"><br><br>
<label for="">Country</label>
<select id="" onfocus="focusFunction(this)" onblur="blurFunction(this)" onchange="changeFunction(this);">
<option value="India">India</option>
<option value="Australia">Australia</option>
<option value="Pakistan">Pakistan</option>
<option value="Nepal">Nepal</option>
</select>
<input type="submit"/>
</form><br><br></b>
<div id="test" style="border:1px solid red"></div>
<script>
function focusFunction(element)
{
element.style.background="skyblue";
}
function blurFunction(element)
{
element.style.background="";
}
function inputFunction(element)
{
var x=element.value;
document.getElementById("test"). innerHTML=x;
}
function changeFunction(element)
{
var x = element.value;
document.getElementById("test").innerHTML= x;
}
function selectFunction()
{
console.log("You selected some text");
}
function submitFunction()
{
var name = document.getElementById("fname").value
alert(name+", you submitted a form");
}
function invalidFunction()
{
alert("please fill the first name");
}
</script>
</body>
</html>
OUTPUT
Comments
Post a Comment