Presentation Transcript

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