1 / 42

HTML III (Forms)

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

gossr
Download Presentation

HTML III (Forms)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML III (Forms) Robin Burke ECT 270

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

  3. 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

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

  5. 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

  6. 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

  7. Example applications • Course online • CampusConnect course search • Ugly! • Any search engine

  8. Architecture

  9. 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

  10. 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

  11. 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

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

  13. 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

  14. 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

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

  16. Example

  17. 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>

  18. 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

  19. Input elements

  20. 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

  21. 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

  22. 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

  23. 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"

  24. 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>

  25. 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

  26. 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

  27. 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>

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

  29. 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>

  30. 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

  31. 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

  32. Example <td> <select size="1" name="search_type" id="search_type"> <option>Local</option> <option>Full</option> </select> </td>

  33. 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

  34. 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>

  35. 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

  36. 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"

  37. User-formatted button • Example <button type="submit">Run the <strong>search</strong></button> • Embedded HTML displayed in button

  38. 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)

  39. 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

  40. 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

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

  42. Final example

More Related