HTML Form Code

You can use the following HTML code to create a form within your HTML document.

Example Form with No Styles

This example uses raw HTML — no CSS has been applied.

Same Form Styled with Top-Aligned Labels

This is the same form, but this one has CSS applied to ensure the labels appear above the input fields. Some other light styling has also been appled.

Left-Aligned Labels

This form has left-aligned labels.

Right-Aligned Labels

This enquiry form has right-aligned labels.

Inline Form

This form has its elements displayed inline.

Accessible Compact Form

This form uses the placeholder attribute instead of the <label> tag for the email and password fields. This results in a more compact form because no extra space is required for the labels.

However, simply removing the <label> tags is not good from an accessibility standpoint. People using screen readers could have problems if there is no <label> element.

Therefore, we use a little CSS trick to "hide" the label from visual browsers, while still presenting them to screen readers.

Bootstrap Forms

Bootstrap includes a bunch of components for dealing with forms. Here are two.

Responsive Grid System

You can combine Bootstrap forms with Bootstrap grids to allow you more control over the layout of your forms. This is particularly useful for developing responsive forms.

Validation Styles & Feedback Icons

You can also take advantage of Bootstrap's validation styles and feedback icons so that you can provide visual feedback to the user based on the data they enter.

Form-Associated Elements

HTML forms are created using the <form> element along with one or more form-associated elements (i.e. elements that can have a form-owner).

Here are the form-associated elements.

The <input> Types

HTML5 introduced a large number of "types" that can be used with the <input> element (i.e. the values that can be used with the type attribute). This allows you to specify exactly what the field is for, and browsers will perform some (light) validation to prevent users from entering the wrong type of data into an <input> field.

Here's a complete list of the input types available in HTML5.

ValueData TypeControl Type
hiddenAn arbitrary stringN/A
textText with no line breaksText field
searchText with no line breaksText field
telText with no line breaksText field
urlAn absolute URLText field
emailAn email address or list of email addressesText field
passwordText with no line breaks (sensitive information)Text field that obscures data entry (eg, hides the password by using asterisks (******) or similar)
datetimeA date and time (year, month, day, hour, minute, second, fraction of a second) with the time zone set to UTCDate and time control
dateA date (year, month, day) with no time zoneDate control
monthA date consisting of a year and a month with no time zoneA month control
weekA date consisting of a week-year number and a week number with no time zoneA week control
timeA time (hour, minute, seconds, fractional seconds) with no time zoneA time control
datetime-localA date and time (year, month, day, hour, minute, second, fraction of a second) with no time zoneDate and time control
numberA numerical valueText field or spinner control
rangeA numerical value, with the extra semantic that the exact value is not importantSlider control or similar
colorAn sRGB color with 8-bit red, green, and blue componentsA color well. Enables the user to select a color.
checkboxA set of zero or more values from a predefined listCheckbox
radioAn enumerated valueRadio button
fileZero or more files each with a MIME type and optionally a file nameA label and a button
submitAn enumerated value, with the extra semantic that it must be the last value selected and initiates form submissionButton
imageA coordinate, relative to a particular image's size, with the extra semantic that it must be the last value selected and initiates form submissionEither a clickable image, or a button
resetN/AButton
buttonN/AButton

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 <form> element.

<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 <input> element.

<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 <select> element.

<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 <option> element.

<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 <textarea>.

<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>