Creating HTML Forms

Form Creation

First you should add form tag. The form tag has several attributes which will allow you to modify how the form works.

• id/name – used if you are using JavaScript to modify the tags
• action – the location (URL) of the form processor. If you leave action blank, it will send the file to your current location.
• method – how information will be sent from one location another
  • get – the form information is placed into the URL of the processor.
    ex: http://access2learn.com/form.php?name=walter+wimberly
    This also runs the risk of making the URL too long, as URLS can only be 4,000 characters total.
    It also makes things like passwords, credit card numbers, and similar private information unsafe as they are posted in clear view to anyone shoulder surfing.
  • post – the form information is placed into the http headers so they aren’t seen by people. This adds a very basic level of security for your users. Likewise, it doesn’t have the 4K limit in length. So now you don’t have to worry about how many fields are in your form, and you can even upload files.

There are some lesser known/used attributes that are also available. These include:

• target – if you want to send the form to open another window. (Because I know you aren’t using frames are you?) It is assumed that it is going to the same frame if left blank
• encode – if you need to encode your data a certain way
• class – if you want to apply styles, or add a sub style to the class.

Example:

  ... form fields displayed ...

Adding Elements

Laying out the style of the form is a design decision, and it should be tested against users to determine if it is usable. A couple of hints to keep in mind to make your users more likely to fill out your forms.

1. Use meaningful labels to describe what the user should input into the form.
2. Limit the user’s choices if possible to ensure accurate data collection. This could be done with things like radio buttons, drop-down lists, menu items, etc. Not everything has to be a text box.
3. Group related items together. This goes back to the basic design principles that we use.
   
4. Let people know if something is required. You can do this by changing the color of the label, putting a star beside it, etc.
5. Align your elements for readability. This goes back to the basic design principles that we use.
   

There are very few tags actually used in making up forms:

• input – used for everything from passwords, to text boxes, to radio buttons. Use the type attribute to define the type of input selector (text [default], password, check box, radio, etc.)
• select – used to create menus and lists
  • option – a tag used to provide the items of the menu/list
• textarea – used to create large text sections
• fieldset – this is not a way to get input, but is used to group items together.

Don’t forget the final tag, an input of type “submit”. This “submits” the form information to the form processor. Without it, minus some special JavaScript, your forms would not submit, and all would be for not.

Full Form Example:

  
My First Form
    

      Name:
      
    
    

      EMail:
      
    
  

    Like Site?
    
      A Little
      Some
      More than some
      Love it
    
  
  
Request Feedback?
    
      
    Yes
    
       
     No
  
  

    Comments:
    
  
  

     
    
  

Creating HTML Forms was originally found on Access 2 Learn