Wednesday, 23 March 2011

Chapter 9 + 13 - Javascript and forms

This website uses javascript and forms to allow you to check what has been entered within a form and to check if valid.

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head><title>Chapter 14</title>
  <link href="css1.css" rel="stylesheet" type="text/css" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
  <script type="text/javascript">
  <!-- <![CDATA[
   function validateForm()
   {
    if (document.forms[0].userAge.value < 18)
    {
     alert ("Age is less than 18, you are not an adult.");
     return false;
    }
   
    alert("Age is valid.");
    return true;
   }
  
  // ]]> -->
  </script>
 
 </head>

 <body>
  <h1>JavaScript Form Handling</h1>
  <form method="post" action="http://webdevfoundations.net/scripts/formdemo.asp" onsubmit="return validateForm();">
   <div>
    <label for="userName">Name:</label>
    <input type="text" name="userName" id="userName" />
   <div>
  
   <div>
    <label for="userAge">Age:</label>
    <input type="text" name="userAge" id ="userAge" />
   </div>
  
   <div>
    <input type="submit" value="Send information" />
   </div>
  </form>
 </body>
</html>

CSS:
body
 {
 background-color: #FFFFFF;
 color: #000000;
 font-size: 12px;
 font-family: Arial, Verdana, sans-serif;
 margin: 0px;
 }

div
 {
  padding-bottom: 10px;
  width: 250px;
  text-align: right;
 }
label
 {
  padding-right: 5px;
 }

No comments:

Post a Comment