HCDE532 » Understanding Forms
A webform on a web page allows a user to enter data that is sent to a server for processing. Webforms resemble paper or database forms because internet users fill out the forms using checkboxes, radio buttons, or text fields.
For example, webforms can be used to enter shipping or credit card data to order a product or can be used to send an email.
Forms generally have two main components to them:
- the structure, or shell that consists of the labels, form fields and buttons
- the script behind the scenes that will allow our form data to be processed
The Basic Form Elements
Forms start out by using the form tag to start the form’s structure, action and method:
1
2
3
|
<form action="form-example.html" method="post">
</form>
|
1. Text Input Boxes
1
2
|
<label for="name">Name:</label>
<p><input name="name" type="text" size="15"></p>
|
2. Password Input Boxes
1
2
|
<label for="password">Password:</label>
<p><input name="password" type="password" size="15"></p>
|
3. Radio Buttons
1
2
3
|
<label for="gender">Gender:</label>
<p><input name="gender" type="radio" value="male"> Male</p>
<p><input name="gender" type="radio" value="Female"> Female</p>
|
4. Check Boxes
1
2
|
<p><input name="spam" type="checkbox" value="yes"> I agree to a bunch of spam from you.</p>
<p><input name="reset" type="reset" value="Reset Form"><input name="submit" type="button" value="Submit Form"></p>
|
5. Select Menus
1
2
3
4
5
6
|
<label for="color">Favorite Color:</label>
<p><select name="color">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select></p>
|
6. Message Fields
1
2
|
<label for="message">Name:</label>
<p><textarea name="message" cols="40" rows="10">Write your message here.</textarea></p>
|
7. Submit & Reset Buttons
1
|
<p><input name="reset" type="reset" value="Reset Form"><input name="submit" type="button" value="Submit Form"></p>
|
See Also: HTML Forms | W3 Schools
Social