Website Forms
 
Network Websites
Corporate website
Beautiful Clip Art
Fast Cars
Video Tiger
Fantasy Art
Beauty & Health
Tips & Tricks

Fast Loading Pages
Glowing Links II
Hide E-mail Address
Javascript Links
Link Colors
Marquees
Navigation
New Window
No Underline Links
Out of a Frame
Page Flash Effects
Preload Graphics Protect Graphics
Redirect Scrolling Javascript
Text Roll-Overs
Tooltip Links
[more tips...]

Tutorials
CSS
Colors
Forms
FTP
Image Maps
Meta Tags
Resources

Web Hosting
Counters & Trackers
Domain Names
Graphics
Web Page Design
Java Script
DHTML

 

Forms Tutorial

Forms are a method of creating interactive pages where the reader can answer questions and send their response to you. Forms are a very complex topic, and cannot be fully covered in one small period, so this will just be a very basic introduction.

At the start of any form area, you must declare that you are making a form, and give some information to the browser about what to do with it. This is done in the form tag, through the two required parameters, action and method.

To create a form which uses the mailto action:

<form action="mailto:Yourname@email.com" method="post" name="My Form" enctype="text/plain">

The action parameter specifies where the results from the form will be sent, and the method parameter specifies how that information will be sent there. At the end of the form, you must close the form tag (</form>).

Inside the Form

Inside of the form, you can specify any kind of HTML codes you wish, but the only ones which will be important for the form are the input types and the submit tags. The name parameter are the headings that appear on the form and help to organize the data within.

The following are different input types:

  • radio - click the appropriate choice of buttons
  • checkbox
  • name - gives a one line box to enter information
  • hidden - important information that is not visible on the screen

An example of a radio box and a checkbox:

Do you like this example? Yes No
Do you understand so far? Yes No

The coding that created the above radio form:

<input type="radio" value="Yes" name="Do you like this?">Yes
<input type="radio" value="No" name="Do you like this?">No

The coding that created the above checkbox form:

<input type="checkbox" value="Yes" name="Do you understand?">Yes
<input type="checkbox" value="No" name="Do you understand?">No

An example of a name input:

Your First Name: 

The coding that created the above name entry blank:

<input name="First Name" size="16">

35 is the width of the input box created.

An example of a textarea input:

Your Comments:

The coding that created the above textarea input box:

Your Comments: <textarea name="Your Comments" rows="5" cols="20">
</textarea>

The box is 5 rows top to bottom, 20 columns left to right. Note that the textarea must be closed afterwards.

An example of hidden text:

<input type="hidden" name="subject" value="My Form Calling">

These are necessary to send the form to the correct recipient with an appropriate subject heading for easy identification.

Select - gives you a menu list to choose from. An example:

Your overall impression of this tutorial was:


The coding that created the above menu selection:

<select name="Impression of Tutorial">
<option value="Very Useful">Very Useful</option>
<option value="Somewhat Useful">Somewhat Useful</option>
<option value="Below Expectations">Below Expectations</option>
<option value="You Really Don't Want To Know">
You Really Don't Want To Know
</option>
</select>

Note that the option tag is closed at the end of each choice, and the select tag is closed at the end of all the choices. The value parameter is the text printed in the menu choices.

Submit buttons - are used to send the information off to wherever it is going. The reset button clears any entered data.

The coding that created the above submit and reset buttons:

<input type="submit" value="submit">
<input type="reset" value="reset">

Full example:

If you'd like to see an example incorporating all of the above, go HERE.

Tutorials

Sponsor

Hot Wedding Ideas

Advertise
Really affordable rates.
Feedback
Comments, suggestions?

 

 

home | tips & tricks | tutorials | tools | resources | contact | advertise
© 2000 - 2001 GT Media Inc. All rights reserved.