Training

• Home
• Training Classes

"Winners make choices,
losers make excuses."
Decide to be a Winner!!!!

± Getting Started

± Phase 1
Planning

± Website Tools

± Phase 3
Conceptual Design

± Helpful Information

± Phase 4
Physical Design

± Phase 5
Testing

± Phase 6
Implement and Market Website

± Other Web Development Items

± Multimedia

± Useful Utilities

± Programming

± Advanced Programming

± Microsoft Office Products

± Computer Maintenance

± Other

---

NOTE: This is a collection of information and links collected over the years that might provide useful information. A Safer Company LLC does not guarantee, endorse or approve any of these links or their scripts. Use these links to other websites at your own risk.

Creating Web Forms

It is a good idea to have a form on your website to collect information from your viewers. A form can format the information that you may need for the viewer to answer any questions that they may have.

It is a good idea to use a wire frame to lay out the design of your form including the questions you want to answer and the order as well as possible answers.

Links

Review Information about Forms and Accessibility:

• w3Schools
• Tizag.com
• W3C - Accessibility Guidelines

Creating a Web Form

1. Open Dreamweaver and start a new page Ctrl n
   1. In the to menu bar, select Insert > Form and you will see a list of form elements.
      
   2. Select Text Field. Dreamweaver prompts you for the Accessibility Attributes:
      
   3. If you have not already set up a form, Dreamweaver will prompt you to add the form tag:
      
2. If you do not have Dreamweaver you can key in the following code:
   <form id="form1" name="form1" method="post" action="">
   <label for="firstname">First Name</label>
   <input type="text" name="firstname" id="firstname" accesskey="f" tabindex="1" size="30" maxlength="50" />
   </form>
3. Note: The <form tag is not visible.
4. There are many type of fields that can be added to a from.
   1. Input field and attributes:
      <input type="text" name="firstname" id="firstname" size="30" maxlength="50" accesskey="f" tabindex="1" />
      • type - determines the kind of input field - text, submit, and password
      • name and id - assigns a name /id to the given field so it can be referenced later
      • size - the horizontal width of the field or the number of characters that will appear in the field
        Note: The default width of a text field is 20 characters.
      • maxlength - the maximum number of characters that can be entered into the field. If the maxlength is greater than the size, all of the characters will not be displayed in the field
      • accesskey - used for accessibility - the letter that can be used to go directly to that field.
        For example: <Alt> f
      • tabindex - the tab sequence when tabbing through the form
5. Use Dreamweaver to add additional fields to this form.
• Textarea
• Checkbox
• Radio Group
• List / Menu
6. Forms must have an action to actually do anything with the data keyed into the form. The action can be
• As simple as a mailto:youemailaddress@yourdomain.com - This method is not the preferred method; it requires that the computer has an email client set up. Example with mailto:
  <form id="form1" name="form1" method="post" enctype="text/plain" action="mailto:jeanie@asafercompany.com ">
• Programming with php, perl, asp, etc are used to program form actions.
7. Always remember to upload your web page to your web hosting and review and test your page to make sure it looks like you expected and that your form works.

top of page

Page last updated: May 31, 2012 10:27 AM