<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Login</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link rel="stylesheet" href="css/styles.css"> </head> <body> <!-- Script 2.2 - login.html --> <form action="login.php" method="post" id="loginForm"> <fieldset> <legend>Login</legend> <div><label for="email">Email Address</label><input type="email" name="email" id="email" required></div> <div><label for="password">Password</label><input type="password" name="password" id="password" required></div> <div><label for="submit"></label><input type="submit" value="Login →" id="submit"></div> </fieldset> </form> <script src="js/login.js"></script> </body> </html>
// Script 2.3 - login.js // Function called when the form is submitted. // Function validates the form data and returns a Boolean value. function validateForm() { 'use strict'; // Get references to the form elements: var email = document.getElementById('email'); var password = document.getElementById('password'); // Validate! if ( (email.value.length > 0) && (password.value.length > 0) ) { return true; } else { alert('Please complete the form!'); return false; } } // End of validateForm() function. // Function called when the window has been loaded. // Function needs to add an event listener to the form. function init() { 'use strict'; // Confirm that document.getElementById() can be used: if (document && document.getElementById) { var loginForm = document.getElementById('loginForm'); loginForm.onsubmit = validateForm; } } // End of init() function. // Assign an event listener to the window's load event: window.onload = init;
/* From: http://www.assemblesoft.com/examples/form/simpleform.html */ * {margin:0; padding:0;} html { font: 90%/1.3 arial,sans-serif; padding:1em; background:#B9C2CC; } form { background:#fff; padding:1em; border:1px solid #eee; } fieldset div { margin:0.3em 0; clear:both; } form { margin:1em; width:15em; } label { float:none; width:12em; display:block; clear:both; } legend { color:#0b77b7; font-size:1.4em; } legend span { width:10em; text-align:right; } input { padding:0.15em; width:10em; border:1px solid #ddd; background:#fafafa; font:bold 1em arial, sans-serif; display:block; float:left; } input:hover, input:focus { border-color:#c5c5c5; background:#f6f6f6; } fieldset { border:1px solid #ddd; padding:0 0.5em 0.5em; } .date input { background-image:url(../gfx/calendar-small.gif); background-repeat:no-repeat; background-position:100% 50%; } .date fieldset label { float:none; display:block; text-align:left; width:auto; } .date fieldset div { float:left; clear:none; margin-right:0.2em; } .radio, .date { position:relative; } .radio fieldset, .date fieldset { border:none; width:auto; padding:1px 0 0 11em; } .radio legend, .date legend { font-size:1em; color:#000; } .radio legend span, .date legend span { position:absolute; left:0; top:0.3em; width:10em; display:block; } .radio label, .radio input { vertical-align:middle; display:inline; float:none; width:auto; background:none; border:none; } .radio div { float:left; white-space:nowrap; clear:none; } .email { width:14em; } input.default { color:#bbb; } #submit { margin:1em; width:69px; height:26px; overflow:hidden; border:0; display:block; cursor:pointer !important; } #submit:hover { background-position:0 -26px; } .error { color: #FF1400; }