HTML Form Example

Between the opening/closing tag, should be GUI element tags such as {input, textarea, select, …}. These tags draws GUI elements such as {menu, radio button, button, text field, …}.

When user click on the submit button, the data is sent back to the script action="http://example.com/cgi-bin/myProcessFormScript" on server.

The input user generate by submitting a form is a list of name/value pairs. The value is a list if the GUI element is a multiple-result one such as check boxes and multi-selection menu.

The following are GUI elements you can use. Each one has a “name” and “value” attributes. The value of “name” attribute is the name of variable sent to your CGI script, and the value of “value” attribute is a string displayed in browser as the default value/choice.

Text Fields

Text Field

Type you name:

HTML code:

<input type="text" size="40" maxlength="256" name="name" value="Jenny">

Masked Text Field

Masked text field is used for passwords. What use typed won't displayed.

HTML code:

<input type="password" size="40" maxlength="256" name="password">

Text Area Box

HTML code:

<textarea name="comments" rows="10" cols="40">default text here.</textarea>

Check Box

Married

HTML code:

<input type="checkbox" name="myToggle" value="bird">Married

Single Return Value Selections

Radio Button

Radio buttons (Only one can be seleceted).

Dog Cat Bird

HTML code:

<input type="radio" name="pets1" value="dog">Dog
<input type="radio" name="pets1" checked value="cat">Cat
<input type="radio" name="pets1" value="bird">Bird

Popup Menu

Single choice using Select tag.

HTML code:

<select name="pets3" size="1">
<option value="dog">dog</option>
<option value="cat" selected>cat</option>
<option value="bird">bird</option>
</select>

Size attribute must 1, otherwise it's a selection-list and returns a list.

Multiple Return Values Selections

Check Box

Check boxes. More than one can be checked. Value is a list.

Dog Cat Bird

HTML code:

<input type="checkbox" name="pets2" checked value="dog">Dog
<input type="checkbox" name="pets2" checked value="cat">Cat
<input type="checkbox" name="pets2" value="bird">Bird

Multi-Choice Menu

Multiple return value using Select tag. Hold down Ctrl to select more than one item.

<select name="pets4" size="5" multiple>
<option value="dog">dog
<option value="cat">cat
<option value="bird">bird
</select>

Submit Buttons

INPUT with attribute type="submit" draws submit buttons. When these buttons are pressed, the form is sent to the CGI program. The name and value attributes are optional.

Submit button 1:

HTML code:

<input type="submit" name="mysubmit">

One can have multiple submit buttons, with “name” and “value” attributes. The “name” attribute can be the same. The value of the “value” will be shown as the text on button, and is the value string sent to the server.

Submit button 2:

HTML code:

<input type="submit" name="license_agreement" value="agree">

Submit button 3:

HTML code:

<input type="submit" name="license_agreement" value="disagree">

Reset Button

The “type="reset"” shows a button with a special action that tells the browser to reset the form.

<input type="reset" name="reset" value="Reset the Form Now!">

HTML Form Sample

Text Fields

Text Field

Masked Text Field

Text Area Box

Check Box

Single Return Value Selections

Radio Button

Popup Menu

Multiple Return Values Selections

Check Box

Multi-Choice Menu

Submit Buttons

Reset Button

Uploading a file

Reference