∑ Home ◇ Math ◇ Computing ◇ Arts ◇ Words ◇ Literature ◇ Music ◆ twitter facebook webfeed
Xah Web Dev Tutorial

HTML Form Sample

Xah Lee, 2005-05, 2010-10-21

Advertise Here For Profit

This file is a example of all the basic GUI element of HTML form.

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

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

Inside the form tag, are tags like INPUT, TEXTAREA, SELECT. These tags are shown in browser as graphical user interface widgets, such as text field, checkboxes (multiple selection), radio buttons and menus (single selection), buttons. When user presses the submit button, the data is sent to the a script to process. The script is specified in the value of the “action” attribute in the form tag.

From the program input point of view, the inputs user generates by submitting a form are just a list of name/value pairs. In the case of GUI element such as check boxes that returns multiple results, the value is a list.

Text Fields

Normal text field: 

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

Masked text field. Use attribute “type=password” to hide user typing: 

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

Text Area text field.

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

Married

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

Selections

single return value selections

Radio buttons (Only one can be seleceted).

Dog Cat Bird 
<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

Single choice using Select tag. (a popup menu if size attribute is 1)

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

multiple return values selections

Check boxes. More than one can be checked.

Dog Cat Bird 
<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

Multiple return value using Select tag.

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

Action buttons

INPUT with attribute “type="submit"” generates 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:

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

One can have multiple submite 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:

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

Submt button 3:

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

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

reset button:

<div><input type="reset" name="reset" value="Do me a favor and reset this form Now!"></div>

Uploading a file

Send this file: 
<!-- 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>

References:

blog comments powered by Disqus