Sponsored Links

$1.99 Domain Names
With every new non-domain purchase thru ZappyHost, you get a domain name for only $1.99.

HTML Form Code

Related:
• HTML Form To Email
• HTML Forms
• Add Comments to Website

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" name="comments"></textarea>
</td>
</tr>
<tr><td> </td>
<td>
<input type="submit" value="Submit" />
</td>
</tr>
</table>

This results in:

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?

Add this page to your Favorites
Link to this page (copy/paste into your own website or blog):
<a href="http://www.quackit.com/html/codes/html_form_code.cfm">HTML Form Code</a> from Quackit.com
Help support Quackit by making a donation
Add this page to your favorite social bookmarks sites: