HTML Form Sample
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.
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
Text Fields
Text Field
Type you name:
HTML code:
<input type="text" size="40" maxlength="256" name="user_name" value="Jenny">
Password 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.
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.
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
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>
If you have a question, put $5 at patreon and message me.