Quackit Logo
HTML Home
Create a Website

HTML Tutorial

HTML Tutorial Home
About HTML
Getting Started
HTML Elements
HTML Formatting
HTML Attributes
HTML Colors
HTML Links
HTML Images
HTML Meta Tags
HTML Comments
HTML Forms
HTML Tables
HTML Image Maps
HTML Frames
HTML Entities
HTML Layouts
HTML Styles
HTML Scripts
HTML Website Templates
Website Hosting
Summary

HTML Code Generators

HTML Code Generator
HTML Table Generator
Marquee Generator
Music Code Generator
HTML Text Generator
Text Box Generator

Free HTML Codes

HTML Background Code
HTML Comment Box Codes
HTML Font Codes
HTML Picture Codes
HTML Marquee Code
HTML Music Codes
More Codes...

HTML Reference

Complete HTML Tag List
HTML Special Characters
Hex Color Codes
HTML Help

Got a MySpace Page?

Get "www.yourname.com" for your MySpace page. Learn how >>.

HTML Form Code

Print Version

You can use the following HTML code to create a form within your HTML document. Note that this also includes table code for formatting purposes.

You can also check out the HTML Forms page of the HTML Tutorial.

Example HTML Form Code:

<form action="/html/tags/html_form_tag_action.cfm" method="get">
<table>
<tr>
<td>First name:</td>
<td>
<input type="text" name="first_name" value="" maxlength="100" />
</td>
</tr>
<tr>
<td>Lunch:</td>
<td>
<input type="radio" name="lunch" value="pasta" /> Pasta
<input type="radio" name="lunch" value="rissotto" /> Rissotto
</td>
</tr>
<tr><td>Drinks:</td>
<td>
<input type="checkbox" name="drinks" value="beer" /> Beer
<input type="checkbox" name="drinks" value="wine" /> Wine
</td>
</tr>
<tr><td>Preferred City:</td>
<td>
<select>
  <option value ="sydney">Sydney</option>
  <option value ="melbourne">Melbourne</option>
  <option value ="cromwell">Cromwell</option>
  <option value ="queenstown">Queenstown</option>
</select>
</td>
</tr>
<tr>
<td>Comments:</td>
<td>
<textarea rows="3" cols="20"></textarea>
</td>
</tr>
<tr><td> </td>
<td>
<input type="submit" value="Submit" />
</td>
</tr>
</table>

This results in:

First name:
Lunch: Pasta Rissotto
Drinks: Beer Wine
Preferred City:
Comments:
 

Templates

The form tags contain other tags nested within them. These other tags define the actual form elements that appear within the form.

You can use the following template as a basis for your HTML form codes. Simply fill in the blanks or remove uneeded attributes.

Since HTML form code is made up of several tags, each tag is presented separately here.

1. The <form> Tag

For an explanation of all the attributes, see the HTML form tag specifications.

<form
	action=""
	method=""
	enctype=""
	accept-charset=""
	accept=""
	name=""
	class=""
	id=""
	dir=""
	lang=""
	target=""
	onSubmit=""
	onReset=""
	onclick=""
	ondbclick=""
	onmousedown=""
	onmouseup=""
	onmouseover=""
	onmousemove=""
	onmouseout=""
	onkeypress=""
	onkeydown=""
	onkeyup="" >

	(the individual form element tags go here - see below)

	</form>

2. The <input> Tag

This tag defines input fields within the form.

For an explanation of all the attributes, see the HTML input tag specifications.

<input
	type=""
	name=""
	value=""
	size=""
	maxlength=""
	checked=""
	src=""
	class=""
	id=""
	dir=""
	lang=""
	title=""
	style=""
	align=""
	alt=""
	readonly=""
	disabled=""
	tabindex=""
	accesskey=""
	ismap=""
	usemap=""
	onfocus=""
	onblur=""
	onselect=""
	onchange=""
	onclick=""
	ondbclick=""
	onmousedown=""
	onmouseup=""
	onmouseover=""
	onmousemove=""
	onmouseout=""
	onkeypress=""
	onkeydown=""
	onkeyup="" />

3. The <select> Tag

This tag defines a dropdown menu within the form. This works in conjunction with the <option> tag.

For an explanation of all the attributes, see the HTML select tag specifications.

<select
	name=""
	size=""
	multiple=""
	class=""
	id=""
	dir=""
	lang=""
	style=""
	title=""
	tabindex=""
	disabled=""
	onclick=""
	ondbclick=""
	onmousedown=""
	onmouseup=""
	onmouseover=""
	onmousemove=""
	onmouseout=""
	onkeypress=""
	onkeydown=""
	onkeyup=""
>

(option tags go here for each item you need in your list)

<select/>

4. The <option> Tag

This tag defines an item within a dropdown menu. This works in conjunction with the <select> tag.

For an explanation of all the attributes, see the HTML option tag specifications.

<option
	selected=""
	value=""
	label=""
	class=""
	id=""
	dir=""
	lang=""
	style=""
	title=""
	tabindex=""
	disabled=""
	onclick=""
	ondbclick=""
	onmousedown=""
	onmouseup=""
	onmouseover=""
	onmousemove=""
	onmouseout=""
	onkeypress=""
	onkeydown=""
	onkeyup=""
>

(list item goes here)

</option>

5. The <textarea> Tag

This tag defines a text area within the form.

For an explanation of all the attributes, see the HTML textarea tag specifications.

<textarea
	name=""
	rows=""
	cols=""
	class=""
	id=""
	dir=""
	lang=""
	title=""
	style=""
	readonly=""
	disabled=""
	tabindex=""
	onfocus=""
	onblur=""
	onselect=""
	onchange=""
	onclick=""
	ondbclick=""
	onmousedown=""
	onmouseup=""
	onmouseover=""
	onmousemove=""
	onmouseout=""
	onkeypress=""
	onkeydown=""
	onkeyup="" >

	(this is where the user can type stuff)

</textarea>

Enjoy this website?

  1. Link to this page (copy/paste into your own website or blog):
  2. Add this page to your favorite social bookmarks sites:
                     
  3. Add this page to your Favorites

Oh, and thank you for supporting Quackit!
 

FREE Hosting!

With every domain name you register with ZappyHost, you get FREE (ad supported) hosting.

PLUS you get:

  • FREE Website Builder
  • FREE Blog
  • FREE Starter Web Page
  • FREE Email Account
  • & much more! (Total value $123 for FREE!)
Get your FREE hosting today! >>
Featured Template:
(Build your websites in minutes!)