All Snippets
Top 100 Snippets

By Language

GBIC >> Source Code >> HTML >> Snippet

10 Forms

..Aside from the simple formatted display of content (fonts, colors, lists, tables), the
most important use of web pages is to provide the ability of a user to input information
for submittal to the web server.  

A web page page can have one or more forms on a page, each acting independently
of each other.

Forms provide several elements for data entry, such a textboxs or dropdown selection
lists.  Once the data is entered into a form, the user can simply press the Submit
button on the form to send the entered data to the server for processing.

HTML itself provides no server-side capability for processing the data.  See the CGI
mini-tutorial for a description of how servers use CGI scripts to process form data.

Here's the HTML code for a form with one of each possible form elements:

< form action = " http://www.somewhere.com/cgiscrip.pl " method = "post/get" >
< input type = "text" name = "lastname" value = "Nixon" size = "30" maxlength = "50" >
< input type = "password" >
< input type = "checkbox" checked = "checked" >
< input type = "radio" checked = "checked" >
< input type = "submit" >
< input type = "reset" >
< input type = "hidden" >
< select >
< option > Apples
< option selected > Bananas
< option > Cherries
</ select >
< textarea name = "Comment" rows = "60" cols = "20" ></ textarea >
</ form >

To email a form, use this version of the form tag:
< form action = " mailto:gbeene@airmail.net " method = "post" enctype = "text/plain"   >

The Method attribute of the < form > tag has 3 values - Post, Get, or Head.  The value
selected must match the requirements of the CGI script on the server.

Input Elements
There are 8 basic attributes that form input elements support.
- name
Gives a name for the input element. It is used by the CGI script on the server to keep the incoming
data separate. All input elements use this attribute.
- type
Determines which of the input elements are displayed (see the full list below).
- value
Determines the initial content of a textbox, hidden, or password input elements. Also defines the label for the submit and reset buttons.
- checked
Determines whether the starting state of a checkbox or radio button is checked.
- size
Determines the display length of an input element (text or password)
- maxlength
    Determines the maximum length of a string that can be captured and sent to the server.
- src
     Used only with the image element, this identifies the source URL of the image that is to be displayed.
- rows, cols
     Used only with the textarea element. Determines the display size of the area where text can be entered.

Now, here are the input elements which can be inserted in a form on a web page:

-Text      < input type = "text" value = "defaulttext" size = "30" maxlength = "100" >
- Checkbox  < input type = "checkbox" checked ">
- Radio Button < input type = "radio" value = "on" >
Allowed attributes: name, type, value. Only one radio button can be selected at time. When you
click on one, all the others become unselected. Each radio button must use the same name attribute.
You can have one or more groups of radio buttons. Simply give each member of the second group
a new name. This will create a second group of radio buttons which acts independently of the first group.

- Password  < input type = "password" value = "defaultvalue" size = "30" maxlength = "100" >
Only "*" characters are displayed but it is NOT encrypted.

- Hidden  < input type = "hidden" value = "secrettext" >
Remember, the hidden element is not displayed but its value is sent to the web server.

-  Image  < input type = "image" value = "Hello" src = "picture.jpg" >
When a user clicks on the image you get the same effect as though the Submit button was pressed. The
location on the image where the mouse was clicked will be sent as part of the form's information.

- Button  < input type = "button" value = "Reset" >
Pressing a standard button will not cause anything to happen unless you use one of the scripting
languages to respond to the Click event. See my
- Reset   < input type = "reset" value = "Reset" >
Sets all the input elements will be set to their "value" attribute value.

- Submit  < input type = "submit" value = "Submit Form" >
Sends all information in the form per the action attribute setting
Note: On a form with only 1 text input element (nothing else, including no buttons), pressing enter
while the cursor is in the text box will cause the form to act just as though Submit button were pressed

Select Element
< select multiple size = "30" >
   < option > dog
   < option > cat
   < option checked > horse
   < option > pig
   < option > cow
</ select >
Dropdown list for selection by user.

Multiple attribute allows more than one item to be selected.

Textarea Element
< textarea name = "yourtext" rows = 5 cols = 20 >
... text content goes here
</ textarea >
Similar to a textbox,