Chapter 6 Basic forms

1. Chapter 6 Basic forms

2. Forms and query string • form: a group of user input (UI) controls that accepts information from the user and sends the information to a web server • HTML has tags to create a collection of objects that implement this information gathering • These objects are called widgetsor controlsor components (e.g., buttons, checkboxes, textfields, etc.) • When the Submit button of a form is clicked, the form’svalues are sent to the server for processing • the information is sent to the server as a query string parameterembedded in the URL of the HTTP get or in the body of the HTTP post request. • JavaScript can be used to create interactive controls (seen later)

3. HTML form: <form> <form action="destination URL" > form controls </form> <form action="destination URL" method="" > form controls </form> • All of the widgets, or components of a form are defined in the content of a <form> tag • The only required actionattribute gives the URL of the page that will process this form's data • when form has been filled out and submitted, its data will be sent to the action's URL • one page may contain many forms if so desired • If the form has no action, the value of actionis the empty string • The methodattribute of <form> specifies one of the two possible techniques of transferring the form data to the server, get and post • Discussed later on in the server side scripting section

4. Form example <form action="http://www.google.com/search"> <div> Let's search Google: <input name="q" /> <input type="submit" /> </div> </form> • Many of the form controls / widgets (text, buttons, etc) are created using the HTML input element • The type attribute of <input> specifies the kind of widget being created • Every form should have a submit button, when clicked the browser builds a query string and submits it to that URL. • Should wrap the form's controls in a block element such as div

5. Form controls: <input> <!-- 'q' happens to be the name of Google's required parameter --> <form action="http://www.google.com/search"> <div> Type your Google query: <input type="text“ name="q" value="Captain Planet" /> <input type="submit" value="Search Google" /> </div> </form> http://www.google.com/search?q=Captain+Planet • input element is an inline element that MUST be self-closed • nameattribute specifies name of query parameter to pass to server and should be unique • typecan be button, checkbox, file, hidden, password, radio, reset, submit, text, ... (default is text) • value attribute specifies control's initial text. If not set for submit, it will be Submit Query

6. Text fields: <input> <input type="text" size="10" maxlength="8" /> NetID <br /> <input type="password" size="16" /> Password <input type="submit" value="Log In" /> • input attributes: disabled, maxlength, readonly, size, value • size attribute controls onscreen width of text field • maxlength limits how many characters user is able to type into field

7. Text boxes: <textarea> a multi-line text input area (inline) <textareaname =“name” rows=“height" cols=“width"> initial text </textarea> <textarea rows="4" cols="20"> Type your comments here. </textarea> • initial text is placed inside textarea tag (optional) • required rows and cols attributes specify height/width in characters • optional readonly attribute means text cannot be modified • by default the text wrap to the next line.

8. Checkboxes: <input> yes/no choices that can be checked and unchecked (inline) <input type="checkbox" name="lettuce" /> Lettuce <input type="checkbox" name="tomato" checked="checked" /> Tomato <input type="checkbox" name="pickles" checked="checked" /> Pickles <input type="submit" /> • none, 1, or many checkboxes can be checked at same time • when sent to server, any checked boxes will be sent with value on: • http://www.cs.aub.edu.lb/params.php?tomato=on&pickles=on • use checked="checked"attribute in HTML to initially check the box

9. Radio buttons: <input> sets of mutually exclusive choices (inline) <input type="radio" name="cc" value="visa" checked="checked" /> Visa <input type="radio" name="cc" value="mastercard" /> MasterCard <input type="radio" name="cc" value="amex" /> American Express <input type="submit" /> • grouped by name attribute (only one can be checked at a time) • So the browser will ensure that only one radio buttons can be checked from a group • must specify a value for each one or else it will be sent as value on

10. Text labels: <label> <label> <input type="radio" name="cc" value="visa" checked="checked"/> Visa</label> <label> <input type="radio" name="cc" value="mastercard" /> MasterCard</label> <label> <input type="radio" name="cc" value="amex" /> American Express</label> <input type="submit" /> • associates nearby text with control, so you can click text to activate control • can be used with checkboxes or radio buttons • label element can be targeted by CSS style rules • It can nest a control element • Also you can give each a control an idand then a label placed anywhere in the page can target that control by placing a for attribute inside it and giving that attribute the same value as the id. … <input id=“boldness” type=“checkbox" name=“bold“ /> Visa … <label for=“boldness”> click me to check the bold box </label>

11. Drop-down list: <select>, <option> menus of choices that collapse and expand (inline) <select name="favoritecharacter"> <option>Jerry</option> <option>George</option> <option selected="selected">Kramer</option> <option>Elaine</option> </select> <input type="submit" /> • option element represents each choice • select optional attributes: disabled, multiple, size • optional selected attribute sets which one is initially chosen

12. Using <select> for lists <select name="favoritecharacter[]" size="3" multiple="multiple"> <option>Jerry</option> <option>George</option> <option>Kramer</option> <option>Elaine</option> <option selected="selected">Newman</option> </select> <input type="submit" /> • optional multipleattribute allows selecting multiple items with shift- or ctrl-click • must declare parameter's name with [] if you allow multiple selections • option tags can be set to be initially selected

13. Option groups: <optgroup> <select name="favoritecharacter"> <optgroup label="Major Characters"> <option>Jerry</option> <option>George</option> <option>Kramer</option> <option>Elaine</option> </optgroup> <optgroup label="Minor Characters"> <option>Newman</option> <option>Susan</option> </optgroup> </select>

14. Reset buttons <form action="print_params.php"> <div> <label>Name: <input type="text" name="name" /></label> <br /> <label>Meal: <input type="text" name="meal" /></label> <br /> <label>Meat? <input type="checkbox" name="meat" checked="checked" /> </label> <br /> <input type="submit" value="Submit Meal Preferences" /> <input type="reset" value="Clear" /> </div> </form> • when clicked, returns all form controls to their initial values • specify custom text on the button by setting its valueattribute • print_params.phpis a php server side script that you can write to print the data submitted by the client to the server (discussed in server side scripting part)

15. Common UI control errors • “I changed the form's HTML code ... but when I refresh, the page doesn't update! “ • By default, when you refresh a page, it leaves the previous values in all form controls • it does this in case you were filling out a long form and needed to refresh/return to it • if you want it to clear out all UI controls' state and values, you must do a full refresh • Firefox: Shift-Ctrl-R • Mac: Shift-Command-R

16. Grouping input: <fieldset>, <legend> groups of input fields with optional caption (block) <form action= ""> <fieldset> <legend>Login Information</legend> <input type="text" name="username" /> User Name <br /> <input type="text" name="password" /> Password </fieldset> </form> • fieldsetgroups related input fields; • legend supplies an optional caption

17. Hidden input parameters <form action=""> <fieldset> <label>Name: <input type="text" name="name" /></label> <br /> <label>Meal: <input type="text" name="meal" /></label> <br /> <label>Meat? <input type="checkbox" name="meat" checked="checked" /> </label> <br /> <!-- two hidden input parameters --> <input type="hidden" name="organization" value="ScumCo" /> <input type="hidden" name="year" value="2008" /> <input type="submit“ /> </fieldset> </form> • an invisible parameter that is still passed to the server when form is submitted • useful for passing on additional state that isn't modified by the user 17

18. Styling form controls element[attribute="value"] { property : value; property : value; ... property : value; } input[type="text"] { background-color: yellow; font-weight: bold; } • attribute selector: matches only elements that have a particular attribute value • useful for controls because many share the same element (input) 18

19. Styling Text Boxes <textarea rows="3" cols="40"></textarea> body { height: 100%; } textarea { position: absolute; width: 50%; height: 15%; } • HTML validator requires rowsand colson a textarea • if you want a textareaat a specific width/heightin pixels or %, you must specify rows/cols in the HTML andwidth/height in the CSS • the rows/colswill be ignored but must be there anyway... • sometimes specifying a heighton the page's bodyhelps • sometimes using absolute/fixedpositioning on the textareahelps 19

20. Styled form example fieldset { background-color: #ffffcc; margin-left: auto; margin-right: auto; width: 21em; } form { font-family: "Helvetica", sans-serif; } input { margin-bottom: 0.5em; } input[type="submit"] { font-weight: bold; margin-left: 10em; } label.heading { float: left; margin-right: 1em; text-align: right; width: 7em; } legend { background-color: white; border: 1px solid black; padding: 0.25em; } <form action=""> <fieldset> <legend> New User Signup </legend> <label class="heading" for="name">Name:</label> <input type="text" name="name" id="name" /> <br /> <label class="heading" for="address">Address:</label> <input type="text" name="address" id="address" /> <br /> <label class="heading">CreditCard:</label> <label><input type="radio" name="ccard" value="visa" /> Visa</label> <label><input type="radio" name="ccard" value="mc" /> MasterCard</label> <br /> <input type="submit" value="Sign Up" /> </fieldset> </form> 20