©SoftMooreSlide 1 Introduction to HTML: Forms

©SoftMooreSlide 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 and 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.

©SoftMooreSlide 3 Flow of Information for Forms Web Server Form Processing Program BrowserBrowser User HTML Document Form Data Output Input HTML Document Form Data

©SoftMooreSlide 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.

©SoftMooreSlide 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: Post: The data is encoded and transmitted as part of the HTTP body (via its standard input stream).

©SoftMooreSlide 6 Example Enter your name:...

©SoftMooreSlide 7 Example (continued)

©SoftMooreSlide 8 Example (continued)

©SoftMooreSlide 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.

©SoftMooreSlide 10 Basic Form Controls Text and Password Boxes Pull-Down Menus Radio Buttons Checkboxes Text Areas Hidden Fields

Basic Form Control Syntax Every form control is enclosed within and 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. ©SoftMooreSlide 11

©SoftMooreSlide 12 Text Controls Text boxes enable you to capture small amounts of text, such as a person’s name or an address. The size attribute –size of the text box –usually specified The maxlength attribute –maximum length of string user can enter –often omitted

©SoftMooreSlide 13 Password Controls Similar Text Controls except that data is masked so that it can’t be easily read from the user’s screen. Note: Password boxes are really not that secure. –data is not encrypted –relatively easy to “sniff” out someone’s password

©SoftMooreSlide 14 Submit/Reset Buttons Submit Button: Submits the form data Reset Button: Clears the form The value attribute –text you want to appear on the button

©SoftMooreSlide 15 Check Boxes Allow users to select one or more options. Image Video MP3 The value attribute –the text submitted to server –multiple selections allowed

©SoftMooreSlide 16 Radio Buttons As opposed to check boxes, you can select only one radio button. Image Video MP3 The value attribute –the text submitted to server

©SoftMooreSlide 17 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. 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”.

©SoftMooreSlide 18 Text Areas Used to submit large blocks of text. Write a short personal biography here. 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

©SoftMooreSlide 19 Select Options: Format 1 Pull-down menu – user selects only one Computer Science Mathematics Psychology History Biology

©SoftMooreSlide 20 Select Options: Format 2 Combination pull-down menu/list – user selects only one Computer Science Mathematics Psychology History Biology

©SoftMooreSlide 21 Select Options: Format 3 Combination pull-down menu/list – user selects multiple Computer Science Mathematics Psychology History Biology

©SoftMooreSlide 22 Form Validation Handling human errors and unexpected conditions. –creating forms is usually easy –validating forms usually requires more effort Two broad options for form validation Option 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