HTML III (Forms) Robin Burke ECT 270

Outline Where we are in this class Web applications HTML Forms Break Forms lab

Introduction to the course Overview of networking, the Internet and the WWW, Unix survival 1 st week HTML 3 weeks Cascading Style Sheets 1.5 weeks JavaScript 4 weeks

Last class on HTML Mastery of this material will be assumed Midterm JavaScript Final Project

Web application Application "A complete, self-contained program that performs a specific function directly for the user" Web application an application delivered over the WWW

Web applications Core of web development 90% of the web's "pages" are generated from user input only 10% are static pages Partly not in our scope ECT 353 teaches how to build those kinds of applications But web applications need input Input comes from HTML forms

Example applications Course online CampusConnect course search Ugly! Any search engine

Architecture

Web client browser Request URL + parameters input from the user Web server dispatches request to application Application processes input produces output either page or data processed by web server to produce page

Input data Either part of URL (GET method) part of request body (POST method) Form data name-value pairs ? syntax for GET Uploaded files "multi-part" content POST only

Building Web Applications Simplest run a program taking user's input CGI, ISAPI, Java servlet Easiest to develop write a web page with special scripting behavior ASP, JSP, PHP, ColdFusion Most flexible separate data from HTML XML, Struts

For this class "Echo" application Displays a page with the input

What all these share... the need to get user input from a web page Form of input name-value pair How to get from user? depends on the data

Form element chunk a part of the page in which input tags can be placed defines the URL where user data will be sent defines processing mechanism

Input elements name and value attributes user can change the value attribute how depends on the type text field selection list radio button, etc

Example

Simple example Simple form example

Input elements Treated like other page elements can be organized into paragraph, tables, etc. Form layout is almost always table- based All use the same base element INPUT what kind of input controlled by the type attribute

Input elements

Text field Example Attributes type attribute determines the kind of input name & id are equivalent but id is not widely implemented value is initial contents of field size is width of field maxlength is the number of chars accepted

Labels No inherent labeling regular HTML text used HTML 4.0 adds label element only available where id attribute is recognized Otherwise use text and layout to identify form elements

Label element Benefits can be scripted can be handled by non-visual browsers Element Label text place where you want the text to appear

Checkboxes Allow a simple interface to a yes/no choice Attributes value will be included in the parameters if the box is checked checked controls whether the box is checked by default Not XHTML compliant checked="true"

Example Enter query: <input name="field_example" id="field_example3" type="text" value=""> Local search only: <input type="checkbox" name="checkbox" value="checkbox" checked>

Radio buttons Allow the user to select one from a (short) list of options Groups Radio buttons come in groups Groups are defined by shared name attributes

Radio Button Attributes name only one field for a group of radio buttons the name attribute does the linking if buttons don't link, check name fields id must be unique for each element identifies a radio button uniquely value what the value the field will have if this button is checked checked which button of a group will be the default

Example Enter query: <input name="field_example" id="field_example3" type="text" value=""> Search type: Local: <input type="radio" name="search_type" id="local" value="local" checked> Full: <input type="radio" name="search_type" id="full" value="full">

Grouping fieldset tag can be used to group logical elements like radio buttons

Example Search type Local <input type="radio" name="search_type" id="local" value="local" checked> Full <input type="radio" name="search_type" id="full" value="full">

Selection lists Radio buttons are not good for long lists of options menus – good for single selection list box – good for larger lists and multiple selection Problem awkward to use the INPUT element different structure needed

Select element Select element specifies a selection list either a menu (size=1), or a list box (size > 1) Contains option elements to specify each choice

Example <select size="1" name="search_type" id="search_type"> Local Full

Attributes Select element size is the number of elements displayed at one time 1 = menu otherwise box of given height multiple means that multiple selections are allowed name is the field name Option element value is the value of the field if this option is chosen selected identifies the default value

Example <select size="4" name="search_type" id="search_type" multiple> Local Special Collections Technical Reports Press Releases Full

Buttons Types submit button sends the request to the server reset button returns all fields to default action (or push) button can execute a scripted action user-formated button separate button element

Reset and submit Must have a submit button reset is optional value attribute controls the text of the button doesn't have to be "Submit"

User-formatted button Example Run the search Embedded HTML displayed in button

More form elements Password input element type = "password" typed text not displayed Hidden input element type = "hidden" contents not displayed not editable by user vulnerable to hacking File input element type = "file" lets the user choose a file to upload (as in COL)

Still more form elements Image input element type = "image" like a submit button, but location information in request Textarea not an input tag multi-line input allowed element contents become default text

Moving through a form: tabs Tabs move from one field to another always in HTML order Can specify tab order in input elements tabindex attribute

Moving through a form: keys We can also jump around in the form Using access keys accesskey attribute

Final example