Home > DeveloperSection > Beginner > HTML 5 Form Events

HTML 5 Form Events


HTML5 HTML5 
Ratings:
0 Comment(s)
 9949  View(s)
Rate this:

HTML 5 Form Events

When a user visit website, they do things like click on text and images and given links, hover over things etc. These are examples of what JavaScript calls events.Events triggered by actions inside a HTML form. Events are action performed by user by clicking mouse.

New Form events attribute

oncontextmenuw                     

Fires when the user clicks the right button of the mouse in the client area, opening the context menu and script to be run when a context menu is triggered.

Code:

<head>

    <title></title>

 

    <script language="JavaScript" type="text/javascript">

        function oncontextmenuexample() {

            alert("This image is copyrighted") //Script will run when context menu is triggered

        }

    </script>

</head>

<body >

    <p>

        Right click in the image.</p>

    <img oncontextmenu="oncontextmenuexample();return false;" src="Penguins.jpg" alt="" width="99" height="76">

</body>

If user want to copy this image and if user click right button of the mouse then message will show on page as shown below:

Screenshot

HTML 5 Form Events

onformchange       

This new HTML5 event fires each time an element value in your form changes. It very useful for instances where you need to perform an action when the user makes a selection or enters a value.

<head>

    <title></title>

 

    <script type="text/javascript">

        function input() {//Script to be run when a form changes

            var textvalue = document.getElementById("t1").value; //storing textbox value in variable

            document.getElementById("Text1").value = textvalue//displaying value in another textbox where id is Text1

        }

    </script>

 

</head>

<body>

    <form onformchange="input()">

    <h3>Example of onformchange</h3>

    <table width="300">

        <tr>

            <td>

                Enter Some text:

            </td>

            <td>

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

            </td>

        </tr>

        <tr>

            <td>

                After event occured

            </td>

            <td>

                <input type="text" id="Text1" />

            </td>

        </tr>

    </form>

</body>

If user enter text in the textbox then he select or click on the page then onformchange event will invoke as shown below:

HTML 5 Form Events

onforminputNew

This one is also a new HTML5 event. It fires when any form element's input changes.   

<title></title>

 

    <script type="text/javascript">

        function add() {//Script to be run when a form gets user input

            var a = document.getElementById("a").value;

            var b = document.getElementById("b").value;

            document.getElementById("l1").innerHTML = Number(a) + Number(b);//adding value and displaying in label

        }

    </script>

 

</head>

<body>

    <form onsubmit="return false">

    <input id="a" name="a" type="number" step="any">

    +

    <input id="b" name="b" type="number" step="any">

    =

    <output onforminput="add()"></output>

    <label id="l1"></label>

    </form>

</body>

When user will give input then addtion operation will perform as shown below:

HTML 5 Form Events

oninputNe

Occurs when the text content of an element is changed through the user interface.

w <head>

    <title></title>

    <head>

        <script type="text/javascript">

            function input() {//Script to be run when an element gets user input

                var textvalue = document.getElementById("t1").value;//storing textbox value in variable

                document.getElementById("l1").innerHTML = textvalue//displaying value in label where id is l1

            }

        </script>

 

    </head>

    <body>

        Enter some characters into the text field!

        <input type="text" oninput="input()" id="t1" /><br /> <!--using oninput attribute in input element-->

        <br />

        <label id="l1">

        </label>

    </body>                 

If user will give any input to textbox all text will be show on page below the textbox as shown below:

 

HTML 5 Form Events

 

 


Don't want to miss updates? Please click the below button!

Follow MindStick