===== CS 328 - Week 4 Lecture 1 - 2024-02-05 ===== ===== TODAY WE WILL ===== * announcements * a few more form widgets * prep for next class ===== * should be working on Homework 3! ===== note: there are MANY optional attributes for most form widgets! ===== * what if, for example, you want to REQUIRE that the user enter SOMETHING into a textfield? can give that input element with type="text" an attribute required <-- binary attribute * using strict style, a binary attribute att must be typed as att="att" so: required="required" <-- for STRICT-style * what if you want a maximum allowed length for a textfield entry? maxlength is available for that; maxlength="16" for example ===== radio buttons: good for choose-exactly-one of not-TOO-many options ===== * input elements with type="radio" * for a set of radio buttons that are to be logically grouped, so that selecting ONE of them automatically UNselects the rest, the most-common approach is to give them all the same value for their name attribute * to indicate which ONE should be selected to start, give THAT radio button the binary attribute checked that is, in strict style, checked="checked" * use a label element to logically associate descriptive text with a radio button ===== checkboxes - good for choose-zero-or-more of not TOO many options ===== * input elements with type="checkbox" * use checked="checked" to initially have the checkbox selected (use your power for good and not evil!) * use a label element to logically associate descriprive text with a checkbox (typical case) * if the checkbox is selected when its form is submitted, the name=value pair sent is the value of its name attribute and the value on what if it is not checked? then NO name=value pair is sent for that checkbox * hey, if you give it a value attribute, that value's value is the value in the name=value pair if that checkbox is selected when the form is submitted! ==== password field ==== * input with type="password" * nice for entering info that isn't then displayed within the field * USE with method="post", or that value WILL be at the end of URL in plaintext! * USE with https, or that value will be transmitted in plaintext * use a label element to logically associate descriptive text with a password field ==== textarea element ==== * hey, not an input element! * for letting the user enter MULTIPLE lines of text! * it HAS CONTENT! anything you put between opening and closing tags will be its initial content! * attribute name - its value will be the name in the submitted name=value pair * with the current content when submitted as the value * rows attribute: number of rows displayed (height) * cols attribute: roughly the number of characters wide displayed (but non-monospaced fonts make this APPROXIMATE!) * placeholder - nice for a suggestion to initially appear and NOT be content * use a label element to logically associate descriptive text with a textarea ===== select element - can be used for drop-down menus, drop-down lists, and list boxes ===== * ideal for choose-exactly-one-of-many or form space is at a premium, can be used for choose-more-than-one, but that's not well-understood by users currently * element: select * name attribute: the name that will be used when submitted * content: option elements the user can choose from <option value="what will be sent"> What user sees </option> * an option element with selected="selected" will be the one initially displayed * use a label element to logically associate descriptive text with a select element