Download Forms - Raven Gildea Graphics

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