HTML forms
Forms are the key to interaction on the world wide web and are used for many things on webpages such as e-commerce, guestbook signing, and sending e-mail.
This lesson focuses on:
- The <form> tag
- Form elements
- Resetting a form
- Submitting a form
The <form> tag
The <form> tag is used to create a form. All of a form's elements go in between the <form> and </form> tags.
Attributes of the <form> tag:
-
name
this attribute denotes the name of the form.
-
action
this attribute denotes where the form data will be sent to.
Form elements
NOTE: Most form elements are created with the <input> tag. The form element to display is specified by the <input> tag's type attribute. The <input> tag has no end tag.
Textboxes
Textboxes are used to input small, relatively simple data from the user. Textboxes are created by using the <input> tag and setting its type attribute to "text".
Example:
<form> Name: <input type="text" name="name" /> <br /> E-mail: <input type="text" name="email" /> </form>
Output:
Password fields
Password fields are simply textboxes that will display a special character (usually asteriks) instead of the text that is actually typed. Password fields are created by using the <input> tag and setting its type attribute to "password".
NOTE: While password fields hide data, this data is not encrypted and will be sent as regular text unless the protocol used for transmission is HTTPS and/or the data is encrypted through a scripting language.
Example:
<form> Name: <input type="text" name="name" /> <br /> Password: <input type="password" name="password" /> </form>
Output:
Hidden fields
Hidden fields are fields that are not seen on a webpage.
What is the purpose of using hidden fields?
You can use hidden fields to store data that should not be displayed on a webpage but might have something to do with the individual user (such as in a membership website), or might affect the way a page is displayed (such as the width of a new window)
Hidden fields are created by using the <input> tag and setting its type attribute to "hidden".
NOTE: While hidden fields are not visible on a webpage, they can be seen within the source code for a webpage (along with whatever value they store).
Example:
<form> Name: <input type="text" name="name" /> <br /> E-mail: <input type="text" name="email" /> </form> <input type="hidden" name="firstTimeVisit" value="Yes" /> </form>
Output:
Buttons
Buttons are created by using the <input> tag and setting its type attribute to "button"'. Another attribute that can be used with buttons is the value attribute. The value given to the value attribute is what appears on the button.
Example:
<form> <input type="button" value="Click here for a message" /> </form>
Output:
Textareas
Textareas overcome the textboxes limits by allowing more than a single line of text, and its width and height can be changed as well. Textareas are created by using the <textarea> tag.
Attributes of the <textarea> tag:
-
name
specifies the name of the textarea
-
rows
specifies the number of rows in the textarea
-
cols
specifies the number of columns in the text area
Example:
<form> <textarea name="textarea1" rows="5" cols="20"></textarea> </form>
Output:
Radio buttons
Radio buttons get their name from older car radios where if you pushed one button, the dial moved. When you pushed another button, the first button would pop out and the dial moved to your new choice. Radio buttons act in a similar way. Radio buttons act as a group where only one value can be selected.
Radio buttons are created by using the <input> tag and setting its type attribute to radio. When using radio buttons, you are giving the user a choice of two or more different values, therefore radio buttons should be placed within the same category. This is done by giving a group of radio buttons the same name using the name attribute, but different values. After the tag for the radio button, you place the text that you want to appear next to it on the page.
Example:
Which web browser do you use? <form> <br /><br /> <input type="radio" name="browser" value="Firefox" />Firefox <br /> <input type="radio" name="browser" value="Netscape" />Netscape <br /> <input type="radio" name="browser" value="Opera" />Opera <br /> <input type="radio" name="browser" value="Internet Explorer" /> Internet Explorer <br /> <input type="radio" name="browser" value="Other" />Other <br /> </form>
Output:
Checkboxes
Checkboxes are similar to radio buttons, but with checkboxes you can select more than one option at a time.
Checkboxes are created by using the <input> tag and setting its type attribute to checkbox. Just as with radio buttons, when using checkboxes, you are giving the user a choice of two or more different values, therefore checkboxes should be placed within the same category. This is done by giving a group of checkboxes the same name using the name attribute, but different values. After the tag for the checkbox, you place the text that you want to appear next to it on the page.
Example:
<form> Which genre(s) of books do you like? <br /><br /> <input type="checkbox" name="genre" value="Science_Fiction" /> Science Fiction <br /> <input type="checkbox" name="genre" value="Adventure" /> Adventure <br /> <input type="checkbox" name="genre" value="Comedy" />Comedy <br /> <input type="checkbox" name="genre" value="Mystery" />Mystery <br /> <input type="checkbox" name="genre" value="Suspense" />Suspense <br /> </form>
Output:
Drop-down lists
The drop-down list is a box which looks like a textbox but is much more powerful. The drop-down list stores a list of items from which an item can be selected.
The drop-down list is created using the <select> tag, and items are added to it using the <option> tag. The name of a drop-down list is specified using the name attribute of the <select> tag.
Example:
<select name="objects"> <option>Chair</option> <option>Box</option> <option>Door</option> <option>Ladder</option> </select>
Output:
Try to select an item from this drop-down list.
File upload buttons
File upload buttons allow the user to upload files such as images, sounds, movies, text documents, etc. File upload buttons are created by using the <input> tag and setting its type attribute to "file".
Example:
<form> <input type="file" /> </form>
Output:
Notice how the file upload button automatically displays a textbox to the left of it. This textbox will display the absolute path of a file that the user tries to upload.
Resetting a form
Resetting a form refers to setting all the fields of a form to their default values (usually blank). To be able to reset a form, you have to create a reset button. Reset buttons are created by using the <input> tag and setting its type attribute to "reset". Another attribute used with reset buttons is the value attribute. The value given to this attribute will be what appears on the reset button.
Example:
<form> Name: <input type="text" name="name" /> <br /> E-mail: <input type="text" name="email" /> <br /><br /> <input type="reset" value="Reset" /> </form>
Output:
Enter some data into the form and click the "Reset" button. The form should then be reset.
Submitting a form
To be able to submit a form, you have to create a submit button. Submit buttons are created by using the <input> tag and setting its type attribute to "submit". Another attribute used with submit buttons is the value attribute. The value given to this attribute will be what appears on the submit button.
Example:
<form name="data" action="formsubmitted.php"> <input type="text" name="text" /> <br /><br /> <input type="submit" value="Submit" /> </form>
Output:
Examples
Form buttons
This example demonstrates creating form buttons.
Form checkboxes
This example demonstrates creating form checkboxes.
Form fieldset
This example demonstrates setting a fieldset around a form.
Form hidden fields
This example demonstrates creating hidden fields in a form.
