Home arrow HTML arrow 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: 5 stars5 stars5 stars5 stars5 stars / 12
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

HTML Forms
(Page 1 of 6 )

Forms

Back in the olden days, we used to have to walk to the DMV and wait in line for nine hours, come back the following day because the DMV is only open eight hours, wait in line another four hours, get a form and a whole bunch of underpaid government attitude, fill out the stacks of paper by hand, wait in line some more, only to find that the stupid clerk gave you the wrong paperwork. Oh and by the way, before she can give you the right form, you have to go wait at the back of the line.

Fortunately for you youngsters, you can conduct most of your business online, thanks to our friend, the form. A form consists of an area upon which you place form elements. Form elements are used to collect information from the user and consist of text fields, drop-down menus, radio buttons, checkboxes, textarea fields, submit buttons, and so forth.

To create a form you use the <form> tag. Below we will create a form with some text boxes:


<html>

<body>


<form>

First name:

<input type="text" name="firstname">

<br>

Last name:

<input type="text" name="lastname">

<br>

Occupation:

<input type="text" name="occupation"

</form>

</body>

</html>

The result of this code is:


First name:
Last name:
Occupation:

You will notice in the code that we use the <input> tag for input fields and that we define the type of input field using the <type> attribute.


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




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