articles

Home / DeveloperSection / Articles / What is the new feature in HTML 5 Form Events

What is the new feature in HTML 5 Form Events

What is the new feature in HTML 5 Form Events

Anonymous User 19066 22-Jul-2011

What are the new features in the HTML5 form event

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

New Form events attribute

OnContextMenu                     

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 a user wants to copy this image and if user click right button of the mouse then a message will show on the page as shown below:

Screenshot

What is the new feature in HTML 5 Form Events

on-form-change       

It is a 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 the user enters text in the textbox then he selects or clicks on the page then on_form_change event will invoke as shown below:

What is the new feature in 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:

What is the new feature in HTML 5 Form Events

OnInput

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

<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 a user will give any input to textbox all text will be shown on the page below the textbox

as shown below: 

What is the new feature in HTML 5 Form Events


Updated 08-Jul-2020
I am a content writter !

Leave Comment

Comments

Liked By