HTML Form Sample

To generate a graphical user interface elements for input, such as buttons, menu, checkboxes, search box, message box, use a combination of:

• input
• select
• textarea

HTML: Input Tag

HTML: Textarea Tag

HTML: Select Tag

Form Tag, Talking to Server

Note: the form tag is old technology, used around 1998 to 2000s, for sending input data to the server in a method called CGI script. Here's description of how it works.

Today, you use JavaScript to capture data and use JavaScript to talk to server. [see DOM Scripting Tutorial]

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">
<!-- input tags here -->
</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.

When a form is submitted, a list of name/value pairs is generated as input to the script.

The value may be a number, a string, or 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

Uploading a 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>