Create a webpage to implement Form Events (Part-I)

Laboratory Objective:

  1. To understand basic concepts of Forms in JavaScript.
  2. To learn Events and Event Handling in JavaScript.
  3. Write JavaScript to design a form to accept input values for the given problem.
  4. Use JavaScript to implement form events to solve the given problem.
  5. Develop JavaScript to dynamically assign specified attribute value to the given form control.

HTML Form Events

  • When JavaScript is used in HTML pages, JavaScript can “react” on these events.
  • An HTML event can be something the browser does, or something a user does.
  • The simple example of an event is a user clicking the mouse or pressing a key on the keyboard.
  • Some examples of HTML events:
  • An HTML web page has finished loading
  • An HTML input field was changed
  • An HTML button was clicked
  • When events happen, we may want to do something. JavaScript lets execute code when events are detected.

Example of HTML Form Event

<html>

<head>

   <script type="text/javascript">

      function sayHello() {

         alert("Hello World!")

      }

</script>

</head>

<body>

   <p>Click the button to see result</p>

   <form>

      <input type="button" onclick="sayHello()" value="Say Hello" />

   </form>

</body>

</html>

Common HTML Events

  • onchange : An HTML element has been changed
  • onclick : The user clicks an HTML element
  • onmouseover : The user moves the mouse over an HTML element
  • onmouseout : The user moves the mouse away from an HTML element
  • onkeydown : The user pushes a keyboard key
  • onload : The browser has finished loading the page

Sample Program

1) Write program to add click, mouseover and mouseout events to a webpage using JavaScript.

<html>

<body>

   <button id="btn">Click here</button>

   <p id="para" onmouseover="mouseOver()" onmouseout="mouseOut()">Hover over this Text !</p>

   <b id="output"></b>

   <script>

      var x = document.getElementById("btn");

x.addEventListener("click", btnClick);

function mouseOver() {

         document.getElementById("output").innerHTML += "MouseOver Event" + "<br>";

      }

function mouseOut() {

         document.getElementById("output").innerHTML += "MouseOut Event" + "<br>";

      }

function btnClick() {

         document.getElementById("output").innerHTML += "Click Event" + "<br>";

      }

   </script>

</body>

</html>

2) Write HTML Script that displays three radio buttons red, green, blue. Write proper JavaScript such that when the user clicks on radio button the background color of webpage will get change accordingly.

<html>

<head>

  <script>

     function changeColor(color)

     {

        var panel = document.getElementById('panel')

        document.body.style.backgroundColor = color

        panel.innerHTML = "Background color is set to: " + color.toUpperCase()

     }

  </script>

</head>

<body onload="changeColor('red')">

  <p>Select option to change background color of page</p>

  <form name="myform">

     <input type="radio" name="color" value="red" onchange="changeColor(this.value)" checked="false">RED<br />

     <input type="radio" name="color" value="green" onchange="changeColor(this.value)">GREEN<br />

     <input type="radio" name="color" value="blue" onchange="changeColor(this.value)">BLUE<br />

  </form>

  <p id="panel"></p>

</body>

</html>