HTML Forms

CSE 190 M (Web Programming), Spring 2007

University of Washington

Reading: Sebesta Ch. 2 section 2.9
References: JavascriptKit, w3schools

Except where otherwise noted, the contents of this presentation are © Copyright 2007 Marty Stepp and are licensed under the Creative Commons Attribution 2.5 License.

Valid XHTML 1.0 Strict Valid CSS!

HTML forms

HTML form

HTML form: <form>

<form action="web app URL" method="get or post">
  <fieldset>
    form controls
  </fieldset>
</form>

Form example

<form action="http://www.foo.com/app.php" method="get">
 <fieldset>
  <label>Name: <input type="text" name="name" /></label>
  <label>Meal: <input type="text" name="meal" /></label>
  <label>Meat?
    <input type="checkbox" name="meat" />
  </label>
  <input type="submit" />
 <fieldset>
</form>



Recall: the HTML UI controls

<textarea name="message" rows="4" cols="20">
Type your comments here.
</textarea>

<select name="seinfeld">
 <optgroup label="Major Characters">
  <option value="Jerry">Jerry</option>
  <option value="George">George</option>
  <option value="Kramer">Kramer</option>
  <option value="Elaine">Elaine</option>
 </optgroup>
 <optgroup label="Minor Characters">
  <option value="Newman">Newman</option>
  <option value="Susan">Susan</option>
 </optgroup>
</select>

<input type="text" name="email" /><br />
<input type="password" name="pw" size="12" />


<label><input type="radio" name="cc" />Visa</label>
<label><input type="radio" name="cc" />MasterCard</label>

<label>
<input type="checkbox" name="lettuce" />
 Lettuce</label>
<label>
<input type="checkbox" name="tomato" />
 Tomato</label>

Importance of name attribute

<form action="http://foo.com/app.php" method="get">
 <fieldset>
  <label>Name: <input type="text" name="name" /></label>
  <label>Meal: <input type="text" name="meal" /></label>
  <label>Meat?
    <input type="checkbox" name="meat" />
  </label>
  <input type="submit" />
 <fieldset>
</form>

get vs. post

<form action="http://www.foo.com/app.php" method="post">
  ...
</form>

submit and reset buttons

<form action="http://www.foo.com/app.php" method="get">
 <fieldset>
  ...
  <input type="submit" />
  <input type="reset" />
 <fieldset>
</form>

submit, reset example




Styling forms with CSS attribute selectors

element[attribute="value"] {
    ...
}

input[type="text"] {
    color: blue;
    font-style: italic;
    margin-bottom: 2em;
}

Practice problem: Online banking

Create a web page with a form that lets the user sign up for an online banking account such as those offered at Washington Mutual or Orange Savings.

Form validation

Form validation example

wamu

Cancelling form submission

    // in window.onload handler:
    var submit = document.getElementById("submitbutton");
    submit.onclick = submitClick;
    ...

function submitClick(event) {
    if (document.getElementById("name").value == "") {
        event.preventDefault();  // cancel submit
    }
}

----- Regular expressions -----

Form validation
with regular expressions

Reading: Sebesta Ch.4 section 4.12

What is a regular expression?

/^[\w\.%\-]+@[\w.\-]+\.[a-zA-Z]{2,4}$/

Regular expression examples

/abc/

Special characters in regular expressions

Quantifiers

More quantifiers

Character sets

Character ranges

Escape sequences

More about escape sequences

Regular expressions in Javascript

Replacing text with regular expressions

  • string.replace(regexp, "text")
    • replaces the first occurrence of given pattern with the given text
    • var str = "Marty Stepp";
      str.replace(/[a-z]/, "x") returns "Mxrty Stepp"
    • returns the modified string as its result; must be stored
      str = str.replace(/[a-z]/, "x")
  • a g can be placed after the regexp for a global match (replace all occurrences)
    • str.replace(/[a-z]/g, "x") returns "Mxxxx Sxxxx"
  • using a regexp as a filter
    • str = str.replace(/[^A-Z]+/g, "") turns str into "MS"

Debugging/testing regular expressions

  • open Firefox Error Console (Tools, Error Console) and type in short regex code to see whether it works
    Error Console
  • TextPad's Find and Replace dialogs allow regular expressions
    TextPad

Practice problem: Form validation

Use regular expressions to validate the online banking form you wrote previously.

  • Start out by showing an alert if the data is bad, and not submitting the form.
  • Enhance the code by removing the alert and instead highlighting invalid data in pink.