Brief Introduction
A web page can request input from the user who is browsing the page by way of a form. After the user has finishing filling in the form, the entered data can be processed. For example a form allowing users to comment on something in particular can be created and then send mail to the website owner. A form starts with the tag <form> and ends with the tag </form>.
Textboxes
A textbox can be created as a form and is the default. It consists of a single line text field whose visible size can be set using the size attribute. You can enforce an upper limit on the number of characters that can be entered with the maxlength attribute. The name attribute used to name the field, while the value attribute can be used to initialise the text string shown in the field when the form is first loaded. If you require a text field to be read only i.e. the user cannot alter the text value as it is created by a script or such then the attribute readonly can be used as shown below. (N.B. This doesn't work in Netscape Navigator 4 but will in Netscape Navigator 6+ and MS Internet Explorer)
Example
HTML Code Needed
<input type=text size=20
name=user value="name">
<input readonly type=text size=50
name=user value="you cannot change this value">
Passwords
This is identical to the textbox but prints characters on the screen as asterix's to hide the text from anyone who may be looking.
<input type=password size=20
name=pass value="name">
Checkboxes
This is used for attributes that can take multiple values at the same time. It is represented by several checkbox fields with the same name and a different value attribute. Each checked checkbox generates a separate name/value pair in the submitted data.
<input type=checkbox checked
name=me value=yes>
Radio Buttons
This is used for attributes that can take a single value from a set of alternatives. Each radio button field in the group should be given the same name and radio button require an explicit value attribute. Only the checked radio button in the group generates a name/value pair in the submitted data. One radio button in each group should be initially checked using the checked attribute.
<input type=radio name=age value = "0-10">
<input type=radio name=age value = "11-20">
<input type=radio name=age value = "21-30">
<input type=radio name=age value = "31-40">
<input type=radio name=age
value = "41-50" checked>
Submitting
This defines a button allowing users to submit the form's contents.
<input type=submit value="Submit">
Images
This is used for graphical Submit buttons rendered by an image rather than a text string.
<input type=image src=xmas.gif value="picture" name="image" width="150" height="130">
Resetting
This defines a button that users can click to reset form fields to their initial state
<input type=reset value="RESET">
Using Files
This provides a means for users to attach a file to the form's contents. It is generally rendered by text field and an associated button that when clicked invokes a file browser to select a filename. The filename can also be entered. Just like type=text you can use the size attribute to set the visible width of this field in average character widths.
<input type=file name=photo
size=20 accept="image/*">
Hidden Values
These fields should not be rendered and provide a means for servers to store information within a form. Cookies are the more popular approach now.
<input type=hidden name=ID
value="b214-3454">
Selecting
The SELECT command is used to select one from many or many from many menus. SELECT elements require start and end tags and contain one or more OPTION elements that define menu items.
Specifies a property name that is used to identify the menu choice when the form is submitted to the server. Each selected option results in a property name/value pair being included as part of the form's contents.
Sets the number of visible choices for many from many menus.
Signifies that the users can make multiple selections. By default only one selection is allowed.
When this attribute is present, the option is selected when the document is initially loaded.
Specifies the property value to be used when submitting the form's content. This is combined with the property name as given by the name attribute of the parent SELECT element.
<select name="age">
<option value=a>0-10
<option value=a>11-20
<option value=a>21-30
</select>
Text Areas
TEXTAREA elements require start and end tags. The content of the element is restricted to text and character entries.
Specifies a property name that is used to identify the textfield field when the form is submitted.
Specifies the number of visible text lines.
Specifies the number of visible vertical lines.
<textarea name=address rows=5
cols=40>
Address..............
</textarea>
Mailing Form Content
By using a Textbox form as follows:
<FORM ENCTYPE="text/plain" NAME="test" METHOD='POST' ACTION='mailto:ma71nm@surrey.ac.uk?subject=HTML - Suggestions'>
<INPUT TYPE="text" NAME="name" SIZE=40 VALUE="Your name">
the results when a browser fills in the form are posted to your e-mail address. Of course for this to work, the mail preferences must be set up in the users browser.
© Nigel Martin 2000 ma71nm@surrey.ac.uk Created September 2000 Last Changed 13 April, 2001