Web-centric Computing

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)

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)

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" />

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

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>

type in here

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
vanilla chocolate strawberry watermelon	sprinkles chips minced garlic chocolate sauce

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" />