©SoftMooreSlide 1 Introduction to HTML: Forms ©SoftMooreSlide 2 Forms Forms provide a simple mechanism for collecting user data and submitting it to

©SoftMoore Slide 1

Introduction to HTML: Forms

©SoftMoore Slide 2

Forms

• Forms provide a simple mechanism for collecting user data and submitting it to a web server. – used by almost every web application

• The form element is used to create a data input form.– enclosed within the <form> and </form> tags– two primary attributes

• action• method

• A document can have several forms, but the forms should not overlap.

• To create a “visually pleasing” layout, forms are often used in conjunction with tables.

©SoftMoore Slide 3

Flow of Information for Forms

Web Server

FormProcessin

gProgram

Browser

UserHTML

Document

FormData

Output

Input

HTML Document

FormData

©SoftMoore Slide 4

The Action Attribute

• The action attribute indicates URL to process the form data when it is submitted.

• The URL is usually a Java Servlet, a JSP page, or a CGI program.

• If not specified, the URL of the document containing the form is used.

©SoftMoore Slide 5

The Method Attribute

• The method attribute specifies the way in which the submitted data is encoded and transmitted.

Two primary alternatives:

• Get: The form data is attached as a “query string” following the URL– Format: URL + “?” + form data– Example:

http://localhost:8080/hello/HelloUser?userName=John+Moore

• Post: The data is encoded and transmitted as part of the HTTP body (via its standard input stream).

©SoftMoore Slide 6

Example

...<body> ... <form method="get" action="HelloUser"> <table cellpadding="5" align="center"> <tr> <td align="right">Enter your name: </td> <td><input type="text" size="20" name="userName"/></td> </tr> <tr> <td> </td> <td><input type="submit" value="Submit"/></td> </tr> </table> </form>

...<body>

©SoftMoore Slide 7

Example(continued)

©SoftMoore Slide 8

Example(continued)

©SoftMoore Slide 9

Get versus Post

• Historical meaning:– Post: Used to “post” data; e.g., news messages.– Get: Given an ID, go “get” the new message.

Since the Get Method passes user data within the URL, you can easily create links that act like forms.

• Some servers limit the length of Get requests to 240 characters. You can use POST for large forms.

• If security is an issue, use POST. The user data is not encrypted, but at least the data is not easily viewed by inspecting the URL.

©SoftMoore Slide 10

Basic Form Controls

• Text and Password Boxes

• Pull-Down Menus

• Radio Buttons

• Checkboxes

• Text Areas

• Hidden Fields

©SoftMoore

Basic Form Control Syntax

• Every form control is enclosed within <input> and </input> tags.

• A type attribute specifies the type of control– text– checkbox– submit– etc.

• A name attribute enables the server side program to extract the data associated with the control.

• Data is submitted as name-value pairs.

Slide 11


Text Controls

• Text boxes enable you to capture small amounts of text, such as a person’s name or an email address.<input type="text" name="firstName" size="20"

maxlength="30">

• The size attribute– size of the text box– usually specified

• The maxlength attribute– maximum length of string user can enter– often omitted


Password Controls

• Similar Text Controls except that data is masked so that it can’t be easily read from the user’s screen.<input type="password" name="password" size="20">

• Note: Password boxes are really not that secure.– data is not encrypted– relatively easy to “sniff” out someone’s password


Submit/Reset Buttons

• Submit Button: Submits the form data<input type="submit" value="Click Here to Submit!">

• Reset Button: Clears the form<input type="reset" value="Clear">

• The value attribute– text you want to appear on the button


Check Boxes

• Allow users to select one or more options.<input type="checkbox" name="options" value="images"> Image</input><input type="checkbox" name="options" value="video"> Video</input><input type="checkbox" name="options" value="mp3"> MP3</input>

• The value attribute– the text submitted to server– multiple selections allowed


Radio Buttons

• As opposed to check boxes, you can select only one radio button.<input type="radio" name="options" value="images"> Image</input><input type="radio" name="options" value="video"> Video</input><input type="radio" name="options" value="mp3"> MP3</input>

• The value attribute– the text submitted to server


Hidden Fields

• Sometimes it is useful to send hidden data fields.

• These fields are hidden from user, but submitted to the server just like any other piece of data.<input type="hidden" name="username" value="jmoore" />

• These are actually very useful for all sorts of applications– shopping carts − store checkouts– etc.

• Hidden fields are usually created by server-side programs that “write” the HTML document dynamically (e.g., servlets).

Warning: Hidden fields can be easy to “hack”.


Text Areas

• Used to submit large blocks of text.<textarea name="bio" cols="40" rows="10"> Write a short personal biography here.</textarea>

• Attribute cols:– the width (number of columns) of the text area

• Attribute rows:– the height (number of rows) of the text area

• Attribute text:– default text that will automatically appear– usually overwritten by the user


Select Options: Format 1

Pull-down menu – user selects only one<select name="major"> <option value="CSCI">Computer Science</option> <option value="MATH">Mathematics</option> <option value="PSYC">Psychology</option> <option value="HIST">History</option> <option value="BIOL">Biology</option></select>



Combination pull-down menu/list – user selects only one<select name="major" size="3"> <option value="CSCI">Computer Science</option> <option value="MATH">Mathematics</option> <option value="PSYC">Psychology</option> <option value="HIST">History</option> <option value="BIOL">Biology</option></select>



Combination pull-down menu/list – user selects multiple<select name="major" size="3" multiple="true"> <option value="CSCI">Computer Science</option> <option value="MATH">Mathematics</option> <option value="PSYC">Psychology</option> <option value="HIST">History</option> <option value="BIOL">Biology</option></select>


Form Validation

• Handling human errors and unexpected conditions.– creating forms is usually easy– validating forms usually requires more effort

• Two broad options for form validationOption 1: Client-side validation• performed within the browser via the JavaScript language• good for checking that required fields are filled in• immediate feedback to the user if errors encountered

Option 2: Server-side validation• performed via a CGI script or Java Servlet• upon submission, web server checks form data and returns a

refreshed page with errors denoted

Documents

©SoftMooreSlide 1 Introduction to HTML: Forms ©SoftMooreSlide 2 Forms Forms provide a simple mechanism for collecting user data and submitting it to