Download Lec8Handout - Rutgers University

Info + Web Tech Course
Information
Technologies
Anselm Spoerri PhD (MIT)
SC&I @ Rutgers University
[email protected]
[email protected]
Info + Web Tech Course
© Anselm Spoerri
Lecture 8 - Overview
Forms in HTML
JavaScript
– Form Validation
Exercise 4
– Demos
Lectures – Week 8 Content
http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures.html#week8
Info + Web Tech Course
© Anselm Spoerri
JavaScript – Some Uses
Display information based on Time of Day
JavaScript can check the computer's clock and pull the appropriate data
based on the clock information.
Detect Visitor's Browser
last lecture
JavaScript can be used to detect the visitor's browser, and load another page
specifically designed for that browser.
Validate Forms Data
this lecture
JavaScript can be used to validate form data at the client-side saving both
the precious server resources and time.
Add Interactivity to Website
last lecture
JavaScript can be set to execute when something happens, like when a user
moves mouse over an image.
Create Cookies
JavaScript can store information on the visitor's computer and
retrieve it automatically next time the user visits your page.
Change Page Contents Dynamically
JavaScript can change the display of content without the involvement of
server programs. It can read and change the content of an HTML elements
or move them around pages.
Info + Web Tech Course
© Anselm Spoerri
HTML Forms
HTML Forms
‒ Solicit feedback or information from visitors
‒ Collection of data entry fields, labels, buttons
‒ Processing script on server (PHP)
‒ Never assume anything about data
http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures/Lec8/Steps/formDemo.html
Info + Web Tech Course
© Anselm Spoerri
HTML Form – Form Tag
1. <form> form elements </form>
2. Inside <form> tag
– method attribute specifies
way in which data is to be sent
– method="get" (limited data amount)
method="post"
– action attribute specifies
URL to which user data is to be sent
<form method="post" action="formdata.php">
3. label and form element
<form method="post" action="mailto:youremailaddress">
<label>First Name: </label>
<input type="text" name="firstname" />
</form>
Info + Web Tech Course
© Anselm Spoerri
HTML Form – Form Elements and Organization
Form Elements
Text Field
<input type="text" name="firstname" />
Text Area
<textarea rows="10" cols="30" name="texta">text</textarea>
Password
<input type="password" name= "password" />
Radio Button
Checkbox
Menu
<input type="radio" name= "y_n" value="yes" />Yes<br />
<input type="checkbox" name="vehicle" value="Bike" />
<select name="cars"><option value="kia">Kia</option></select>
Submit Button
Reset Button
<input type="submit" value="Submit" />
<input type=“reset" value="Submit" />
name needed to reference input element
Organize Form Elements
<fieldset id="idname"><legend align=“left”>Legend
Text</legend>Form Elements</fieldset>
Info + Web Tech Course
© Anselm Spoerri
HTML5 Form – New Elements & Attributes
HTML5 New Form Elements
Email Input
<input type="email" name="email" />
Telephone Input <input type="tel" name="phone" />
URL Input
<input type="url" name="website" />
Search Input
<input type="search" name="search" />
Attributes
required user needs to complete field for form to be able to submit
not supported in Internet Explorer 9- or in Safari
novalidate turns off HTML5 automatic validation via form element
pattern defines text pattern needed for form to be able to submit
placeholder provides hint of pattern needed for form to submit
label element
for same value as form field’s id  explicitly associated
Info + Web Tech Course
© Anselm Spoerri
Form Example
http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures/Lec8/Steps/formDemo.html
<form method="post" action="mailto:youremailaddress">
<fieldset id="personal">
<legend align="left">Personal Data</legend>
<label>First Name: </label><input type="text" name="firstname" />
<br />
<label>Last Name: </label><input type="text" name="lastname" />
</fieldset>
<p>
<input type="submit" value="Submit" name="submit"/>
<input type="reset" value="Reset" name="reset"/>
</p>
</form>
Online Practice
http://www.w3schools.com/html/html_forms.asp
Info + Web Tech Course
© Anselm Spoerri
Examine Form & CSS in Detail
Form Example
Featured in Ch17 of Castro Book version6 (link Week 8 Readings)
http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures/Lec8/Steps/fullform_castro.html
1. Examine HTML Structure
<form> | <fieldset> | <input> | <select>
Use of ids and classes
2. Examine External CSS file
CSS rules created for ids, classes and tags
Use of
em
–
unit of measurement with respect to point size of current font.
–
1 em of a 16 point typeface is 16 points
You will email form data to your email address.
In future lecture, you will learn how to send data to PHP file.
Info + Web Tech Course
© Anselm Spoerri
JavaScript – Validate Forms Data
Validate Forms Data
‒ Client-side JavaScript used to validate form
‒ Saves server resources and time
‒ Can Not Trust any data submitted to server
Hackers can quite easily simulate your web forms and submit any data
of their choosing.
JavaScript Code for Form Validation
http://www.w3schools.com/js/js_form_validation.asp
See Lectures: Week 8 for more resources.
Info + Web Tech Course
© Anselm Spoerri
JavaScript – Validate Forms Data: Create Functions
// If field is empty, return text. If field is not empty, return empty string //
function validateFirstname (fieldvalue) {
if (fieldvalue == "") return "No First Name was entered.\n"
return ""
}
Where do we store JavaScript code?
– Inside of <script> tag inside of <head>
Why?
How to create function for Lastname?
Info + Web Tech Course
© Anselm Spoerri
JavaScript – Validate Forms Data: Create Functions
/* Need to validate contents of fields to make user have entered the right data.
Make use of Document Object Model and use JavaScript to access it */
function validate(form) {
fail = validateFirstname (form.firstname.value)
fail += validateLastname (form.lastname.value)
if (fail == "") return true
else { alert(fail); return false }
}
On Submit needs to trigger validate function
<form method="post" action="mailto:youremailaddress"
onsubmit="return validate(this)">
where this = current form
http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures/Lec8/Steps/formDemo_validate.html
Info + Web Tech Course
© Anselm Spoerri
Function to Test if Field is Empty
/* If field value is empty, return text. If field is not empty, return empty string //
use errorString as function parameterso that we can use same function for any field */
function fieldEmpty(fieldvalue, errorString) {
if (fieldvalue == "") {
return (errorString);
} else {
return "";
// return empty string
}
}
Info + Web Tech Course
© Anselm Spoerri
Function to Test if Radio Button is Selected
function
radioButtonSelected
(radioButtons, errorString) {
radioSelected = -1;
for (i=radioButtons.length-1; i > -1; i--) {
if (radioButtons[i].checked) {
radioSelected = i;
i = -1;
// set index to -1 so that for loop stops
}
}
if (radioSelected == -1) {
return (errorString);
} else {
return "";
}
}
Info + Web Tech Course
© Anselm Spoerri
Function to Count the Number of Checkboxes Selected
function
checkboxesSelected (checkboxes, errorString) {
var checkboxesSelected = 0;
for (i=0; i<checkboxes.length; i++)
{
// test if current checkbox is checked ... if yes, add 1 to counter
if (checkboxes[i].checked) {
checkboxesSelected += 1;
}
}
if (checkboxesSelected == 0) {
return (errorString);
} else {
return "";
}
}
Info + Web Tech Course
Have to Use
var checkboxesSelected = 0;
because:
1) function is also called
"checkboxesSelected" and without
explicit var declaration, a name conflict
is created.
2) Good practice to have var when
declaring a variable ...not doing it in our
JavaScript examples to not add more
complexity.
© Anselm Spoerri
Function to Test if Number is Within Certain Range
function validateAge(fieldvalue) {
if (isNaN(fieldvalue)) return "No Age was entered.\n"
else if (fieldvalue < 18 || fieldvalue > 110)
return "Age must be between 18 and 110.\n"
return ""
}
Info + Web Tech Course
© Anselm Spoerri
Function to Test Email Address
function validateEmail (fieldvalue) {
if (fieldvalue == "") return "No Email was entered.\n"
else if (!((fieldvalue.indexOf(".") > 0)
&&
// Boolean AND
(fieldvalue.indexOf("@") > 0))
||
// Boolean OR
/[^a-zA-Z0-9.@_-]/.test(fieldvalue)
)
return "The Email address is invalid.\n"
return ""
}
Info + Web Tech Course
© Anselm Spoerri
Demo – Create JavaScript Functions to Validate
1. Create fieldEmpty function
2. Create validate function and
–
Make sure that “Submit” input triggers validate function
–
Make sure field name used in function parameter
matches field name in HTML code
3. Create validEmail function
4. Update validate function
5. Create radioButtonSelected function
6. Update validate function
7. Create checkboxesSelected function
8. Update validate Function
9. Examine other validation functions
http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures/Lec8/Steps/fullform_castro_validate.html
Info + Web Tech Course
© Anselm Spoerri