Scribd Logo
Upload

Welcome to Scribd!

  • Week 8

    Uploaded by

    api-218675166
    53 views16 pages
    Tables, Forms, and validation tables Originally intended for display of tabular data have been extensively used for layout. Use of CSS is preferred for layout and tables. Focus() method Calling this for any form input will set the focus to it, allowing a user to type instead of clicking on the field with the mouse.

    Original Description:

    Original Title

    week8

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Tables, Forms, and validation tables Originally intended for display of tabular data have been extensively used for layout. Use of CSS is preferred for layout and tables. Focus() method Calling this for any form input will set the focus to it, allowing a user to type instead of clicking on the field with the mouse.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as ppt, pdf, or txt
    53 views16 pages

    Week 8

    Uploaded by

    api-218675166
    Tables, Forms, and validation tables Originally intended for display of tabular data have been extensively used for layout. Use of CSS is preferred for layout and tables. Focus() method Calling this for any form input will set the focus to it, allowing a user to type instead of clicking on the field with the mouse.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as ppt, pdf, or txt
    of 16

    Tables, Forms, and Validation

    Tables

    Originally intended for display of tabular data Have been extensively used for layout. Use of CSS is preferred for layout and tables for display of tabular data

    Tables = excessive code (low content:code ratio) Bad for the hearing impaired: Screen readers explain every table Try to use CSS-P and <span id=></span>

    Table tricks

    Utilize CSS classes For alternating row colors, utilize a different class on each row (.tdyellow vs. .tdwhite)

    Form Attributes

    action attribute

    can be a relative or absolute link When submitting forms, if you leave out the action attribute, it will submit to itself. get results in a querystring ?a=1&b=2&c=3 post results in form-data sent in HTTP headers application/x-www-form.urlencoded default Multipart/form-data used when uploading files post only!

    method attribute

    enctype

    Alternative submit buttons


    Standard:

    <input type=submit value=Submit /> <input type=image alt=Submit src=submit.gif/>

    Image

    Link

    <a href="#" onclick="document.forms[0].submit();">Submit</a >

    The reset button

    Some argue against its value


    Users might accidentally click rest when they want to actually submit You can reset a form by re-loading the page If a user wants to reset and leave, they can just leave without resetting

    Radio Buttons and Checkboxes

    All radio buttons of the same group must have the same name and different values. This allows them to be mutually-exclusive There can be multiple checkboxes of the same name. They will act like a multi-select list. Therefore, checkboxes are usually better than multi-select boxes (except for large lists)

    The label element


    <label for=firstName>Name</label> <input type=text name=firstName id=firstName/> Used by screen readers for visually impaired Allows user to click on the label for a radio button or checkbox.

    focus() method

    Calling this for any form input will set the focus to it, allowing a user to type instead of clicking on the form field with the mouse Should be used on most (if not all) forms to save the user a click Can also be used after a validation error

    Validation

    Field formats

    Phone numbers Zip codes Email addresses Social Security Numbers Credit card numbers Names, usernames whatever

    Client-side vs. Server-side validation


    There is a need for both Client-side

    User-friendly errors

    Highlight fields Error messages close to the field or in popups

    Quick user response Security (client-side can be bypassed)

    Server-side

    JavaScript onsubmit Function


    onsubmit attribute of a form onsubmit=return yourFunction() Have your function


    return true if you want to submit false if you dont want it to submit

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Your Name Here</title> <script type="text/javascript"> function verifyFields() { if (document.getElementById("firstName").value == "") { alert("Please provide a first name"); document.getElementById("firstName").focus; return false; } } </script> </head> <body> <form onsubmit="return verifyFields()" method="get"> First Name: <input type="text" name="firstName" id="firstName" /> <input type="submit" value="submit"/> </form> </body> </html>

    Regular Expressions

    A formula for checking if strings match a given pattern Since all form fields are strings, this is a standard used in form validation JavaScript supports regular expressions with the / operator

    Regular Expression web sites


    http://sitescooper.org/tao_regexps.html#Wha tAreRegularExpressions http://www.regularexpressions.info/javascript.html http://www.visibone.com/regularexpressions/

    function verifyRegExp() { var pattern = /^[a-zA-Z''-'\s]{1,40}$/;


    if (!document.getElementById("firstName").value.match(pattern)) {

    alert("No match!");
    document.getElementById("firstName").focus();

    return false;
    } }

    You might also like