HTML offers a number of widgets that can be used in forms to collect user information and forward it.
The <input> Element
The <input> element has no closing tag and uses the type="type" attribute to specify which type of control to use where "type" is one of the following.
Text which is the default if no type is specified. It produces a single line text field for user input.
Password which is the same as the text element except the text appears as asterisks when entered to avoid other people viewing passwords etc.
The hidden field which doesn't show on the form so is useful for passing information to the server using the value attribute.
Radio creates two or more options as buttons allowing only one button to be chosen. All the buttons have the same name attribute but different value attributes allowing a name/value pair to be passed from the chosen radio button.
Checkbox creates a box that can be checked or left unchecked. A checked checkbox generates the value="on".
File which creates a text box that allows the user to enter the path and name of a file on their machine for uploading to the server. The control includes a browse button that allows the user to browse their machine for the file instead of typing in its path.
Reset creates a button that when clicked resets all the fields in the form to whatever the default is (usually blank). The value attribute changes the wording on the button which by default says Reset.
Submit creates a button that sends the form data to the server when clicked. The value attribute changes the wording on the button which by default says Submit.
Button creates a button that can be linked to a script.
<input> Attributes
Input allows a number of attributes some of which are shown below.
Name specifies the name of the control where name="name" and is passed to the server as part of a name/value pair. The name for each control should be unique except in the case of radio buttons.
Checked causes a checkbox or radio button to be selected as "on" when the form loads. This allow a particular value to be set as a default.
Size can be used along with the input text element as size="n" where "n" is how many characters wide the field should be.
Maxlength can also be used along with the input text element as maxlength="n" where "n" is the maximum number of characters that the user is allowed to enter into the field.
Value sets the default value of text or other controls and will be displayed when the form first downloads. This value or the value that user chooses to enter will be passed as part of a name/value pair. It will also set the value of a hidden control.
Disabled grays out the control and disables it. It's normally used along with client side scripting, such as JavaScript, to enable or disable the control depending on some other action on the form.
Class tells the browser to render the control in a named style and takes the form class="my_form_style" where "my_form_style" is a previously defined style.
A Basic Form Example using Input
<form action="myform.php" method="post">
Please tell us your vehicle type:
<input type="text" size="50" maxlength="75" name="vehicle_type">
<input type="submit" name="Send">
</form>
The <textarea> Element
The <textarea> element produces a multi-line text box for user input. This element has a closing tag and any text between the start and end tags will be displayed within the text box when the form downloads.
<textarea> Attributes
Textarea allows a number of attributes some of which are shown below.
Name specifies the name of the textarea where name="name" and is passed to the server as part of a name/value pair. The name should be unique.
Rows set the height of the text area as rows="n" where "n" is the height in characters.
Columns set the width of the text area as cols="n" where "n" is the width in characters.
Class tells the browser to render the textarea in a named style and takes the form class="my_textarea_style" where "my_textarea_style" is a previously defined style.
A Basic Form Example using Textarea
<form action="myform.php" method="post">
<textarea rows="4" cols="30" name="comments">
Text in here will appear in the textarea box.
</textarea>
<input type="submit" name="Send">
</form>
Free Web Design Tutorials
Forms - Input and TextareaSelect ListsFramesetsThe Frame ElementNested FramesetsTargeting FramesInline Frames
Previous - Forms - Basics
Next - Forms - Select Lists 
