Difference between revisions of "Forms"

From WolfTech
Jump to navigation Jump to search
 
Line 1: Line 1:
    * Place labels for text controls adjacent and left of the form control
+
* Place labels for text controls adjacent and left of the form control
    * Place the labels for radio buttons and check box to the right of the form control
+
* Place the labels for radio buttons and check box to the right of the form control
    * Do not use structural elements like table cells to separate the label from the form control.
+
* Do not use structural elements like table cells to separate the label from the form control.
    * Explicitly associate the label with the form control
+
* Explicitly associate the label with the form control
          o Set each form control with a unique id value
+
      o Set each form control with a unique id value
          o Use the <Label for="form_control_id_value" > to explicitly associated the label with the form control.  
+
      o Use the <Label for="form_control_id_value" > to explicitly associated the label with the form control.  
    * Avoid using images as labels for form controls, if they are used, be sure to use them within the <label> element and include the alt attribute
+
* Avoid using images as labels for form controls, if they are used, be sure to use them within the <label> element and include the alt attribute
    * Place a text prompt in the text entry and selection controls
+
* Place a text prompt in the text entry and selection controls
    * Use title attribute to increase functionality by giving additional supplemental information for the form control
+
* Use title attribute to increase functionality by giving additional supplemental information for the form control
    * Organize form controls into related groups. Use <fieldset> element to group form controls and the <legend> element to label the group
+
* Organize form controls into related groups. Use <fieldset> element to group form controls and the <legend> element to label the group
    * If needed use <tabindex> to establish the tab order of the entries
+
* If needed use <tabindex> to establish the tab order of the entries
    * Use CSS to control the visual appearance of the form
+
* Use CSS to control the visual appearance of the form

Revision as of 15:06, 18 July 2006

  • Place labels for text controls adjacent and left of the form control
  • Place the labels for radio buttons and check box to the right of the form control
  • Do not use structural elements like table cells to separate the label from the form control.
  • Explicitly associate the label with the form control
      o Set each form control with a unique id value
      o Use the <Label for="form_control_id_value" > to explicitly associated the label with the form control. 
  • Avoid using images as labels for form controls, if they are used, be sure to use them within the <label> element and include the alt attribute
  • Place a text prompt in the text entry and selection controls
  • Use title attribute to increase functionality by giving additional supplemental information for the form control
  • Organize form controls into related groups. Use <fieldset> element to group form controls and the <legend> element to label the group
  • If needed use <tabindex> to establish the tab order of the entries
  • Use CSS to control the visual appearance of the form