VirtualMV/JavaScript/Forms/Home

From WikiEducator
Jump to: navigation, search




Overview

VmvIcon Objectives.png

By the end of this page you will be able to:

  • Identify the importance of Forms in a web site
  • Understand the basic relationship between forms and JavaScript

As was seen in Example 1: (js1_11), a form allows us to create buttons on a web page that can request an action from a web user.

<html>
<head>
<script type="text/javascript">
  function fnHello() {
    alert("HELLO");
  }
</script>
</head>
<body>
  <form>
    <input type="button" onclick="fnHello()" value="Call function" />
  </form>
  <p>By pressing the button, a function will be called. The function will alert a message.</p>
</body>
</html>
JavaScript: Button

Example :Click here to run js1_11.


However, this can be taken much further. The form element also allows us to request user input, and linking this with JavaScript allows us to validate what the user has entered. For example if we want the user to enter a valid email address we can check for the @ sign and dot.

To invoke JavaScript activity from a form we usually use a button to call a function

<input type = 'button' value = 'Press Me' onClick = 'fnFunction()'/>

However, we can add JavaScript interaction to any form element using one of the following:

onfocus=Script (element received focus)
onblur=Script (element lost focus)
onselect=Script (element text selected)
onchange=Script (element value changed)

VmvIcon References.png References

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/JavaScript/Forms/Home. (2017). In WikiEducator/VirtualMV wiki. Retrieved November 24, 2017, from http://wikieducator.org/VirtualMV/JavaScript/Forms/Home    (zotero)