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