Home arrow HTML arrow Page 5 - 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
Poor Best
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 - Sending Data with a Form
(Page 5 of 6 )

We mentioned the Submit button above. In this section we are going to use it, along with the action attribute to send data to a web page that would usually have some code to do something with the information we collect. For more on how to work with information from HTML forms, you can read my series on ASP or PHP (shameless self plug).

For now, here is how you create the form:

<html>

<body>

<form name="wookie" action="sample.asp" method="get">

Please Enter Your Name:

<input type="text" name="name" value="Bruce Digelow" size="25">

<br>Please Enter Your Occupation:

<input type="text" name="occupation" value="Male Jiggler" size="25">

<br>

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

</form>

<p>

When you click the Submit button, it sends the data to a page called, "sample.asp". At least, it would if you had such a page on your server.

</p>

</body>

</html>

This results in the following:


Please Enter Your Name:
Please Enter Your Occupation:

When you click the Submit button, it sends the data to a page called "sample.asp." Well, it would if you had such a page on your server.

When the user clicks the Submit button, it sends the information to the file listed in the action attribute (in this case sample.asp).

Sending Data from Checkboxes

You can of course also send the results of checkboxes to a page. Here is how:


<html>

<body>

<p>Things that describe me:

<form name="input" action="sample.asp" method="get">

I am fat:

<input type="checkbox" name="descrip" value="fat" checked="checked" />

<br />

I wear glasses:

<input type="checkbox" name="descrip" value="fat" />

<br />

I have a sloppy haircut:

<input type="checkbox" name="descrip" value="fat" />

<br /><br />

<input type="submit" value="Submit" />

</form>

</body>

</html>

The result:


Things that describe me:

I am fat:
I wear glasses:
I have a sloppy haircut:

And of course this works with the other input types as well, such as the radio button:


<html>

<body>

<form name="input" action="sample.asp" method="get">

Yes:

<input type="radio" name="maybe" value="Yes" checked="checked">

<br>

No:

<input type="radio" name="maybe" value="No">

<br><br>

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

</form>

</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
Find More HTML Tutorials

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