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.

<form method="get" enctype="application/x-www-form-urlencoded" action="/html/codes/html_form_handler.cfm">

<p>
<label>Name
<input type="text" name="customer_name" required>
</label> 
</p>

<p>
<label>Phone 
<input type="tel" name="phone_number">
</label>
</p>

<p>
<label>Email 
<input type="email" name="email_address">
</label>
</p>

<fieldset>
<legend>Which taxi do you require?</legend>
<p><label> <input type="radio" name="taxi" required value="car"> Car </label></p>
<p><label> <input type="radio" name="taxi" required value="van"> Van </label></p>
<p><label> <input type="radio" name="taxi" required value="tuktuk"> Tuk Tuk </label></p>
</fieldset>

<fieldset>
<legend>Extras</legend>
<p><label> <input type="checkbox" name="extras" value="baby"> Baby Seat </label></p>
<p><label> <input type="checkbox" name="extras" value="wheelchair"> Wheelchair Access </label></p>
<p><label> <input type="checkbox" name="extras" value="tip"> Stock Tip </label></p>
</fieldset>

<p>
<label>Pickup Date/Time
<input type="datetime-local" name="pickup_time" required>
</label>
</p>
	
<p>
<label>Pickup Place
<select id="pickup_place" name="pickup_place">
<option value="" selected="selected">Select One</option>
<option value="office" >Taxi Office</option>
<option value="town_hall" >Town Hall</option>
<option value="telepathy" >We'll Guess!</option>
</select>
</label> 
</p>

<p>
<label>Dropoff Place
<input type="text" name="dropoff_place" required list="destinations">
</label>

<datalist id="destinations">
<option value="Airport">
<option value="Beach">
<option value="Fred Flinstone's House">
</datalist>
</p>

<p>
<label>Special Instructions
<textarea name="comments" maxlength="500"></textarea>
</label>
</p>

<p><button>Submit Booking</button></p>

</form>

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.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Example</title>

<!-- CSS -->
<style>
.myForm {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 0.8em;
width: 20em;
padding: 1em;
border: 1px solid #ccc;
}

.myForm * {
box-sizing: border-box;
}

.myForm fieldset {
border: none;
padding: 0;
}

.myForm legend,
.myForm label {
padding: 0;
font-weight: bold;
}

.myForm label.choice {
font-size: 0.9em;
font-weight: normal;
}

.myForm input[type="text"],
.myForm input[type="tel"],
.myForm input[type="email"],
.myForm input[type="datetime-local"],
.myForm select,
.myForm textarea {
display: block;
width: 100%;
border: 1px solid #ccc;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 0.9em;
padding: 0.3em;
}

.myForm textarea {
height: 100px;
}

.myForm button {
padding: 1em;
border-radius: 0.5em;
background: #eee;
border: none;
font-weight: bold;
margin-top: 1em;
}

.myForm button:hover {
background: #ccc;
cursor: pointer;
}
</style>

</head>
<body>

<form class="myForm" method="get" enctype="application/x-www-form-urlencoded" action="/html/codes/html_form_handler.cfm">

<p>
<label>Name
<input type="text" name="customer_name" required>
</label> 
</p>

<p>
<label>Phone 
<input type="tel" name="phone_number">
</label>
</p>

<p>
<label>Email 
<input type="email" name="email_address">
</label>
</p>

<fieldset>
<legend>Which taxi do you require?</legend>
<p><label class="choice"> <input type="radio" name="taxi" required value="car"> Car </label></p>
<p><label class="choice"> <input type="radio" name="taxi" required value="van"> Van </label></p>
<p><label class="choice"> <input type="radio" name="taxi" required value="tuktuk"> Tuk Tuk </label></p>
</fieldset>

<fieldset>
<legend>Extras</legend>
<p><label class="choice"> <input type="checkbox" name="extras" value="baby"> Baby Seat </label></p>
<p><label class="choice"> <input type="checkbox" name="extras" value="wheelchair"> Wheelchair Access </label></p>
<p><label class="choice"> <input type="checkbox" name="extras" value="tip"> Stock Tip </label></p>
</fieldset>

<p>
<label>Pickup Date/Time
<input type="datetime-local" name="pickup_time" required>
</label>
</p>
	
<p>
<label>Pickup Place
<select id="pickup_place" name="pickup_place">
<option value="" selected="selected">Select One</option>
<option value="office" >Taxi Office</option>
<option value="town_hall" >Town Hall</option>
<option value="telepathy" >We'll Guess!</option>
</select>
</label> 
</p>

<p>
<label>Dropoff Place
<input type="text" name="dropoff_place" required list="destinations">
</label>

<datalist id="destinations">
<option value="Airport">
<option value="Beach">
<option value="Fred Flinstone's House">
</datalist>
</p>

<p>
<label>Special Instructions
<textarea name="comments" maxlength="500"></textarea>
</label>
</p>

<p><button>Submit Booking</button></p>

</form>

</body>
</html>

Left-Aligned Labels

This form has left-aligned labels.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Example</title>

<!-- CSS -->
<style>
.myForm {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 0.8em;
width: 30em;
padding: 1em;
border: 1px solid #ccc;
}

.myForm * {
box-sizing: border-box;
}

.myForm fieldset {
border: none;
padding: 0;
}

.myForm legend,
.myForm label {
padding: 0;
font-weight: bold;
}

.myForm label.choice {
font-size: 0.9em;
font-weight: normal;
}

.myForm label {
text-align: left;
display: block;
}

.myForm input[type="text"],
.myForm input[type="tel"],
.myForm input[type="email"],
.myForm input[type="datetime-local"],
.myForm select,
.myForm textarea {
float: right;
width: 60%;
border: 1px solid #ccc;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 0.9em;
padding: 0.3em;
}

.myForm textarea {
height: 100px;
}

.myForm input[type="radio"],
.myForm input[type="checkbox"] {
margin-left: 40%;
}

.myForm button {
padding: 1em;
border-radius: 0.5em;
background: #eee;
border: none;
font-weight: bold;
margin-left: 40%;
margin-top: 1.8em;
}

.myForm button:hover {
background: #ccc;
cursor: pointer;
}
</style>

</head>
<body>

<form class="myForm" method="get" enctype="application/x-www-form-urlencoded" action="/html/codes/html_form_handler.cfm">

<p>
<label>Name
<input type="text" name="customer_name" required>
</label> 
</p>

<p>
<label>Phone 
<input type="tel" name="phone_number">
</label>
</p>

<p>
<label>Email 
<input type="email" name="email_address">
</label>
</p>

<fieldset>
<legend>Which taxi do you require?</legend>
<p><label class="choice"> <input type="radio" name="taxi" required value="car"> Car </label></p>
<p><label class="choice"> <input type="radio" name="taxi" required value="van"> Van </label></p>
<p><label class="choice"> <input type="radio" name="taxi" required value="tuktuk"> Tuk Tuk </label></p>
</fieldset>

<fieldset>
<legend>Extras</legend>
<p><label class="choice"> <input type="checkbox" name="extras" value="baby"> Baby Seat </label></p>
<p><label class="choice"> <input type="checkbox" name="extras" value="wheelchair"> Wheelchair Access </label></p>
<p><label class="choice"> <input type="checkbox" name="extras" value="tip"> Stock Tip </label></p>
</fieldset>

<p>
<label>Pickup Date/Time
<input type="datetime-local" name="pickup_time" required>
</label>
</p>
	
<p>
<label>Pickup Place
<select id="pickup_place" name="pickup_place">
<option value="" selected="selected">Select One</option>
<option value="office" >Taxi Office</option>
<option value="town_hall" >Town Hall</option>
<option value="telepathy" >We'll Guess!</option>
</select>
</label> 
</p>

<p>
<label>Dropoff Place
<input type="text" name="dropoff_place" required list="destinations">
</label>

<datalist id="destinations">
<option value="Airport">
<option value="Beach">
<option value="Fred Flinstone's House">
</datalist>
</p>

<p>
<label>Special Instructions
<textarea name="comments" maxlength="500"></textarea>
</label>
</p>

<p><button>Submit Booking</button></p>

</form>

</body>
</html>

Right-Aligned Labels

This enquiry form has right-aligned labels.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Example</title>

<!-- CSS -->
<style>
.myForm {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 0.8em;
width: 30em;
padding: 1em;
}

.myForm * {
box-sizing: border-box;
}

.myForm label {
padding: 0;
font-weight: bold;
text-align: right;
display: block;
}

.myForm input,
.myForm select,
.myForm textarea {
margin-left: 2em;
float: right;
width: 20em;
border: 1px solid #ccc;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 0.9em;
padding: 0.3em;
}

.myForm textarea {
height: 100px;
}

.myForm button {
padding: 1em;
border-radius: 0.5em;
background: #eee;
border: none;
font-weight: bold;
margin-left: 14em;
margin-top: 1.8em;
}

.myForm button:hover {
background: #ccc;
cursor: pointer;
}
</style>

</head>
<body>

<form class="myForm" method="get" enctype="application/x-www-form-urlencoded" action="/html/codes/html_form_handler.cfm">

<p>
<label>Name 
<input type="text" name="customer_name" required>
</label> 
</p>

<p>
<label>Email 
<input type="email" name="email_address">
</label>
</p>
	
<p>
<label>Enquiry Regarding 
<select id="pickup_place" name="pickup_place">
<option value="" selected="selected">Select One</option>
<option value="website" >Our Website</option>
<option value="membership" >Membership</option>
<option value="telepathy" >We'll Guess!</option>
</select>
</label> 
</p>

<p>
<label>Enquiry 
<textarea name="comments" maxlength="500"></textarea>
</label>
</p>

<p><button>Submit Enquiry</button></p>

</form>

</body>
</html>

Inline Form

This form has its elements displayed inline.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Example</title>

<!-- CSS -->
<style>
.myForm {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 0.8em;
padding: 1em;
border: 1px solid #ccc;
border-radius: 3px;
}

.myForm * {
box-sizing: border-box;
}

.myForm label {
padding: 0;
font-weight: bold;
}

.myForm input {
border: 1px solid #ccc;
border-radius: 3px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 0.9em;
padding: 0.5em;
}

.myForm input[type="email"],
.myForm input[type="password"] {
width: 12em;
}

.myForm button {
padding: 0.7em;
border-radius: 0.5em;
background: #eee;
border: none;
font-weight: bold;
}

.myForm button:hover {
background: #ccc;
cursor: pointer;
}
</style>

</head>
<body>

<form class="myForm" method="get" enctype="application/x-www-form-urlencoded" action="/html/codes/html_form_handler.cfm">

<p>
<label>Email 
<input type="email" name="user_email" required>
</label> 

<label>Password 
<input type="password" name="user_pwd" required>
</label>

<button>Log In</button>
</p>

<p>
<label>
<input type="checkbox"> Remember me
</label>
</p>

</form>

</body>
</html>

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.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Example</title>

<!-- CSS -->
<style>
.myForm {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 0.8em;
padding: 1em;
border: 1px solid #ccc;
border-radius: 3px;
}

.myForm * {
box-sizing: border-box;
}

.myForm label {
font-size: 0.9em;
}

.myForm .audioOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}

.myForm input {
border: 1px solid #ccc;
border-radius: 3px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 0.9em;
padding: 0.5em;
}

.myForm input[type="email"],
.myForm input[type="password"] {
width: 12em;
}

.myForm button {
padding: 0.7em;
border-radius: 0.5em;
background: #eee;
border: none;
font-weight: bold;
margin-left: 1.5em;
}

.myForm button:hover {
background: #ccc;
cursor: pointer;
}
</style>

</head>
<body>

<form class="myForm" method="get" enctype="application/x-www-form-urlencoded" action="/html/codes/html_form_handler.cfm">

<label class="audioOnly" for="user_email">Email</label> 
<input type="email" name="user_email" required placeholder="Email">

<label class="audioOnly" for="user_pwd">Password</label> 
<input type="password" name="user_pwd" required placeholder="Password">

<label>
<input type="checkbox"> Remember me
</label>

<button>Log In</button>

</form>

</body>
</html>

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.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Example</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

</head>
<body>

<!-- HTML Form -->
<div class="container-fluid">		
<div class="row">

<div class="col-xs-2">
<input type="text" class="form-control" placeholder="Title">
</div>

<div class="col-xs-4">
<input type="text" class="form-control" placeholder="First Name">
</div>

<div class="col-xs-6">
<input type="text" class="form-control" placeholder="Last Name">
</div>

</div>
</div>
		
<!-- jQuery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
</body>
</html>

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.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Example</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

</head>
<body>
<div class="container-fluid">
		
<div class="form-group has-success has-feedback">
  <label class="control-label" for="username">Username</label>
  <input type="text" class="form-control" id="username" aria-describedby="usernameStatus">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="usernameStatus" class="help-block">Username is available!</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="password">Password</label>
  <input type="password" class="form-control" id="password" aria-describedby="passwordStatus">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="passwordStatus" class="help-block">Weak password</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="phone">Phone Number</label>
  <input type="tel" class="form-control" id="phone" aria-describedby="phoneStatus">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="phoneStatus" class="help-block">Please enter a valid phone number</span>
</div>

</div>
		
<!-- jQuery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
</body>
</html>

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.

Value	Data Type	Control Type
`hidden`	An arbitrary string	N/A
`text`	Text with no line breaks	Text field
`search`	Text with no line breaks	Text field
`tel`	Text with no line breaks	Text field
`url`	An absolute URL	Text field
`email`	An email address or list of email addresses	Text field
`password`	Text with no line breaks (sensitive information)	Text field that obscures data entry (eg, hides the password by using asterisks (******) or similar)
`datetime`	A date and time (year, month, day, hour, minute, second, fraction of a second) with the time zone set to UTC	Date and time control
`date`	A date (year, month, day) with no time zone	Date control
`month`	A date consisting of a year and a month with no time zone	A month control
`week`	A date consisting of a week-year number and a week number with no time zone	A week control
`time`	A time (hour, minute, seconds, fractional seconds) with no time zone	A time control
`datetime-local`	A date and time (year, month, day, hour, minute, second, fraction of a second) with no time zone	Date and time control
`number`	A numerical value	Text field or spinner control
`range`	A numerical value, with the extra semantic that the exact value is not important	Slider control or similar
`color`	An sRGB color with 8-bit red, green, and blue components	A color well. Enables the user to select a color.
`checkbox`	A set of zero or more values from a predefined list	Checkbox
`radio`	An enumerated value	Radio button
`file`	Zero or more files each with a MIME type and optionally a file name	A label and a button
`submit`	An enumerated value, with the extra semantic that it must be the last value selected and initiates form submission	Button
`image`	A coordinate, relative to a particular image's size, with the extra semantic that it must be the last value selected and initiates form submission	Either a clickable image, or a button
`reset`	N/A	Button
`button`	N/A	Button

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.

2. The <input> Tag

This tag defines input fields within the form.

For an explanation of all the attributes, see the <input> element.

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.

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.

5. The <textarea> Tag

This tag defines a text area within the form.

For an explanation of all the attributes, see the <textarea>.

Web.QHMIT.com

HTML Form Code

Example Form with No Styles

Same Form Styled with Top-Aligned Labels

Left-Aligned Labels

Right-Aligned Labels

Inline Form

Accessible Compact Form

Bootstrap Forms

Responsive Grid System

Validation Styles & Feedback Icons

Form-Associated Elements

The `<input>` Types

Templates

1. The <form> Tag

2. The <input> Tag

3. The <select> Tag

4. The <option> Tag

5. The <textarea> Tag

Related

HTML Form Code

Example Form with No Styles

Same Form Styled with Top-Aligned Labels

Left-Aligned Labels

Right-Aligned Labels

Inline Form

Accessible Compact Form

Bootstrap Forms

Responsive Grid System

Validation Styles & Feedback Icons

Form-Associated Elements

The <input> Types

Templates

1. The <form> Tag

2. The <input> Tag

3. The <select> Tag

4. The <option> Tag

5. The <textarea> Tag

Related

The `<input>` Types