HTML Form Example

This file is a example of all the basic GUI element of HTML form. View Source to see the source code.

A form is done by the tag FORM. The GUI elements includes text field (plain, textarea, masked/password), check boxes, radio boxes, menu, button. The HTML tags to generate these are: INPUT and TEXTAREA and SELECT, together with various tag attributes. 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:

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

Text Area text field.
default text here.

Married

Selections

single return value selections

Radio buttons (Only one can be seleceted).

Dog Cat Bird

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

multiple return values selections

Check boxes. More than one can be checked.

Dog Cat Bird

Multiple return value using Select tag.

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:

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:

Submt button 3:

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

reset button:

Uploading a file

For client-side form validation using JavaScript, see: js_form_validation.html