Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Web 130 – Web Design with Dreamweaver © 2009-2013 Raven Gildea Forms Building Forms To function, a form needs: 1. a form tag, including: a. action (the url of your form handler) b. method (how your data is transmitted to the server: “post” is secure, “get” can be bookmarked. For collecting data, use “post”. For dynamic searches, use “get”.) 2. form elements inside the form’s opening and closing tags. Every form element has a name and a value. The name is the question, the value is the answer. 3. a submit button inside the form’s opening and closing tags 4. a form handler (also known as a CGI script) on a server 5. a page returned by the server to your user: this could be a thank you page, search results, a dynamically generated invoice for a purchase made, etc. First, check your DW preferences: Edit Preferences (Cmd/Ctrl U) > Accessibility > check “Form objects” > Code Rewriting > deselect “Rename form items when pasting” Then, insert your form tag Always insert a form tag before inserting any form elements. Otherwise, things tend to get messy. Insert panel > Forms > form icon (the first button) or Main menu > Insert > Form > Form In the dialog, select General: Action: Enter the path to your form handler file. For now, use “formhandler.php”. If you are using your hosting company’s default form handler, you’ll need to get the name and path. If your form handler isn’t on your server, you’ll need an absolute path. Method: Select get or post. For our purposes, use post. Enc type: You can leave this blank unless you are making a form that uploads a file, which is beyond the scope of this class. Name: Some form handlers require a form name, but mine doesn’t. If you use your your hosting company’s form handler, check with them to see whether theirs needs the form to have a specific name. Target: Leave blank, unless you are building a site with frames. To give your form an (optional) ID, click on the Style Sheet/Accessibility tab and fill in the ID field. Doing this will allow you to give unique styles to this form. 1 Web 130 – Web Design with Dreamweaver © 2009-2013 Raven Gildea Forms You can also assign CSS classes to your form here, allowing you to give your form’s elements consistent CSS styles. Note: You can put any HTML elements into a form: text, graphics, tables, etc. It doesn’t have to contain only form elements. Formatting Your Form Elements Opinions differ as to best practice, but a table is probably the easiest way to format your form elements, and offers the surest cross-browser consistency. No matter what you do, your form will look slightly different in different browsers. Insert your table before you insert any form elements: otherwise, things will get messy. With your cursor inside the form tag, Insert > Table or use the Table button on the Insert panel’s Common tab. In the Table dialog, choose a table with 10 rows, 2 columns, and no header. (It’s easy to add or subtract rows in DW) Click Okay Use the tag selector to select your table, then add CSS to give your table a width, a (probably temporary) border, and a vertical alignment of top to make your table data easier to read. CSS Styles > New CSS Rule > Tag > table > OK Box > Width > 500px Block > vertical-align > top CSS Styles > New CSS Rule > Compound > table, th, td> OK Border > Same for all > solid 1px #000 In Design view, select the left column of your table, and give it a custom CSS class with an alignment of right. This will make your label text line up nicely. CSS Styles > New CSS Rule > Class > .myclassname > OK Block > text-align > right Names and IDs for Form Elements Form elements must have names. The form handler uses the form element names to process the information on the form. For best future-proofing, you can give your each form element a name and ID. This gives you the option of styling each element with CSS. 2 Web 130 – Web Design with Dreamweaver © 2009-2013 Raven Gildea Forms Name is for scripts, ID is for CSS. Generally you will give each element the same name and ID. (DW does this for you.) Example: <input name="firstname" id="firstname" type="text" /> Exception: checkbox groups and radio buttons come in a group, and each button in the group must have the same name for the buttons to function. Each button must have a unique ID. Example: <input type="radio" name="cardtype" " id="visa" value="VISA" /> <input type="radio" name=" cardtype" " id="mc" value="MC" /> <input type="radio" name=" cardtype" " id="amex" value="AMEX" /> Adding a Text Field Be sure you are in Split View. In the Design pane, place cursor in upper right table cell. Note that you will get different options if your cursor is in the Code pane: use Design! Insert bar > Forms > Text field icon In the Accessibility dialog: ID: add a unique id for the element, such as firstname. When you assign an ID, DW automatically gives the form element the same name. Label: this is the text that the user will see, such as “First Name:” Style: Select Attach label using ‘for’ attribute to attach label to form element if they will be in different table cells Select Wrap with label if label and form element will be in the same table cell (i.e. a checkbox or radio button where the label goes after the box) Wrap with label gives bigger mouse target – which helps accessibility – in some browsers. Position: determines where the label will be relative to the form element Access key: allows users (in some browsers) to access the element without a mouse, by pressing a key on the keyboard. They won’t know which key to use unless you provide that info. 3 Web 130 – Web Design with Dreamweaver © 2009-2013 Raven Gildea Forms Tab index: determines the order of your elements if the user tabs through the form. Useful only if the default order isn’t what you want. Click OK. Now move the label into the correct position: In your document window, use the tag selector to select the label and the label tag. Click and drag or cut and paste to move the label into the cell on the left. Next, set the form element’s properties in the Property Inspector: Click in the text field to select it. The tag selector should say <input#firstname>. Now check the Property Inspector. On the left: The name of your element appears in the field under the text that tells you the type of element (in this case, TextField). Your element’s name does not appear on screen. Char width: width of the input field on your web page Max Chars: (for text fields) The number of characters the field will accept (you might limit a credit card to 16, to prevent the user from entering dashes.) Num lines: (for text areas) The number of lines that are visible on screen. It doesn’t limit the number of lines the user can enter. Type: Single line is for text fields, such as “Name”. Multi line is for text areas, such as “Comments”. Password prevents the input text from being readable on the screen, but doesn’t add any security to how the info is transmitted to the server. Adding a text area (multi line) switches Max Chars to Num Lines Init value: Starter text that will display in the input box when the page loads. This is helpful if the field has a common entry, and the user only needs to change the text if it doesn't apply. Example: “Seattle” in the city field if most of your users will live in Seattle, or (206) as starter text for a phone number. Class: Allows you to apply a pre-existing CSS class to your form element, if you’ve already written one. 4 Web 130 – Web Design with Dreamweaver © 2009-2013 Raven Gildea Forms Checkboxes and Radio Buttons Checkboxes allow a user to select several options. Radio buttons allow only one option: be thoughtful about how you use them. Is only one option really the best choice? For credit card type, probably yes. For certain demographic info, or “how did you hear of us?” possibly not. Inserting a Checkbox In the Input Tag Accessibility Attributes dialog: Style: wrap with label tag Position: After form item Checkbox and radio button labels generally go after the form item rather than before it. This means you can wrap the entire form item with your label tag, for better accessibility. You can add explanatory text to the left-hand table cell if it helps your user understand the form element’s purpose. Set properties in the Property Inspector: Checked value: This is the info that will be submitted if the user checks the box. It doesn’t have to match the label. The label is for the user, the checked value is for the site owner. Note that checkboxes aren’t submitted unless they are checked … which means the checked value field should usually be an affirmative answer. Example: a check box with the label “Send me your newsletter” could have a name of “newsletter” and a checked value of “yes” or “subscribe”. The name/value pair sent by the form handler would then be “newsletter: yes” or “newsletter: subscribe”. Initial state: determines whether the checkbox will be checked or unchecked when the page loads. Again, use this thoughtfully: generally you want to let your user opt in rather than opt out. Don’t make them uncheck a bunch of stuff before they can submit the form. 5 Web 130 – Web Design with Dreamweaver © 2009-2013 Raven Gildea Forms Checkbox Group In many cases, you’ll want to insert a group of checkboxes. With a checkbox group, the user can check more than one option. For example: Send me updates about: __ Products __ Special offers __ Events Remember, the name/value pair will be passed by your form handler to your email message, so be sure to choose names and values that will make sense to a human. IMPORTANT NOTE: If you are using Raven’s form handler, your checkbox group name must end in square brackets, like this: name="updates[]"to allow the user to select more than one checkbox. The form handler will then send multiple checked values as an array. So your labels, names and values might be: Label Products Special offers Events Name updates[] updates[] updates[] Value products offers events If the user selects Special offers and Events, the name/value pairs sent by the form handler would be: updates: offers, events In the checkbox group dialog box, fill out: Name: enter the group’s name here, and DW assigns it to each button in the group. Don’t forget to include square brackets at the end of your group name! You can use the + and – buttons to add or subtract buttons from your group. Label: Each individual button gets its own label. This is the text the user will see on the page. Value: This is the checked value, the info that will be submitted if the user checks the button. It doesn’t necessarily have to match the label. It just has to make sense, when paired with the group name, to the person reading the form handler’s email message. 6 Web 130 – Web Design with Dreamweaver © 2009-2013 Raven Gildea Forms Layout: I recommend selecting Lay out using line breaks to avoid having DW create nested tables. This option is the easiest to modify. If you want your checkboxes in a row instead of a column, just remove the <br> tags from your code. Insert a checkbox group and check your code. Note that each checkbox has the same name, but they each have a unique id. If you want to change the id assigned by Dreamweaver to something that is more meaningful to you, feel free, but make sure that each checkbox in the group keeps the same name as the others. Inserting Radio Buttons DW has a radio group icon and a radio button icon. I like to add them as a group, since you’ll never have just one radio button. When you use the group icon, DW gives all the buttons in the group the same name, which they need to have in order to function. If you do this, you’ll have to add the (optional) access key and tab index by hand if you want them. Alternately, you can add radio buttons one at a time with the radio button icon. If you do it this way, you get an accessibility dialog with each button you add, but you’ll need to be sure you give them all the same name. In the Radio Group dialog: Name: enter the group’s name here, and DW assigns it to each button in the group. Radio buttons only allow one choice, so the square brackets aren’t needed at the end of the group name. You can use the + and – buttons to add or subtract buttons from your group. Label: Each individual button gets its own label. This is the text the user will see on the page. Value: This is the checked value, the info that will be submitted if the user checks the button. It doesn’t have to match the label. The label is for the user, the checked value is sent to the form handler. Layout: I recommend selecting Lay out using line breaks to avoid having DW create nested tables. This option is the easiest to modify. If you want your radio buttons in a row instead of a column, just remove the <br> tags from your code. 7 Web 130 – Web Design with Dreamweaver © 2009-2013 Raven Gildea Forms In the Property Inspector: You can set one radio button to be initially checked when the page loads. Use this sparingly: once a button is checked, the user can’t return to having the entire group unchecked. Consider giving your user a neutral value as one option. Example Would you like us to send you: __ Occasional spam __ Frequent spam __ Tons of spam __ none of the above Select Boxes These are called “List/Menu” in Dreamweaver, but are technically the HTML <select> element, and are universally known outside Dreamweaverland as Select Boxes. Dreamweaver CS5+ have been updated to refer to them as Select (List/Menu). If you want to look up information about them on the Internet, “select box” is what you’ll want to enter as your search term. DW Lists and Menus are essentially both select boxes. A Menu is a select box that opens a pop-up menu when clicked, and only lets the user select one item (i.e. the state you live in). A List is a select box that appears as a scrolling list, and can be set to allow the user to Ctrl + click to select multiple items. IMPORTANT NOTE: If you are using Raven’s form handler, your List’s select box name must end in square brackets, like this: name="choices[]" if you want to allow the user to select more than one option. If you need a select box to list the US states, don’t build it by hand … code ready to copy and paste is available on the internet. However, note that many of these don’t include the District of Columbia, which isn’t a state but does have residents. If you want it to appear in your list, you may need to add it by hand. Adding a Menu: In DW, a Menu is a select box that only displays one option on page load. When the user clicks on the select box, they’ll get a pop-up menu showing all their options. The user can only choose one option from the menu. Place your cursor in your document, and use the insert menu or the insert bar to Insert > List/Menu. In the List Values dialog, enter your desired options. 8 Web 130 – Web Design with Dreamweaver © 2009-2013 Raven Gildea Forms If you are doing the 50 states thing, it’s way easier to copy and paste directly into code view. Use the List Values dialog for short lists of items you’ll be entering by hand. But … don’t use states for your select element on your homework: create yours from scratch. As usual, Item Label is the text the user will see, and Value is the information that gets submitted with the form. If you don’t specify a value on a select box, the form will submit the label text as the value. The + and – buttons let you add and subtract items. The arrow buttons let you move a selected item up or down the list. In the Property Inspector: The name of your select box will appear in the field on the far left, under the words “List/Menu”. Type: lets you switch from Menu to List or back. Try it, and check out what happens to your code as you do. List Values: brings back the List Values dialog, so you can make more edits. Class: lets you apply any pre-existing CSS class to your select box. Initially selected: This will be the item the user sees in the select box when the page loads. Consider including a neutral first option, such as “Choose one” and making that the option that’s initially selected. Adding a List: In DW, a list is a select box that appears as a scrolling list rather than a pop-up menu. Lists give you the option of allowing your user to select more than one item. It’s a good practice to include instructions that tell your users to Ctrl click (Cmd click on a Mac) to select multiple items. Adding a List is the same as adding a Menu, until you get to the Property Inspector. Here, select “Type: List”. Now two formerly grayed-out options become available: Height: This determines how many of your listed items will be visible in the list at once. If you have more items than can fit in your height, you’ll get a scroll bar. (For Menus, this field is blank and only one item is visible when the page loads. Clicking in the select box on a Menu gives you a pop-up menu.) 9 Web 130 – Web Design with Dreamweaver © 2009-2013 Raven Gildea Forms If you leave the height field blank, the browser determines how many items are visible at once, and you won’t necessarily get a scrolling list. Be sure to choose a height number large enough to be useful for the user. Selections: Choose Allow Multiple if you want to let your user select more than one item. Don’t forget to end your select box name in square brackets, like this: name="choices[]" if you want to allow the user to select more than one option. New HTML5 Form Elements HTML5 has a number of nifty new form elements and attributes. While they are well worth exploring, I strongly recommend getting the form basics nailed down before you go crazy with them. The two we will be covering in this class are the email element and the required attribute. Email The email field is perhaps the most important element in any contact form, as that’s how you will respond to your site visitor’s message. In XHTML 1.0, email addresses were collected with the lowly text input. HTML5 offers a new email input, but DW CS6 doesn’t include it in the Insert Panel. <input type="email" name="email" id="email" /> The name and id could actually be anything you like: the type="email" is what makes this an email field. If you like, you can insert a text input and then change the type to email. Browsers that support HTML5 will check to be sure any text in this field fits a standard email format. In browsers that don’t support HTML5, this field will default to a text field. Required We’ll often want to make certain fields required. In HTML5, this is as simple as adding the “required” attribute to our input tag: <input type="email" name="email" id="email" required /> The form will not submit without something entered into required fields. In the case of the email input, the text entered must also be in a valid email format. Whenever you make a form field required, it’s a good practice to let your user know before they hit the submit button: 10 Web 130 – Web Design with Dreamweaver © 2009-2013 Raven Gildea Forms <tr> <td class="form_labels"><label for="email">Email: (required)</label></td> <td><input type="email" name="email" id="email" required /> </td> </tr> Adding a Button Your form is pretty useless unless the user can send it to your server’s form handler: for this, you need a button. Insert a button using the Insert bar or the Insert menu. You don’t need to give your button a label: the button’s value will be printed on it. You can just dismiss the accessibility dialog. The Property Inspector will show just a few button properties: Button name: This will be submitted with your form, but won’t likely convey any useful information. If your button has a name attribute, you’ll get the name/value pair in your form handler’s email: button: submit. You can leave the name attribute off your button if you like: the button will still work. I recommend leaving it off. Value: Whatever you put in this field will appear on the button. Action: Submit form does the obvious. Reset form returns the form to the initial values it had when the page loaded. This can be useful if you’re using the form to have your user update their profile, but is probably not that useful if resetting clears the form. None allows you to attach JavaScript behaviors to the button. Instead of interacting with a form, a button set to none can be used to trigger an action, such as opening a new window, starting or stopping an animation, etc. Styling a Form Form elements can be styled by adding CSS rules directly to their tags, such as <legend> or <fieldset>, to their IDs, or to any classes you’ve assigned them. 11 Web 130 – Web Design with Dreamweaver © 2009-2013 Raven Gildea Forms Test Your Form! The most common problem I see with forms is that the emailed results don’t make any sense to a person who isn’t looking at the form itself. Whenever you build a form, test it several times, sending yourself several different responses. Try checking all the checkboxes. Try checking different ones. Try checking all the radio buttons. (If you can, your radio buttons don’t all have the same name.) Read the email results, and see if they make sense. Can you figure out which items you selected, without looking at the form? And, of course, you need to test your form to see whether it actually takes you to the thank you page. If it doesn’t, there is a problem with the thanks page path on your formhandler. You won’t know if your form works until you test it. 12