Chapter 6 Basic forms 1

Forms and query string 2 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 widgets or controls or components (e.g., buttons, checkboxes, text fields, etc.) When the Submit button of a form is clicked, the form’s values are sent to the server for processing the information is sent to the server as a query string parameter embedded 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)

HTML form: HTML form: 3 All of the widgets, or components of a form are defined in the content of a tag The only required action attribute 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 action is the empty string The method attribute of 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 form controls form controls

Form example 4 Many of the form controls / widgets (text, buttons, etc) are created using the HTML input element  The type attribute of 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 Let's search Google:

Form controls: Form controls: 5 input element is an inline element that MUST be self-closed – name attribute specifies name of query parameter to pass to server and should be unique – type can 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 Type your Google query:

Text fields: Text fields: 6 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 NetID Password

Text boxes: Text boxes: 7 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. Type your comments here. a multi-line text input area (inline) initial text

Checkboxes: Checkboxes: 8 none, 1, or many checkboxes can be checked at same time when sent to server, any checked boxes will be sent with value on : use checked="checked" attribute in HTML to initially check the box Lettuce Tomato Pickles yes/no choices that can be checked and unchecked (inline)

Radio buttons: Radio buttons: 9 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 sets of mutually exclusive choices (inline) Visa MasterCard American Express

Text labels: Text labels: 10 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 id and 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. Visa MasterCard American Express … Visa … click me to check the bold box

Drop-down list:, Drop-down list:, 11 option element represents each choice select optional attributes: disabled, multiple, size optional selected attribute sets which one is initially chosen menus of choices that collapse and expand (inline) Jerry George Kramer Elaine

Using for lists 12 optional multiple attribute 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 Jerry George Kramer Elaine Newman

Option groups: Option groups: 13 Jerry George Kramer Elaine Newman Susan

Reset buttons 14 Name: Meal: Meat? when clicked, returns all form controls to their initial values specify custom text on the button by setting its value attribute print_params.php is 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)

Common UI control errors 15 “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

Grouping input:, Grouping input:, 16 fieldset groups related input fields; legend supplies an optional caption Login Information User Name Password groups of input fields with optional caption (block)

Hidden input parameters 17 Name: Meal: Meat? 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

Styling form controls 18 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 ) element[attribute="value"] { property : value;... property : value; }

Styling Text Boxes 19 body { height: 100%; } textarea { position: absolute; width: 50%; height: 15%; } HTML validator requires rows and cols on a textarea if you want a textarea at a specific width/height in pixels or %, you must specify rows/cols in the HTML and width/height in the CSS – the rows/cols will be ignored but must be there anyway... – sometimes specifying a height on the page's body helps – sometimes using absolute/fixed positioning on the textarea helps

Styled form example 20 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; } New User Signup Name: Address: Credit Card: Visa MasterCard label.heading { float: left; margin-right: 1em; text-align: right; width: 7em; } legend { background-color: white; border: 1px solid black; padding: 0.25em; }