HTML Form Code

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="html form codes, code, forms, free, input, select, dropdown, submit"> <meta name="Description" content="Create a form within your HTML codes."> <link rel="canonical" href="https://www.quackit.com/html/codes/html_form_code.cfm"> <title>HTML Form Code</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="shortcut icon" href="/pix/favicon96.png"> <link rel="apple-touch-icon" href="/pix/apple-touch-icon.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="/common/css/master.45.min.css" rel="stylesheet"> <script async src="https://cdn.fuseplatform.net/publift/tags/2/3499/fuse.js"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3H025ZKLN"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q3H025ZKLN'); </script> </head> <body> <header class="site-header"> <div class="site-header-base"> <div class="site-logo"> <a title="Quackit Homepage" target="_top" href="/"><img src="/pix/quackit_logo_watermark.png" width="87" height="33" alt="Quackit Logo"></a> </div> <button id="site-nav-toggler" class="site-nav-toggler" aria-expanded="false" aria-controls="site-nav"> <span class="sr-only">Toggle navigation</span> ☰ </button> </div> <nav id="site-nav" class="site-nav"> <div class="site-links"> <ul> <li><a href="/"><i class="fa fa-home"></i> <span class="sr-only">Home</span></a></li> <li><a href="/html/">HTML</a></li> <li><a href="/css/">CSS</a></li> <li><a href="/scripting/">Scripting</a></li> <li><a href="/database/">Database</a></li> </ul> </div> <div class="site-search-top"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:98x0fk-bbgi"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="20" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> </div> </nav> </header> <div class="main"> <article class="content"> <h1 class="page-title">HTML Form Code</h1> <div class="ad ad-top">  <div data-fuse="23059883623"></div> </div> <p class="lead">You can use the following HTML code to create a form within your HTML document. </p> <div class="ad">  <div data-fuse="23059883629"></div> </div> <h2>Example Form with No Styles</h2> <p>This example uses raw <a href="/html/">HTML</a> — no <code>CSS</code> has been applied.</p> <script src="/common/js/codemirror/lib/codemirror.js"></script> <script src="/common/js/codemirror/mode/htmlmixed/htmlmixed.js"></script> <script src="/common/js/codemirror/mode/css/css.js"></script> <script src="/common/js/codemirror/mode/javascript/javascript.js"></script> <script src="/common/js/codemirror/mode/xml/xml.js"></script> <div class="code-only"> <textarea id="example1" autocomplete="off" spellcheck="false"><form method="get" action="/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></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/codes/html_form_code" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode1 = CodeMirror.fromTextArea(document.getElementById("example1"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>Same Form Styled with Top-Aligned Labels</h2> <p>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.</p> <script src="/common/js/codemirror/mode/htmlmixed/htmlmixed.js"></script> <div class="code-only"> <textarea id="example2" autocomplete="off" spellcheck="false"><!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>


<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" action="/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></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/codes/html_form_code_top_aligned_labels" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode2 = CodeMirror.fromTextArea(document.getElementById("example2"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>Left-Aligned Labels</h2> <p>This form has left-aligned labels.</p> <div class="code-only"> <textarea id="example3" autocomplete="off" spellcheck="false"><!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>


<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" action="/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></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/codes/html_form_code_left_aligned_labels" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode3 = CodeMirror.fromTextArea(document.getElementById("example3"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>Right-Aligned Labels</h2> <p>This enquiry form has right-aligned labels.</p> <div class="code-only"> <textarea id="example4" autocomplete="off" spellcheck="false"><!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>


<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" action="/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></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/codes/html_form_code_right_aligned_labels" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode4 = CodeMirror.fromTextArea(document.getElementById("example4"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>Inline Form</h2> <p>This form has its elements displayed inline.</p> <div class="code-only"> <textarea id="example5" autocomplete="off" spellcheck="false"><!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>


<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" action="/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></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/codes/html_form_code_inline" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode5 = CodeMirror.fromTextArea(document.getElementById("example5"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>Accessible Compact Form</h2> <p>This form uses the <code>placeholder</code> attribute instead of the <a href="/html/tags/html_label_tag.cfm"><code><label></code></a> tag for the email and password fields. This results in a more compact form because no extra space is required for the labels.</p> <p>However, simply removing the <a href="/html/tags/html_label_tag.cfm"><code><label></code></a> tags is not good from an accessibility standpoint. People using screen readers could have problems if there is no <a href="/html/tags/html_label_tag.cfm"><code><label></code></a> element.</p> <p>Therefore, we use a little CSS trick to "hide" the label from visual browsers, while still presenting them to screen readers. </p> <div class="code-only"> <textarea id="example6" autocomplete="off" spellcheck="false"><!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>


<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" action="/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></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/codes/html_form_code_inline_compact_accessible" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode6 = CodeMirror.fromTextArea(document.getElementById("example6"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>Bootstrap Forms</h2> <p><a href="/bootstrap/">Bootstrap</a> includes a bunch of components for dealing with forms. Here are two.</p> <h3>Responsive Grid System</h3> <p>You can combine <a href="/bootstrap/bootstrap_3/tutorial/bootstrap_forms.cfm">Bootstrap forms</a> with <a href="/bootstrap/bootstrap_3/tutorial/bootstrap_grid_system.cfm">Bootstrap grids</a> to allow you more control over the layout of your forms. This is particularly useful for developing responsive forms.</p> <div class="code-only"> <textarea id="example7" autocomplete="off" spellcheck="false"><!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>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

</head>
<body>


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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
</body>
</html></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/codes/html_form_code_with_bootstrap_grid_system" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode7 = CodeMirror.fromTextArea(document.getElementById("example7"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h3>Validation Styles & Feedback Icons</h3> <p>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.</p> <div class="code-only"> <textarea id="example8" autocomplete="off" spellcheck="false"><!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>

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
</body>
</html></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/codes/html_form_code_with_bootstrap_validation_styles_and_feedback_icons" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode8 = CodeMirror.fromTextArea(document.getElementById("example8"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>Form-Associated Elements</h2> <p>HTML forms are created using the <a href="/html/tags/html_form_tag.cfm"><code><form></code></a> element along with one or more form-associated elements (i.e. elements that can have a form-owner).</p> <p>Here are the form-associated elements.</p> <ul class="col-3"> <li><a href="/html/tags/html_button_tag.cfm"><code><button></code></a></li> <li><a href="/html/tags/html_fieldset_tag.cfm"><code><fieldset></code></a></li> <li><a href="/html/tags/html_input_tag.cfm"><code><input></code></a></li> <li><a href="/html/tags/html_label_tag.cfm"><code><label></code></a></li> <li><a href="/html/tags/html_object_tag.cfm"><code><object></code></a></li> <li><a href="/html/tags/html_output_tag.cfm"><code><output></code></a></li> <li><a href="/html/tags/html_select_tag.cfm"><code><select></code></a></li> <li><a href="/html/tags/html_textarea_tag.cfm"><code><textarea></code></a></li> <li><a href="/html/tags/html_img_tag.cfm"><code><img></code></a></li> </ul> <h2>The <a href="/html/tags/html_input_tag.cfm"><code><input></code></a> Types</h2> <p>HTML5 introduced a large number of "types" that can be used with the <a href="/html/tags/html_input_tag.cfm"><code><input></code></a> element (i.e. the values that can be used with the <code>type</code> 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 <a href="/html/tags/html_input_tag.cfm"><code><input></code></a> field.</p> <p>Here's a complete list of the input types available in HTML5. </p> <table class="tabular"> <tr> <th>Value</th><th>Data Type</th><th>Control Type</th> </tr> <tr> <td><code>hidden</code></td><td>An arbitrary string</td><td>N/A</td> </tr> <tr> <td><code>text</code></td><td>Text with no line breaks</td><td>Text field</td> </tr> <tr> <td><code>search</code></td><td>Text with no line breaks</td><td>Text field</td> </tr> <tr> <td><code>tel</code></td><td>Text with no line breaks</td><td>Text field</td> </tr> <tr> <td><code>url</code></td><td>An absolute URL</td><td>Text field</td> </tr> <tr> <td><code>email</code></td><td>An email address or list of email addresses</td><td>Text field</td> </tr> <tr> <td><code>password</code></td><td>Text with no line breaks (sensitive information)</td><td>Text field that obscures data entry (eg, hides the password by using asterisks (******) or similar)</td> </tr> <tr> <td><code>datetime</code></td><td>A date and time (year, month, day, hour, minute, second, fraction of a second) with the time zone set to UTC</td><td>Date and time control</td> </tr> <tr> <td><code>date</code></td><td>A date (year, month, day) with no time zone</td><td>Date control</td> </tr> <tr> <td><code>month</code></td><td>A date consisting of a year and a month with no time zone</td><td>A month control</td> </tr> <tr> <td><code>week</code></td><td>A date consisting of a week-year number and a week number with no time zone</td><td>A week control</td> </tr> <tr> <td><code>time</code></td><td>A time (hour, minute, seconds, fractional seconds) with no time zone</td><td>A time control</td> </tr> <tr> <td><code>datetime-local</code></td><td>A date and time (year, month, day, hour, minute, second, fraction of a second) with no time zone</td><td>Date and time control</td> </tr> <tr> <td><code>number</code></td><td>A numerical value</td><td>Text field or spinner control</td> </tr> <tr> <td><code>range</code></td><td>A numerical value, with the extra semantic that the exact value is not important</td><td>Slider control or similar</td> </tr> <tr> <td><code>color</code></td><td>An sRGB color with 8-bit red, green, and blue components</td><td>A color well. Enables the user to select a color.</td> </tr> <tr> <td><code>checkbox</code></td><td>A set of zero or more values from a predefined list</td><td>Checkbox</td> </tr> <tr> <td><code>radio</code></td><td>An enumerated value</td><td>Radio button</td> </tr> <tr> <td><code>file</code></td><td>Zero or more files each with a MIME type and optionally a file name</td><td>A label and a button</td> </tr> <tr> <td><code>submit</code></td><td>An enumerated value, with the extra semantic that it must be the last value selected and initiates form submission</td><td>Button</td> </tr> <tr> <td><code>image</code></td><td>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</td><td>Either a clickable image, or a button</td> </tr> <tr> <td><code>reset</code></td><td>N/A</td><td>Button</td> </tr> <tr> <td><code>button</code></td><td>N/A</td><td>Button</td> </tr> </table> </article> <div class="sidebar"> <div class="relatedLinks"> <h4>Related</h4> <ul> <li><a href="/html/codes/html_form_to_email.cfm" title="Form that sends an email.">HTML Form To Email</a></li> <li><a href="/html/tutorial/html_forms.cfm" title="From the HTML tutorial.">HTML Forms Tutorial</a></li> <li><a href="/html/codes/add_comments_to_website.cfm" title="">Add Comments to Website</a></li> <li><a href="/html/tags/html_form_tag.cfm" title="">HTML <code><form></code> Tag</a></li> </ul> </div> <nav> <ul> <li> <h3><a href="/html/codes/">HTML Codes</a></h3> <ul> <li><a href="/html/codes/html_background_codes.cfm" title="Set background properties on any HTML element.">HTML Background Code</a></li> <li><a href="/html/codes/bold/" title="Specify bold text in your HTML code.">HTML Bold</a></li> <li><a href="/html/codes/color/" title="Add color to your HTML code.">HTML Color</a></li> <li><a href="/html/html_color_codes.cfm" title="Hexadecimal color codes">HTML Color Codes</a></li> <li><a href="/html/codes/comment_box_code.cfm" title="Create a comment box within your HTML codes.">HTML Comment Box Code</a></li> <li><a href="/html/codes/html_scroll_box.cfm" title="Create a scroll box within your HTML codes.">HTML Scrollbox Code</a></li> <li><a href="/html/codes/tables/" title="Add an HTML table to your web page or blog.">HTML Tables</a></li> <li><a href="/html/codes/text/" title="Specify font family, size, color and more within your HTML code.">HTML Text Code</a></li> <li><a href="/html/codes/html_picture_codes.cfm" title="Embed pictures within your HTML code.">HTML Image Code</a></li> <li><a href="/html/codes/link/" title="Create hyperlinks between web pages and other documents.">HTML Link Code</a></li> <li><a href="/html/codes/html_marquee_code.cfm">HTML Marquee Code</a></li> <li><a href="/html/html_music_code.cfm">HTML Music Code</a></li> <li><a href="/html/codes/html_video_codes.cfm">HTML Video Code</a></li> <li><a href="/html/codes/html_form_code.cfm">HTML Form Code</a></li> <li><a href="/html/codes/html_frames_code.cfm">HTML Frames Code</a></li> <li><a href="/html/html_special_characters.cfm" title="ISO-8859-1">HTML Entities</a></li> <li><a href="/html/examples/" title="Copy/paste examples">HTML Examples</a></li> <li><a href="/html/html_help.cfm" title="HTML help with tables, forms, fonts, color, image maps, hyperlinks and more.">HTML Help/Cheat Sheet</a></li> <li><a href="/html/templates/" title="Thousands of pre-built websites">HTML Templates</a></li> <li><a style="padding-left:60px;font-style:italic;" href="/html/codes/">More Codes...</a></li> </ul> </li> <li> <h3><a href="/html/">HTML Reference</a></h3> <ul> <li><a href="/html/tags/" title="Alphabetical list of all HTML tags">HTML Tags</a></li> <li><a href="/html/codes/" title="">HTML Codes</a></li> <li><a href="/html/templates/" title="">HTML Templates</a></li> <li><a href="/html/html_editors/">HTML Editors</a></li> <li><a href="/html/tutorial/" title="">HTML Tutorial</a></li> <li><a href="/create-a-website/" title="">Create a Website</a></li> <li><a href="/character_sets/">Character Set Reference</a></li> </ul> </li> </ul> </nav> <div class="ad ad-left">  <div data-fuse="23059511712"></div> </div> </div> <div class="ads"> <div class="ad ad-right">  <div data-fuse="23059883626"></div> </div> </div> </div> <div class="searchbox-bottom"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:npmuvy-i8kk"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="30" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> <script src="//cse.google.com/cse/brand?form=cse-search-box-bottom&lang=en"></script> </div> <footer> <p class="about"><a href="/"><i class="fa fa-home"></i> Home</a> | <a href="/about.cfm" rel="nofollow">About</a> | <a href="/contact.cfm" rel="nofollow">Contact</a> | <a href="/terms_of_use.cfm" rel="nofollow">Terms of Use</a> | <a href="/privacy_policy.cfm" rel="nofollow">Privacy Policy</a></p> <p>© Copyright 2000 - 2025 Quackit.com  </p> </footer> <script src="/common/js/spectrum/spectrum.js"></script> <script src="/common/js/lightbox2-master/dist/js/lightbox.min.js" charset="utf-8"></script> <script> $(document).ready(function(){ $( "#site-nav-toggler" ).click(function() { $( "#site-nav" ).toggle( "slow" ); }); }); </script> <script> $(function(){var a=window.location.href;$(".sidebar nav a").each(function(){a==this.href&&$(this).closest("li").addClass("selected")})}); </script> </body> </html>

CINXE.COM

HTML Form Code