CSW 131 – Chapter 11 Adding Forms to Your Site

1. CSW 131 – Chapter 11Adding Forms to Your Site Prepared by Prof. B. for use withTeach Yourself Visually Web Designby Ron Huddleston, Wiley

2. Create a Form (pp. 252-253) • Forms allow for the collection of information, with common uses being to allow users to register for accounts, make purchases, log in, change passwords, “send email”, etc. The (X)HTML tag used is <form>. Common attributes are action and method: • action is a URL to a web page that contains code needed to process the form data • method can be one of two values • post is the most common • get is less common, but results can be saved • First download ch11.zip into downloadssubfolder • copy & paste ch11zip into class_worksubfolder • extract (unzip) ch11.zip, which becomes subfolder ch11 into class_worksubfolder • In the subfolder tyvindustries, right-click contact.html and select Edit with Notepad++ More . . .

3. Create a Form (pp. 252-253 CONT.) • On a new line after <h1>Contact Us</h1> type: <form action="processform.php" method="post" > <!--[processform.php is presumably PHP script (non-existent in this example) that will process the form data]--> </form> • Save contact.html and view it in a browser. Note that while the form “container” is created, no changes will appear (yet).

4. Add a Text Field (pp. 254-255) • Text fields are the most common form control and use the tag <input>, which is a very common form tag, so we also use the attribute type set to (=) the value text. Also required is the name attribute, which is used by the (server-side) script in processing the data of this field. The name should be a single, descriptive word that starts with a letter and contains only letters, numbers, and underscore characters: • On a new line before </form> type:First Name: <input type="text" name="firstname" /> • Save contact.html and view it in a browser – the text field appears. • FYI, attributes size = character width, maxlength restricts user characters input, and value prepopulates the field. Try the following edit (you may need to close & reopen browser, and comment it out when done).First Name: <input type="text" name="firstname" size="35" value="Enter first name" maxlength="25" />

5. Add a Label (pp. 256-257) • Label tags that wrap the text label (in this case “First Name”) are preferred along with setting an ID attribute to the field and a for attribute to the label – these create a logical association between the field and the label: • Continuing with contact.html, edit our text field accordingly: <label for="firstname">First Name: </label><input type="text" name="firstname" id="firstname" /> • Save contact.html and view it in a browser – see any changes? • Note: This formatting makes the page more meaningful for the visually impaired, and allows users to click on the label to place the cursor in the field. It also allows for easier CSS styling.

6. Add Check Boxes (pp. 258-259) • Using checkbox as the input type gives the user choices (they can pick all, some, or none). The name for a group of checkboxes will be the same, but each checkbox needs a different value and ID (if using labels): • Continuing with contact.html, on a new line before </form> type: <p>My query is in regard to:<br /> <input type="checkbox" name="widgets" value="redwidget" id="redwidget" /><label for="redwidget">Red Widget</label> </p> • Save contact.html and view it in a browser – checkbox appears. • Before </p>, copy and paste input line 2 twice, then edit it so the 2nd checkbox is blue, and the last checkbox is green (4 edits/line). • Save contact.html again and 3 checkboxes should appear. • TIPS, p. 259 discusses pre-checking checkboxes and lay out. Format is checked="checked" on input line (check boxes & radio buttons).

7. Add Radio Buttons (pp. 260-261) • Using radio (buttons) as the input type gives the user only ONE choice. Like checkboxes, the name for a group of radio buttons will be the same, but each radio button needs a different value and ID (if using labels): • Continuing with contact.html, on a new line before </form> type: <p>I am:<br /> <input type="radio" name="status" value="current" id="current" /><label for="current">A current customer</label> </p> • Save contact.html and view it in a browser – radio button appears. • Before </p> copy and paste the above input line, then edit it so the 2nd radio button is future (4 edits changing current to future). • Save contact.html again and 2 radio buttons should appear. • Note: Pre-selecting radio buttons forces users to pick a button. Format is checked="checked" on input line (check boxes & radio buttons).

8. Create a Drop-Down List (pp. 262-263) • Usingthe <select> tag allows you to create drop-down lists, with each choice in the list surrounded by <option> tags. You can optionally add a value tag to have a different value than what the user sees go to the server (so the grey text below Is NOT required). • Continuing with contact.html, on a new line before </form> type: <p><label for="contact">Please contact me via:</label> <select name="contact" id="contact"> <option value="custEmail">Email</option> <option value="custPhone">Phone</option> <option value="custMail">Mail</option> </select></p> • Save contact.html and view it in a browser – try the dropdown list. • Edit the 2nd line to explore two optional values (add “Select one”?): <select name="contact" id="contact" multiple="multiple" size="2">

9. Insert a Text Area (pp. 264-265) • The <textarea> tag allows users to enter large amounts of text. You can optionally define the size of the textarea using rows (row height) and cols (which is width in characters). You can pre-enter text by placing it within the textarea tags. • Continuing with contact.html, on a new line before </form> type: <p> <label for="comments">Additional comments:</label><br/> <textarea name="comments" id="comments" rows="5" cols="40">Optional default text</textarea> </p> • Save contact.html and view it in a browser noting the optional text. • CKEditor is an open source, free tool to allow users to format input.

10. Add a Button to Your Form (pp. 266-267) • In order for users to send the completed form, the most common method is to add a “Submit” button. Two methods to dothis are using either the <input> OR<button> tag, with type=“submit” in either case. You can set what text shows on the button by using the value attributeand using text of your choice. • Continuing with contact.html, on a new line before </form> type: <p> <input type="submit" value="Contact Us" /> </p> • Save contact.html and view it in a browser noting the button. • For custom buttons, try adding this code on a new line before </p>: <input type="image" src="images/contacttyvbtn.gif" alt="Contact" />

11. Group Related Form Elements (pp. 268-269) • To make some longer forms easier to read for users, you can group related parts using <fieldset> (appears with border around its fields) and within it, <legend> (which appears in the top-left corner). • Continuing with contact.html, on a new line after opening <form type: <fieldset> <legend>Contact Information</legend> then on a new line before the closing </form> tag type: </fieldset> • Save contact.html and view it in a browser. • Note: Fieldsets are often nested, but pay attention to detail. Try adding: <fieldset><legend>Additional Comments in front of textarea code, </legend> before <br />, and </fieldset> after the next </p>. • See TIPS, p. 269, regarding the use of CSS for styling these tags.

12. To Do List • Read Chapter 11 • Revisit what we did in class • Be careful as we do not follow book • Remember, MUCH more detail about anything we cover is: • at w3.org • the Appendices of your book • DOCUMENT Your Project • You should be working on the content of your site.