Home arrow HTML arrow Page 3 - HTML Forms
HTML

HTML Forms


In our previous article, we discussed how to create tables in HTML and how to add data to them. In this episode we will go over forms and how to collect data from users. We will learn to create text fields, radio buttons, check-boxes, buttons, drop-down menus, and much much more. There is a lot of ground to cover in this one, so let's go ahead and get started.

Author Info:
By: James Payne
Rating: 4 stars4 stars4 stars4 stars4 stars / 4
February 06, 2008
TABLE OF CONTENTS:
  1. · HTML Forms
  2. · Other Input Types
  3. · Checkboxes
  4. · Buttons
  5. · Sending Data with a Form
  6. · Sending E-Mail Via Forms

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
HTML Forms - Checkboxes
(Page 3 of 6 )

Checkboxes allow the user to select one or more values (or none really). Here they are in code:


<html>

<body>

<form action="">

<p> Are you a nerd? Check all that apply</p>

I wear glasses:

<input type="checkbox" name="nerd" value="Glasses" />

<br />

I have been know to wear suspenders:

<input type="checkbox" name="nerd" value="Suspenders" />

<br />

I do have a pocket protector in my possession:

<input type="checkbox" name="nerd" value="Pocket Protectors" />

</form>

</body>

</html>

The result:

Are you a nerd? Check all that apply

I wear glasses:
I have been known to wear suspenders:
I do have a pocket protector in my possession:

Again you will note that each checkbox has the same name ("nerd"). If they do not, your program will not see them as part of the same set and the results of your form will be skewed.

Drop-Down Boxes

Drop-down boxes allow a user to select from a list of values. Here it is in code:


html>

<body>


<form action="">

<select name="Corny Villain Names">

<option value="Dr. Doom">Dr.Doom</option>

<option value="Dr. Octopus">Dr. Octopus</option>

<option value="Chiropractor Payne" selected="selected">Chiropractor Payne</option>

<option value="Nurse Nukem">Nurse Nukem</option>

</select>

</form>


</body>

</html>

The above code creates a drop down list of items. You set the values in the list with the <option value> tag. You will also note the selected attribute, which sets the default item in the list. The following is the result of the above code:


Textarea

Users can enter multiple lines of text in a textarea field. In fact, they can enter an unlimited amount of text in the textarea. Here is how you code it:


<html>

<body>


<textarea rows="10" cols="30">

This is some text I am writing as an example. Normally the user writes in here. Once a certain amount of space is taken up, scroll bars will appear on the side of the textarea, allowing the user to scroll up and down.

</textarea>


</body>

</html>


blog comments powered by Disqus
HTML ARTICLES

- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5
- BBC Adopts HTML 5, Mozilla Addresses Issues
- Advanced Sticky Footers in HTML and CSS
- HTML and CSS Sticky Footers
- Strategy Analytics Predicts HTML5 Phones to ...
- HTML5 Guidelines for Web Developers
- Learning HTML5 Game Programming
- More Engaging CSS3 and HTML Background Effec...
- Engaging HTML and CSS3 Background Effects
- More Web Columns with CSS3 and HTML
- Columns with CSS3 and HTML
- Creating Inline-Block HTML Elements with CSS
- Drag and Drop in HTML5: Parsing Local Files

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 10 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials