Web-centric Computing

Example Code

Forms

Here are examples of some of the most common form input elements

  1. Single line text input
  2. Multiple choice
  3. File selection
  4. Value the user cannot see
  5. Multiple line text input
  6. Multiple options
  7. Controlling the form
  8. See Also
<form action="/~jamie/cgi-bin/3172/form/controls-example.cgi" method="get">
  1. Single line text input

    Normal single line text input
    type="text"
    size="x" is initial width in characters
    maxlength="y" is maximum numbers of characters
    value="foo" is (optional) initial value
    name="foo" is name used in CGI and DOM

    example:
    Name:&nbsp;<input type="text" name="intext" />
    Name: 

    Non-echoing single line text input
    type="password"
    similar to type="text"

    example:
    Password:&nbsp;<input type="password" name="inpass" />
    Password: 

    Multiple line text input
    use textarea (see example below)
  2. Multiple Choice

    Mutually exclusive choices (selected by button)
    type="radio"
    size="x" is initial width in pixels
    value="foo" is required to specify value it encodes
    name="foo" is name used in CGI and DOM
    checked="checked" (optional) indicates that this control is selected by default

    examples:
     True:&nbsp;<input  type="radio" name="answer" value="true" />,
     False:&nbsp;<input type="radio" name="answer" value="false" />,
     Mu:&nbsp;<input    type="radio" name="answer" value="mu" />
    True: , False: , Mu: 

    Multiple non-exclusive choices (selected by button)
    type="checkbox"
    size="x" is initial width in pixels
    value="foo" is required to specify value it encodes
    name="foo" is name used in CGI and DOM
    checked (optional) indicates that this control is selected by default

    examples:
    C:&nbsp;<input    type="checkbox" name="lang" value="C" />
    C++:&nbsp;<input  type="checkbox" name="lang" value="CPP" />
    Java:&nbsp;<input type="checkbox" name="lang" value="J" />
    C:  C++:  Java: 

    Multiple choices (not selected by button)
    use select (see example below)
  3. File selection dialogue

    File list
    type="file"
    size="x" is initial width in pixels
    value="foo" is initial value of filename
    name="foo" is name used in CGI and DOM

    example:
    <input type="file" value="*.html" name="infile" />

  4. Value that the user cannot view

    Hidden control
    type="hidden"
    value="foo" is value passed in CGI
    name="foo" is name used in CGI and DOM

    example:
    <input type="hidden" name="page" value="data" />

    Here are examples of some of the most common non-input form elements

  5. Multiple line text input

    Textarea
    rows="x" is number of rows to display, in characters
    cols="y" is number of columns to display, in characters
    name="foo" is name used in CGI and DOM
    block level (contents is initial value)
    example:
    <textarea rows="2" cols="40" name="textarea"
              >type in here</textarea>

  6. Multiple options (chosen by name)

    Select
    size="rows" is number of rows to use, if presented as a list box
    name="foo" is name used in CGI and DOM
    multiple (optional) allows more than one choice

    examples:
     <fieldset
           style="border: medium groove black; margin-left: 1.5ex">
      <legend>Ice Cream Selection</legend>
      <table border="1">
       <tr><th>no multiple, no size</th>
       <th>multiple and size</th></tr>
       <tr><td valign="top">
         <select name="flavour">
           <option value="a">vanilla</option>
           <option value="b">chocolate</option>
           <option value="c">strawberry</option>
           <option value="d">watermelon</option>
         </select>
       </td>
       <td>
         <select name="toppings"
                 size="4" multiple="multiple">
            <option value="1">sprinkles</option>
            <option value="2">chips</option>
            <option value="3">minced garlic</option>
            <option value="4">chocolate sauce</option>
         </select>
       </td></tr>
      </table>
     </fieldset>
    Ice Cream Selection
    no multiple, no size multiple and size

  7. Controlling the form

    Reset
    input type="reset"
    size="x" is initial width in pixels
    value="foo" is (optional) text label in button
    name="foo" is name used in CGI and DOM

    example:
    <input type="reset" value="Clear" />

    Send
    input type="submit"
    size="x" is initial width in pixels
    value="foo" is text (optional) label in button
    name="foo" is name used in CGI and DOM

    example:
    <input type="submit" value="Submit" />
</form>

See Also

For advanced students: Issue 152 (30 April 2009) of web designer magazine had a tutorial showing how to combine many CSS and Ajax techniques into somewhat-accessible forms.  Although the examples use the Dreamweaver software, students in this course should have little trouble understanding how to implement the techniques without requiring that software.


http://www.cs.dal.ca/~jamie/course/CS/3172/examples/CGI/forms/controls-example.html
Version:
06 April 2005 (See also added 11 September 2009)/dd>
Author:
J. Blustein <jamie@cs.dal.ca>

Valid XHTML 1.0!