HAL-PC Web Technolgies SIG

[ Required ] [ Simple ] [ Controls ] [ Misc. ] [ HTML 4+ Specific ]

Required elements of a form

• Form element <form>

  • defines the area of the form,
  • specifies the program, script or page that will handle/process the submitted form,
  • sets the method for transmitting the output of the form to the server,
  • specifies the character encoding accepted by the server to handle the form by using the accept-charset attribute the creator can restrict the user's ability to enter unrecognized character (not commonly used)

Control elements

• all the elements or fields for user input
  
  Back top

Simplest type of form

• Simple form with minimum requirements:
  • <form action="maillist.asp" method="post">
    <p>
    Name: <input type="text" name="name"><br>
    Email: <input type="text" name="email"><br>
    <p>
    Subscribe to Web Technologies Mail List
    <input type="checkbox" name="subscribe" value="yes">
    <p>
    <input type="submit" name="submit" value="submit">
    </form>
  • Which gives you the following form:

    Name:
    Email: 

    Subscribe to Web Technologies Mail List

    Back to Top

Types of Controls or Elements

Buttons

• Submit
  As the name says this is the button that submits your form. Syntax is <input type="submit" name="submit" value="submit">. You can change the text on a submit button by changing the name attribute.
  
• Reset
  Will reset all controls on the form to their original values. Syntax is <input type="reset" name="reset" value="reset">. You can also change the text on a reset button using the name attribute. For example <input type="reset" name="Start Over" value="reset">
  
• Button
  Unlike the other two types listed above this type has no default behavior. An example of a simple use of this button might be with a script to add the page to a person's favorites folder by calling a javascript with <input type="button" name="Add to Favorites" value="javascript:addbookmark()">
  (This requires a javascript function in the head section and only works in Internet Explorer. For the javascript code click here.)

Image

• Images can be used instead of a button to submit a form. Syntax:
  <input type="image" scr="join-now.jpg" height="15" width="25">

Checkboxes

• Can share one control name,
• Multiple boxes within one control name maybe checked,
• Only a checked box will be submitted.
  

  What is the sex of your children?
  male   female   both N/A	<input type="checkbox" name="male" value="ON"> <input type="checkbox" name="female" value="ON"> <input type="checkbox" name="both" value="ON"> <input type="checkbox" name="na" value="ON">

  Back to Top
  

Radio Buttons

• Share one control name,
• Only one button per control name maybe selected,
• Should have one radio button selected as a 'default'.
• Only the selected button will be submitted.
  

  How many children do you have?
  0     1     2     3     4+	<input type="radio" value="0" checked name="children"> <input type="radio" value="1" checked name="children"> <input type="radio" value="2" checked name="children"> <input type="radio" value="3" checked name="children"> <input type="radio" value="4" checked name="children">

Menu

• Required Attributes:
• option 
  Defines an option within the menu, requires name and value attributes, may include "selected" to set a default. For example:
  <option value="0" selected>None</option>
  
• select 
  Defines a multiple choice menu, the size of the menu and the number of items that the user can select, requires name, size and to allow more than once choice to be selected must include "multiple". For example:
  <select multiple size="4" name="children">
  
• Optional Attributes:
  • optgroup
    Defines a logical group of options and requires the label for the option group. For example:
    <optgroup label="Number of Visits">
    
    
• Example of a menu:
  • <form action="family.asp" method="post" name"family">
    <p>
    <select multiple size="5" name="children">
    <optgroup label="children">
    <option value="0" selected">None</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4+">4 or more</option>
    </optgroup>
    </select>
    
• Would display as:

None 1 2 3 4 or more

Back to Top

Text Input

• This is the default input type, if no input type is specified the control will be a text input box.  Required attribute is name. Syntax is <input name="email">
• Optional attributes include:
  • Maxlength to set the maximum number of characters,
  • Size for the size to be displayed measured in number of characters,
  • value gives you the value which will be displayed in the browser
• Example:
  • Year: <input type="text" maxlength="4" size="4" value="2001">
  Year:

Textarea

• Defines a multiline text entry control. Required tags include
• Example:
  • Description: <textarea name="description" cols="50" rows="5" wrap="virtual">
    

Password

• Uses all of the same display controls as a text input but asterisks or bullets instead of text will be displayed in the entry box. Please note that the typed entry is not encrypted and should not be considered a real security measure.
• Example:
  • Password: <input type="password" name="password">
  Password:

   

  Back to Top

Hidden Controls

• These are input values that are not displayed in the browser. Required attributes are name and value. Hidden fields are generally used to pass information between the client and the server.
• Example:
  • <input type="hidden" name="newdata" value="true">

File

• This allows users to include external files with their form submission. It will be accompanied by a browse button when displayed in the browser. Attributes include name, value, accept="mime type" and text attributes to format the file name box.
• Example:
  • <input type="file" name="file" size="50" maxlength="50" accept="image/jpg, image/gif">
  • 
    
    Back to Top

Misc.

• Label

  • Is used to associate information with one form control more commonly used with id attribute and stylesheets. For example:
    <label for="name">Name: </label>
    <input type="text" id="name" size="50">

  HTML 4+

  • Disabled
    Ddisables the control and the value will not be submitted applies to:
    • <button>
    • <input>
    • <option>
    • <optgroup>
    • <select>
    • <textarea>
    • syntax: <input disabled type="textarea" name="comments" value=" what a useless field">
  • Read Only
    Prevents the user from changing the in a field, applies to:
    • <input type="text">
    • <input type="password">
    • <textarea>
    • syntax: <input readonly type="text" name="user" value="user">
  • tabindex
    Specifies the place for that control in the tab order, applies to:
    • <button>
    • <input>
    • <select>
    • <textarea>
    • syntax: <input type=submit name="submit" value="submit" tabindex="10">
  • accesskey
    Specifies a keyboard shortcut for the control, applies to:
    • <button>
    • <input>
    • <label>
    • <legend>
    • <textarea>
    • syntax:<label for="name" accesskey="N">Name</label>
      <input type="text" name="user" id="name">
  • accept-charset
    Applies only to the form tag, it specifies the character encoding (character set) that the server shall accept as part of the W3C internationalization efforts.
    • syntax: <form name="history" action="history.asp" accept-charset=" iso-8859-1,*,utf-8">
      
  • legend and fieldset  
    Is used  to group controls together designed to aid accessibility for speech/visually impaired browsers. See W3C specs for more information.
   

Back to Top