Building FORMS In
•
When a visitor enters information into a web form displayed in a web browser
and clicks the submit button, the information is sent to a server where a
server-side script or application processes it. The server responds by sending
the processed information back to the user (or client), or by performing some
other action based on the form’s contents.
Marion Setton
1
Using forms
Please note that forms require an external
script to actually use them to send
information. We will address that later on.
• Open the contact page. Click into the text
or editable area (if you are using a
template.)
• Type: “Please give us your feedback”, and
press enter.
• Select all the text and click the increase
indent twice in the properties panel.
Select Insert > Form, or select the Forms category in the Insert bar and click
the Form icon. In Design view, forms are indicated by a dotted red outline. If
you don’t see this outline, select View > Visual Aids > Invisible Elements.
Click insert, form, text field (area that will be sent). A dashed red box will appear.
•
•
•
•
Type name (lower case) in the ID box, and Name
in the Label edit box.
ID is what the script uses to communicate with the
form.
Label is the word that appears on the page.
Screen reader can read the label. Attach the label
to the tag
Repeat for Email address
2
•Insert, form, text area, ID: comments, Label: Comments.
Add the Submit button:
Insert, Form, Button. Enter Submit for the ID & nothing for the label, OK
3
Create Form with Tables
• Open a page
from your
template and
name it
membership
• Create a table,
width 90%, 2
columns and 9
rows, cell
padding 6
• Select the arrow
at the top on the
1st column –
align right, 2nd
align left.
4
Create a list
•
Select a list/menu. Menu: only one item, List can be multiple items. User
must click the ctrl to select more than one.
• ID – Become a volunteer. Create list with Choose as the initially selected
button.
Create a Radio Group
Name it: Choose button. Label is what they see, value is what you see in
the email
Create a check box
Insert check box. You can leave it checked.
Reset and Submit buttons
Choose button, ID – clear, no label. Ok
Select the button, change the value to reset. Action reset
Select the button, ID submit, change value to Send form.
Select the <form tag>
The action will look like http://www.beavercheese.com\cgi_bin
Validate fields
Go to behaviors + validate form
• Decide on which fields are required
• Make email field specific
5
Create an HTML form
•
In the Form Name box, type a unique name to identify the form. Naming
a form makes it possible to reference or control the form with a scripting
language, such as JavaScript or VBScript. If you do not name the form,
Dreamweaver generates a name using the syntax form, and increments the
value of n for each form added to the page.
•
In the Action box, specify the page or script that will process the form data
by typing the path, or clicking the folder icon to navigate to the appropriate
page or script. You can send the viewer to a thank you page.
•
In the Method pop-up menu, specify the method to transmit the form data
to the server. Set any of the following options:
– The GET method appends parameters to the requested URL. The parameters are
in turn visible to anyone viewing the page. The GET method should be used for
search forms.
– When using the POST method, parameters are sent to the web server as part of
the document's header, and are not visible or accessible to anyone who's
viewing the page using standard methods.
6
•
•
•
Do not use the GET method to send long forms. URLs are limited to 8192 characters. If the amount
of data sent is too large, data will be truncated, leading to unexpected or failed processing results.
Dynamic pages generated by parameters passed by the GET method can be bookmarked because all
the values needed to regenerate the page are contained in the URL displayed in the browser’s Address
box. In contrast, dynamic pages generated by parameters passed by the POST method cannot be
bookmarked.
If you collect confidential user names and passwords, credit card numbers, or other confidential
information, the POST method may appear more secure than the GET method. However, the
information sent by the POST method is not encrypted and can easily be retrieved by a hacker. To
ensure security, use a secure connection to a secure server.
– (Optional) In the Enctype pop-up menu, specify the MIME encoding type of the data submitted
to the server for processing. The default setting of application/x-www-form-urlencode is
typically used in conjunction with the POST method. If you are creating a file-upload field,
specify the multipart/form-data MIME type.
– (Optional) In the Target pop-up menu, specify the window in which to display the data returned
by the invoked program. If the named window is not already open, a new window with that
name opens. Set any of the following target values:
•
_blank
•
_parent
Opens the destination document in the parent window of the one displaying the
current document.
•
_self
was submitted.
•
_top
Opens the destination document in the body of the current window. This value
can be used to ensure that the destination document takes over the full window even if the original
document was displayed in a frame.
Opens the destination document in a new unnamed window.
Opens the destination document in the same window as the one in which the form
7
•
•
•
•
•
Insert form objects in the page:
– Enter a name for the object in the Property inspector. Every text field, hidden
field, check box, and list/menu object must have a unique name that identifies
the object in the form. Form object names cannot contain spaces or special
characters. You can use any combination of alphanumeric characters and an
underscore (_). The label you assign to the object is the variable name that
stores the value (the entered data) of the field. This is the value sent to the
server for processing.
Note: All radio buttons in a group must have the same name.
– To label the text field, check box, or radio button object on the page, click
beside the object and type the label.
Adjust the layout of the form. Use line breaks, paragraph breaks, preformatted text,
or tables to format your forms. You cannot insert a form in another form (that is,
you cannot overlap tags), but you can include more than one form in a page.
When designing forms, remember to label the form fields with descriptive text to
let users know what they’re responding to—for example, “Type your name” to
request name information.
Use tables to provide structure for form objects and field labels. When using tables
in forms make sure all the table tags are included between the form tags.
8
Get a free HTML form, Web form
or PHP form for your website!
• http://www.emailmeform.com/
• Form Builder
• Using our intuitive and easy to use WYSIWYG online
form builder it allows you to build any type of form to help
you collect data online. The drag and drop functionality
allows you to quickly build your form using popular web
browsers such as IE 7&8, Firefox, Safari, and Chrome.
You can add various types of form fields (text fields,
dropdowns, radio buttons, check boxes, etc.) to your
form. Best of all, you can use the form builder without
having to know any HTML or scripting languages. It's as
easy as 123.
9