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 • 1st 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
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 • 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 <html> <head> <title>Simple form example</title> </head> <body> <form action="http://josquin.cs.depaul.edu/cgi/cgi-bin/echo.pl" method="get"> <input name="field_example" id="field_example" type="text" value="Type here"> <input type="submit"> </form> </body> </html>
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 • <input type="text" name="first_name" id="first_name" value="John Smith" size="20" maxlength="40"> • 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 for="field_id">Label text</label> • place where you want the text to appear
Checkboxes • Allow a simple interface to a yes/no choice • <input type="checkbox" name="name" id="name" value="it was checked" checked> • 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 <form action="http://josquin.cs.depaul.edu/cgi-bin/echo.pl" method="post"> <table width="75%" border="0"> <tr> <td width="25%"><label for="label">Enter query:</label></td> <td width="75%"> <input name="field_example" id="field_example3" type="text" value=""> </td> </tr> <tr> <td><label for="checkbox">Local search only:</label></td> <td><input type="checkbox" name="checkbox" value="checkbox" checked></td> </tr> <tr> <td></td> <td><input name="submit" type="submit"></td> </tr> </table> </form>
Radio buttons • Allow the user to select one from a (short) list of options • <input type="radio" name="search_type" id="local" value="local" checked> • 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 <form action="http://josquin.cs.depaul.edu/cgi-bin/echo.pl" method="post"> <table width="75%" border="0"> <tr> <td width="25%"><label for="label">Enter query:</label></td> <td width="75%"><input name="field_example" id="field_example3" type="text" value=""></td> </tr> <tr> <td><label for="local">Search type:</label></td> <td>Local: <input type="radio" name="search_type" id="local" value="local" checked> Full: <input type="radio" name="search_type" id="full" value="full"></td> </tr> <tr><td></td><td><input name="submit" type="submit"></td></tr> </table> </form>
Grouping • fieldset tag can be used to group logical elements • like radio buttons
Example <tr><td></td> <td> <fieldset> <legend align="top">Search type</legend> <label for="local">Local</label> <input type="radio" name="search_type" id="local" value="local" checked> <label for="full">Full</label> <input type="radio" name="search_type" id="full" value="full"> </fieldset> </td> </tr>
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 <td> <select size="1" name="search_type" id="search_type"> <option>Local</option> <option>Full</option> </select> </td>
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 <td> <select size="4" name="search_type" id="search_type" multiple> <option value="local">Local</option> <option value="spec">Special Collections</option> <option value="tech">Technical Reports</option> <option value="press">Press Releases</option> <option value="full">Full</option> </select> </td>
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 <button type="submit">Run the <strong>search</strong></button> • 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 <textarea> • 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
