lectures/6/src/blink.html blink.html David J. Malan Computer Science S-75 Harvard Summer School 10. <!DOCTYPE html> 12. </script> 16.

Size: px

Start display at page:

Download "lectures/6/src/blink.html blink.html David J. Malan Computer Science S-75 Harvard Summer School 10. <!DOCTYPE html> 12. </script> 16."

Lionel Cox
10 years ago
Views:

1 lectures/6/src/blink.html blink.html <script> function blinker() var blinks = document.getelementsbytagname("blink"); for (var i = 0; i < blinks.length; i++) if (blinks[i].style.visibility == "hidden") blinks[i].style.visibility = "visible"; else blinks[i].style.visibility = "hidden"; window.setinterval(blinker, 500); </script> <center> <blink><h1>hello, world</h1></blink> </center>

getelementsbytagname("blink"); for (var i = 0; i < blinks.length; i++) if (blinks[i].style.

2 lectures/6/src/formhtml formhtml A form without client-side validation. <form action="process.php" method="get"> <input name=" " type="text"> Password: <input name="password1" type="password"> Password (again): <input name="password2" type="password"> I agree to the terms and conditions: <input name="agreement" type="checkbox"> <input type="submit" value="submit"> </form>

php" method="get"> Email: <input name="email" type="text"> Password: <input name="password1"

3 lectures/6/src/formhtml formhtml A form with client-side validation. <script> function validate() if (document.forms.registration. .value == "") alert("you must provide an adddress."); else if (document.forms.registration.passwordvalue == "") alert("you must provide a password."); else if (document.forms.registration.passwordvalue!= document.forms.registration.passwordvalue) alert("you must provide the same password twice."); else if (!document.forms.registration.agreement.checked) alert("you must agree to our terms and conditions."); return true; </script> <form action="process.php" id="registration" method="get" onsubmit="return validate();">

"); else if (document.forms.registration.passwordvalue!= document.forms.registration.passwordvalue) alert("you must provide the same password twice."); else if (!document.forms.registration.agreement.

4 lectures/6/src/formhtml <input name=" " type="text"> Password: <input name="password1" type="password"> Password (again): <input name="password2" type="password"> I agree to the terms and conditions: <input name="agreement" type="checkbox"> <input type="submit" value="submit"> </form>

5 lectures/6/src/formhtml formhtml A form with client-side validation demonstrating "with" keyword. <script> function validate() with (document.forms.registration) if ( .value == "") alert("you must provide an adddress."); else if (passwordvalue == "") alert("you must provide a password."); else if (passwordvalue!= passwordvalue) alert("you must provide the same password twice."); else if (!agreement.checked) alert("you must agree to our terms and conditions."); return true; </script>

forms.registration) if (email.value == "") alert("you must provide an email adddress.

6 lectures/6/src/formhtml <form action="process.php" method="get" name="registration" onsubmit="return validate();"> <input name=" " type="text"> Password: <input name="password1" type="password"> Password (again): <input name="password2" type="password"> I agree to the terms and conditions: <input name="agreement" type="checkbox"> <input type="submit" value="submit"> </form>

type="text"> Password: <input name="password1" type="password"> Password (again): <input name="password2"

7 lectures/6/src/formhtml formhtml A form with client-side validation demonstrating "this" keyword. <script> function validate(f) if (f. .value == "") alert("you must provide an adddress."); else if (f.passwordvalue == "") alert("you must provide a password."); else if (f.passwordvalue!= f.passwordvalue) alert("you must provide the same password twice."); else if (!f.agreement.checked) alert("you must agree to our terms and conditions."); return true; </script> <form action="process.php" method="get" name="registration" onsubmit="return validate(this);">

passwordvalue == "") alert("you must provide a password."); else if (f.passwordvalue!= f.passwordvalue) alert("you must provide the same password twice.

8 lectures/6/src/formhtml <input name=" " type="text"> Password: <input name="password1" type="password"> Password (again): <input name="password2" type="password"> I agree to the terms and conditions: <input name="agreement" type="checkbox"> <input type="submit" value="submit"> </form>

9 lectures/6/src/formhtml formhtml A form with client-side validation demonstrating disabled property. <script> function toggle() if (document.forms.registration.button.disabled) document.forms.registration.button.disabled = false; else document.forms.registration.button.disabled = true; function validate() if (document.forms.registration. .value == "") alert("you must provide an adddress."); else if (document.forms.registration.passwordvalue == "") alert("you must provide a password."); else if (document.forms.registration.passwordvalue!= document.forms.registration.passwordvalue) alert("you must provide the same password twice."); else if (!document.forms.registration.agreement.checked) alert("you must agree to our terms and conditions.");

value == "") alert("you must provide an email adddress."); else if (document.forms.registration.passwordvalue == "") alert("you must provide a password."); else if (document.forms.registration.passwordvalue!= document.

10 lectures/6/src/formhtml return true; </script> <form action="process.php" method="get" name="registration" onsubmit="return validate();"> <input name=" " type="text"> Password: <input name="password1" type="password"> Password (again): <input name="password2" type="password"> I agree to the terms and conditions: <input name="agreement" onclick="toggle();" type="checkbox"> <input disabled="disabled" name="button" onclick="alert('testing 1 2 3');" type="submit" value="submit"> </form>

name="password1" type="password"> Password (again): <input name="password2" type="password"> I agree to the terms and conditions:

11 lectures/6/src/formhtml formhtml A form with client-side validation demonstrating inline JavaScript. <script> function validate() if (document.forms.registration. .value == "") alert("you must provide an adddress."); else if (document.forms.registration.passwordvalue == "") alert("you must provide a password."); else if (document.forms.registration.passwordvalue!= document.forms.registration.passwordvalue) alert("you must provide the same password twice."); else if (!document.forms.registration.agreement.checked) alert("you must agree to our terms and conditions."); return true; </script> <form action="process.php" method="get" name="registration" onsubmit="return validate();">

12 lectures/6/src/formhtml <input name=" " type="text"> Password: <input name="password1" type="password"> Password (again): <input name="password2" type="password"> I agree to the terms and conditions: <input name="agreement" onclick="document.forms.registration.button.disabled =!document.forms.registration.button.disabled;" type="checkbox"> <input disabled="disabled" name="button" type="submit" value="submit"> </form>

<input name="password2" type="password"> I agree to the terms and conditions: <input name="agreement"

13 lectures/6/src/formhtml formhtml A form with client-side validation demonstrating regular expressions. <script> function validate() if (!document.forms.registration. .value.match(/.+@.+\.edu$/)) alert("you must provide a.edu adddress."); else if (document.forms.registration.passwordvalue == "") alert("you must provide a password."); else if (document.forms.registration.passwordvalue!= document.forms.registration.passwordvalue) alert("you must provide the same password twice."); else if (!document.forms.registration.agreement.checked) alert("you must agree to our terms and conditions."); return true; </script> <form action="process.php" method="get" name="registration" onsubmit="return validate();">

14 lectures/6/src/formhtml <input name=" " type="text"> Password: <input name="password1" type="password"> Password (again): <input name="password2" type="password"> I agree to the terms and conditions: <input name="agreement" type="checkbox"> <input type="submit" value="submit"> </form>

15 lectures/6/src/process.php quick and dirty dump of HTTP request <pre> <? print_r($_request);?> </pre>

CREATING WEB FORMS WEB and FORMS FRAMES AND

CREATING CREATING WEB FORMS WEB and FORMS FRAMES AND FRAMES USING Using HTML HTML Creating Web Forms and Frames 1. What is a Web Form 2. What is a CGI Script File 3. Initiating the HTML File 4. Composing