Forms
- Most common way for a user to communicate information to a web server
- Forms are used to gather information from the user either in the form of text, or button selections
- Commonly used form elements modeled after paper forms include:
- Text (single-line, multi-line)
- Checkboxes and radio buttons
- Lists and menus
- Special buttons (submit, reset)
- Together, the values of all form elements are referred to as form data
- When the user presses the submit button, the form data is sent to the server
Structure of a Form
- All components of a form are contained between <form> tags
- action attribute specifies an URL (typically that of the application that is to be called when the user presses the submit button)
action="http://www.yahoo.com/cgi-bin/survey.cgi"- method attribute specifies one of the two techniques (GET or POST) used to pass the form data to the server (more about this when we discuss CGI)
method="GET"- A document can contain multiple forms, but forms cannot be nested
<form action="http://www.yahoo.com/cgi-bin/survey.cgi" method="GET"> ... </form>
Input Elements
- Most input elements are created with the <input> tag
- The type attribute of the <input> tag indicates the kind of element to be created
- Each input field must have a name, and can have a value
<input type="element_type" name="element_name" value="default_value">
Text fields
- Creates a box for text input
- The default size of a text field is 20; can be changed with the size attribute
- To limit the number of characters that can be entered, set maxlength
Phone: <input type="text" name="phone" size="12">Phone:
Password Fields
- Password fields are similar to text fields, except instead of displaying the value of the field, the value is masked
- They do not provide true security (no encryption), only protection against someone peeking over your shoulder and seeing you enter the password
<table border="0"> <tr> <td>User:</td> <td><input type="text" name="user" size="8"></td> </tr> <tr> <td>Password:</td> <td><input type="password" name="secret" size="8"></td> </tr> </table>
User: Password:
Checkboxes
- Checkboxes are used to collect multiple choice input
- Every checkbox requires a value attribute, which is its value in the form data if the checkbox was checked
- No checkbox is initially checked
- Set the checked attribute to initialize a checkbox to 'checked'
- Checkboxes with the same name define a *set* of values (ie multiple boxes can be ticked off)
<h3>Grocery Checklist</h3> <form> <input type="checkbox" name="groceries" value="milk" checked> Milk <br/> <input type="checkbox" name="groceries" value="bread"> Bread <br/> <input type="checkbox" name="groceries" value="eggs"> Eggs </form>Grocery Checklist
Radio Buttons
- Radio buttons are very similar to checkboxes
- However, only one of the buttons in a set of radio buttons may be selected
- Browsers often preselect the first one
<h3>Age Category</h3> <form> <input type="radio" name="age" value="under20" checked> Under 20 <br> <input type="radio" name="age" value="20-35"> 20-35 <br> <input type="radio" name="age" value="36-50"> 36-50 <br> <input type="radio" name="age" value="over50"> Over 50 </form>Age Category
Menus
- Menues are created using the <select> tag
- There are two kinds of menus
- those that behave like checkboxes
- those that behave like radio buttons (the default)
- Menus that behave like checkboxes specify the multiple attribute
- The size attribute of <select> indicates the number of menu items to be displayed
- Each item of a menu is specified with an <option> tag
- The content of the option tag is the value of the item
- The value can also be specified in the value attribute of the option tag
- Use the selected attribute to preselect a menu item
<h3>Grocery Menu</h3> <form> <select name="groceries"> <option>milk</option> <option selected>bread</option> <option>eggs</option> <option>cheese</option> </select> </form>Grocery Menu
Text Areas
- Multi-line text input areas are created with the <textarea> tag
- Include the rows and cols attributes to specify the size of the text area
- Default text can be included as the content of <textarea>
Please enter your comments below: <form> <textarea name="comments" rows="3” cols="40">(Be brief and concise) </textarea> </form>Please enter your comments below:
Submit Button
- The submit button submits the contents of the form to the server
- The value of the submit button is used as the label of the button
- Multiple submit buttons are possible, as a different value will be sent to the server depending on which button was pressed
- Typically used in conjunction with a reset button which clears the form
<input type="submit" value="Edit"> <input type="reset" value="Cancel">
Image Buttons
- Image buttons function as submit buttons, but give you more flexibility over the look of the button
- Please note that the browser sends the coordinates where the user clicked on the image to the server
<form> <input type="image" src="searchbutton.gif" name="search"> </form>
Tips on Creating a Mock-Up Site
- Before you start implementation, you should create a click-through prototype or mock-up of your site
- This mock-up should show a typical path through your application
- When including forms in your mock-up, remember that the action attribute of a form can be set to *any* URL
- You can link to another web page, rather than indicating a script to execute on the form data (of course, the data won't be processed)
- This allows you to show a typical result page to be displayed after the form has been filled out (only the happy day scenario!)
<form action="next.html"> <p>Try it by clicking on the submit button below!</p> <input type="submit" value="Go ahead"> </form>
A Complete Example
<form action="preview-review.html"> <table cellpadding=5> <tr> <td>On a scale of 1 to 5 stars, with 5 stars being the best,<br> <b>1.</b> <b>How do you rate this book?</b> <select name=rating> <option value="" selected>- </option> <option value="5">5 stars</option> <option value="4">4 stars</option> <option value="3">3 stars</option> <option value="2">2 stars</option> <option value="1">1 star</option> </select> <br> </td> </tr> <tr> <td> <b>2.</b> <b>Please enter a title for your review:</b> <br> <input type="text" name="summary" value="" size=56 maxlength=60> </td> </tr> <tr> <td> <p> <b>3.</b> <b>Type your review in the space below:</b> <br> (maximum of 1,000 words)<br> <textarea name="review" rows=9 cols=65></textarea> </td> </tr> <tr> <td> <input type="image" src="preview-your-review.gif" width="141" height="19" border=0 alt="Preview Your Review"> </td> </tr> </table> </form>