HTML Form Sample

By Xah Lee. Date: . Last updated: .

This page is a example of GUI elements of HTML form.

Note: the material on this page covers practice before 2007, using CGI script. For modern applications you should use JavaScript to process/send forms instead. 〔►see DOM Scripting Tutorial〕

Submitting Form to Server

A form is done by the form tag. Like this:

<form action="http://example.com/cgi-bin/myProcessFormScript" method="post" enctype="application/x-www-form-urlencoded">
…
</form>

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 generates 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.

see also HTTP Protocol Tutorial

Text Fields

Text Field

Type you name:

HTML code:

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

Masked Text Field

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

HTML code:

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

Text Area Box

HTML code:

<textarea name="user_comment" rows="5" cols="40">default text here</textarea>

Single Return Value Selections

Radio Button

Only one can be seleceted of the same name value.

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

Single check box:

Married

HTML code:

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

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. (on the Mac, hold down ⌘ command.)

<select name="animals" size="6" multiple>
 <option value="dog">dog
 <option value="cat">cat
 <option value="bird">bird
 <option value="pig">pig
 <option value="rabbit">rabbit
 <option value="snake">snake
</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="my_submit">

You 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!">

Uploading a file

Send this file:

HTML code:

<!-- The data encoding type, enctype, MUST be specified as below -->
<form enctype="multipart/form-data" action="xyz.php" method="POST">
<div>
  <!-- MAX_FILE_SIZE must precede the file input field -->
    <input type="hidden" name="MAX_FILE_SIZE" value="30000">
    <!-- Name of input element determines name in $_FILES array -->
    Send this file: <input name="userfile" type="file">
    <input type="submit" value="Send File">
</div>
</form>

Reference

Like what you read? Buy JavaScript in Depth
♥
ohayo — a new type of editor for a new type of Lisp