Client-Side

The client-side is what's on the user's browser and machine. It's what they see (largely a matter of text, images, video, XML, HTML, and CSS) and the code on the page (usually JavaScript). This section deals primarily with the HTML tags related to forms and the JavaScript for validating forms.

There are 10 HTML tags for forms. Some are for grouping or meta data, but the primary form tags are "controls", i.e. a thing that a user can see and interact with.

• Metadata form tags
  • <form>. A form is a section of a document that can hold regular HTML tags but is especially used for collecting data from a user via "form controls". If the action attribute is set to GET, then the data is sent as a query string, i.e. appended to the URL with a "?". If the action attribute is set to POST, then the data is sent as a message. In general, GET is used for data that is smaller (under roughly 2,000 characters [http://support.microsoft.com/?id=208427]), idempotent, and OK to cache.
    • <fieldset>.  The controls in a form may be thematically grouped into fieldsets
      • <legend>. Optionally each fieldset may have a descriptive legend.
    • <label>. Each control may have a label describing it and displayed to the user. Labels also "enlarge" the clickable area of a control.
• Form control tags
  • <input />. This is a very flexible form control that has 10 possible values for its TYPE attribute.
    • Text boxes
      • <input type="text" />. The default, a standard textbox.
      • <input type="password" />. A textbox that does not display what is entered.
      • <input type="hidden" />. A text box that is not displayed at all. Usually used for data that the user does not need to see.
    • Multiple choice
      • <input type="checkbox" />. Any checkbox in a group of checkboxes with the same NAME can have its CHECKED attribute as true.
      • <input type="radio" />. Only one radio in a group of radios with the same NAME can be have its CHECKED attribute as true.
    • Buttons
      • <input type="submit" />. A button that submits the form for processing.
      • <input type="reset" />. A button that resets all the form controls to their default values.
      • <input type="image" />. A button that submits the form for processing that can use the SRC and ALT attributes to show an image instead of a default button.
      • <input type="button" />. A button with no default behavior.
    • <input type="file" />. A textbox and button. The user may enter the file path in the textbox or use the browse button to locate the file via the operating system.
  • <button>. A button element has slightly more flexibility than an input element of type submit, reset, image, or button. EG: A button element may contain a img element.
    • <button type="submit">. A button that submits the form for processing.
    • <button type="reset">. A button that resets all the form controls to their default values.
    • <button type="button">. A button with no default behavior.
  • <select>. Option selector, usually a list of selectable choices.
    • <option>. This is a choice within a select control.
      • <optgroup>. The options may be grouped together logically within in a select.
  • <textarea>. A multi-line text field.

Most form controls correspond to a single name/value pair. EG: The Email text control may have a field name of "Email" and a user entered field value of "JohnSmith@gmail.com". However, the checkbox and select/option controls are different in that they can represent an array or list of data. EG: The Pet checkbox control may have field name of "Pet" and user chosen values of "Cat" and "Dog". Note that although a radio control provides several choices, only one can be chosen.

If you were to access a form with all the form elements above (with something like for(var i=0; i<document.form[0].elements.length; i++){alert("Element name: "+document.form[0].elements[i].name+ " Element Type: " + document.form[0].elements[i].type + "\n";), then you would get the following element types: text, password, hidden, checkbox, radio, submit, reset, button, image, file, select-one, select-multiple, and textarea.

Client-side validation is usually done with JavaScript. While client-side validation is useful for making sure that user fill out the form properly, malicious hackers can skip the clien-side validation and pass values directly to the server. Hence there server-side validation is needed as well.

Page Modified: (Hand noted: 2008-03-10 18:56:24Z) (Auto noted: 2008-03-24 19:29:20Z)