sccc.premiumdw.com

HCDE537 > 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:

1. the structure, or shell that consists of the labels, form fields and buttons
2. 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:

<form action="form-example.html" method="post">
<!-- Form Elements Go Here -->
</form>

1. Text Input Boxes

<label for="name">Name:</label>
<p><input name="name" type="text" size="15"></p>

2. Password Input Boxes

<label for="password">Password:</label>
<p><input name="password" type="password" size="15"></p>

3. Radio Buttons

<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

<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

<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

<label for="message">Name:</label>
<p><textarea name="message" cols="40" rows="10">Write your message here.</textarea></p>

7.  Submit & Reset Buttons

<p><input name="reset" type="reset" value="Reset Form"><input name="submit" type="button" value="Submit Form"></p>

See Also: HTML Forms | W3 Schools

View: http://students.washington.edu/sinkum/a-contact-form-for-your-website/form-example.html

This portion of the Premium Design Works website is written by Mike Sinkula and dedicated to the Web Design & Development students at Seattle Central Community College.