revision:
An HTML form is used to collect user input, which is most often sent to a server for processing.
The <form> element is used to create an HTML form for user input. It is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.
The <input> element is the most used form element. It can be displayed in many ways, depending on the "type" attribute. Here are some examples:
<input type="text"> - displays a single-line text input field
<input type="radio"> - displays a radio button (for selecting one of many choices)
<input type="checkbox">- displays a checkbox (for selecting zero or more of many choices)
<input type="submit"> - displays a submit button (for submitting the form)
<input type="button"> - displays a clickable button
Text fields: the <input type="text"> defines a single-line input field for text input.
<form style="margin-left:3vw;">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
<style>
input[type=text]{display: inline-block; margin-left: 0vw; background-color: white; color: burlywood;width: auto; height: auto;}
</style>
Note that the form itself is not visible and that the default width of text input fields is 20 characters.
The <label> element defines a label for many form elements.
The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focus on the input element.
The <label> element also help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.
The "for" attribute of the <label> tag should be equal to the "id" attribute of the <input> element to bind them together.
The <input type="radio"> defines a radio button. Radio buttons let a user select ONE of a limited number of choices.
<form style="margin-left: 3vw;">
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</form>
The <input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<form style="margin-left: 3vw;" action="/action_page.php">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br>
<input type="submit" value="Submit">
</form>
The <input type="submit"> defines a button for submitting the form data to a form-handler. The form-handler is typically a file on the server with a script for processing input data. The form-handler is specified in the form's "action" attribute.
If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".
<form style="margin-left: 3vw;" action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br>
<input type="submit" value="Submit">
</form>
The "name" attribute for <input>：notice that each input field must have a "name" attribute to be submitted. If the "name" attribute is omitted, the value of the input field will not be sent at all.
The "action" attribute defines the action to be performed when the form is submitted.
Usually, the form data is sent to a file on the server when the user clicks on the submit button.This file contains a server-side script that handles the form data.
If the action attribute is omitted, the action is sent to the current page.
The "target" attribute specifies where to display the response that is received after submitting the form. The target attribute can have one of the following values:
_blank - the response is displayed in a new window or tab,
_self - the response is displayed in the current window,
_parent - the response is displayed in the parent frame,
_top - the response is displayed in the full body of the window,
framename - the response is displayed in a named iframe
The default value is _self, which means that the response will open in the current window.
When submitting this form, the result will be opened in a new browser tab:
code:
<form style="margin-left: 5vw;" action="/action_page.php" target="_blank">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br>
<input type="submit" value="Submit">
</form>
The "method" attribute specifies the HTTP method to be used when submitting the form data.
The form-data can be sent as URL variables (with method="get") or as HTTP post transaction (with method="post"). The default HTTP method when submitting form data is GET.
This form will be submitted using the GET method:
code:
<form style="margin-left: 3vw;" action="/action_page.php" target="_blank" method="GET">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br>
<input type="submit" value="Submit">
</form>
Notes on GET: it appends the form data to the URL, in name/value pairs. NEVER use GET to send sensitive data! (the submitted form data is visible in the URL!). The length of a URL is limited (2048 characters). Useful for form submissions where a user wants to bookmark the result. GET is good for non-secure data, like query strings in Google.
Notes on POST: it appends the form data inside the body of the HTTP request (the submitted form data is not shown in the URL). POST has no size limitations, and can be used to send large amounts of data. Form submissions with POST cannot be bookmarked.
The "autocomplete" attribute specifies whether a form should have autocomplete on or off. When autocomplete is on, the browser automatically complete values based on values that the user has entered before.
Fill in and submit the form, then reload the page, start to fill in the form again - and see how autocomplete works.
Then, try to set autocomplete to "off".
code:
<form style="margin-left: 3vw;" action="/action_page.php" autocomplete="on">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br>
<label for="email">Email:</label>
<input type="text" id="email" name="email"><br>
<input type="submit" value="submit">
</form>
The "novalidate" attribute is a boolean attribute. When present, it specifies that the form-data (input) should not be validated when submitted.
The novalidate attribute indicates that the form input is not to be validated on submit:
code:
<form style="margin-left: 3vw;" action="/action_page.php" novalidate>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br>
<input type="submit">
</form>
Note: The "novalidate" attribute of the form tag is not supported in Safari 10 (or earlier).
The HTML <form> elements：the HTML <form> element can contain one or more of the following form elements: <input>, <label>, <select>, <textarea>, <button>, <fieldset>, <legend>, <datalist>, <output>, <option>, <optgroup>
The <input> element element can be displayed in several ways, depending on the type attribute.
The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focus on the input element. It also helps users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.
The <select> element defines a drop-down list. The <option> elements define an option that can be selected. By default, the first item in the drop-down list is selected. To define a pre-selected option, add the "selected" attribute to the option.
code:
<form style="margin-left: 3vw;" action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
Visible values：use the "sizes" attribute to specify the number of visible values.
code:
<form style="margin-left: 5vw;" action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select><br>
<input type="submit">
</form>
Allow multiple selections:：use the "multiple" attribute to allow the user to select more than one value.
code:
<form style="margin-left: 5vw;" action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
The <textarea> element defines a multi-line input field (a text area):
<form style="margin-left: 5vw;" action="/action_page.php">
<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
<br>
<input type="submit">
</form>
The "rows" attribute specifies the visible number of lines in a text area.The "cols" attribute specifies the visible width of a text area. You can also define the size of the text area by using CSS.
The <button> element defines a clickable button.
The <fieldset> and <legend> elements：the <fieldset> element is used to group related data in a form. The <legend> element defines a caption for the <fieldset> element.
code:
<form style="margin-left: 3vw;" action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" value="Doe"><br>
<input type="submit" value="Submit">
</fieldset>
</form>
The <datalist> element specifies a list of pre-defined options for an <input> element. Users will see a drop-down list of the pre-defined options as they input data. The "list" attribute of the <input> element, must refer to the "id" attribute of the <datalist> element.
code:
<form style="margin-left: 3vw;" action="/action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
The <output> element represents the result of a calculation (like one performed by a script).
code:
<form style="margin-left: 5vw;" action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br>
<input type="submit">
</form>
Note: The output element is not supported in Edge prior version 13.
HTML input types that can be used in HTML are: <input type="button">, <input type="checkbox">, <input type="color">, <input type="date">, <input type="datetime-local">, <input type="email">, <input type="file">, <input type="hidden">, <input type="image">, <input type="month">, <input type="number">, <input type="password">, <input type="radio">, <input type="range">, <input type="reset">, <input type="search">, <input type="submit">, <input type="tel">, <input type="text">, <input type="time">, <input type="url">, <input type="week">
Tip: the default value of the type attribute is "text".
<input type="text"> defines a single-line text input field.
<input type="password"> defines a password field. The characters in a password field are masked (shown as asterisks or circles).
<input type="submit"> defines a button for submitting form data to a form-handler. The form-handler is typically a server page with a script for processing input data. The form-handler is specified in the form's action attribute. If you omit the submit button's value attribute, the button will get a default text.
<input type="reset"> defines a reset button that will reset all form values to their default values. If you change the input values and then click the "Reset" button, the form-data will be reset to the default values.
<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices.
<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<input type="button"> defines a button.
<input type="color"> is used for input fields that should contain a color. Depending on browser support, a color picker can show up in the input field.
<input type="date"> is used for input fields that should contain a date. Depending on browser support, a date picker can show up in the input field. You can also use the "min" and "max" attributes to add restrictions to dates.
Use the min and max attributes to add restrictions to dates:
code:
<form style="margin-left: 2vw;" action="/action_page.php">
<label style="margin-left: 1vw;"for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br>
<label style="margin-left: 1vw;"for="datemin">Enter a date after 2000-01-01:</label>
<input style="margin-left: 1vw;" type="date" id="datemin" name="datemin" min="2000-01-02"><br>
<input type="submit" value="Submit">
</form>
Note: type="date" is not supported in Safari or Internet Explorer 11 (or earlier).
<input type="datetime-local"> specifies a date and time input field, with no time zone. Depending on browser support, a date picker can show up in the input field.
<input type="email"> is used for input fields that should contain an e-mail address. Depending on browser support, the e-mail address can be automatically validated when submitted. Some smartphones recognize the email type, and add ".com" to the keyboard to match email input.
code:
<form style="margin-left: 2vw;" action="/action_page.php">
<label style="margin-left: 1vw;" for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>
<input type="file"> defines a file-select field and a "Browse" button for file uploads.
code:
<form style="margin-left: 2vw;" action="/action_page.php">
<label style="margin-left: 1vw;" for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile"><br>
<input style="margin-left: 1vw;"" type="submit" value="Submit">
</form>
<input type="month"> allows the user to select a month and year. Depending on browser support, a date picker can show up in the input field.
<input type="number"> defines a numeric input field. You can also set restrictions on what numbers are accepted. The following example displays a numeric input field, where you can enter a value from 1 to 5:
code:
<form style="margin-left: 2vw;" action="/action_page.php">
<label style="margin-left: 1vw;" for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
<input type="submit" value="Submit">
</form>
<input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the "min", "max", and "step" attributes.
code:
<form style="margin-left: 3vw;" action="/action_page.php" method="get">
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
<input type="submit" value="Submit">
</form>
<input type="search"> is used for search fields (a search field behaves like a regular text field).
code:
<form style="margin-left: 3vw;" action="/action_page.php">
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
<input type="submit" value="Submit">
</form>
<input type="tel"> is used for input fields that should contain a telephone number.
<input type="time"> allows the user to select a time (no time zone). Depending on browser support, a time picker can show up in the input field.
<input type="url"> is used for input fields that should contain a URL address. Depending on browser support, the url field can be automatically validated when submitted. Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.
code:
<form style="margin-left: 3vw;" action="/action_page.php">
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
<input type="submit" value="Submit">
</form>
<input type="week"> allows the user to select a week and year. Depending on browser support, a date picker can show up in the input field.
Here is a list of some common input restrictions:
checked - specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio").
disabled - specifies that an input field should be disabled.
max- specifies the maximum value for an input field.
maxlength - specifies the maximum number of character for an input field.
min - specifies the minimum value for an input field.
pattern - specifies a regular expression to check the input value against.
readonly - specifies that an input field is read only (cannot be changed).
required - specifies that an input field is required (must be filled out).
size - specifies the width (in characters) of an input field.
step - specifies the legal number intervals for an input field.
value - specifies the default value for an input field.
The input value attribute specifies an initial value for an input field.
The input readonly attribute specifies that an input field is read-only. A read-only input field cannot be modified. However, a user can tab to it, highlight it, and copy the text from it. The value of a read-only input field will be sent when submitting the form!
code:
<form style="margin-left: 3vw;" action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br>
<input type="submit" value="Submit">
</form>
The input disabled attribute specifies that an input field should be disabled. A disabled input field is unusable and un-clickable. The value of a disabled input field will not be sent when submitting the form!
code:
<form style="margin-left: 3vw;" action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
<input type="submit" value="Submit">
</form>
The input size attribute specifies the visible width, in characters, of an input field. The default value for size is 20. The size attribute works with the following input types: text, search, tel, url, email, and password.
The input maxlength attribute specifies the maximum number of characters allowed in an input field. Note: When a maxlength is set, the input field will not accept more than the specified number of characters. However, this attribute does not provide any feedback. So, if you want to alert the user, you must write JavaScript code.
The input min attribute and input max attribute specify the minimum and maximum values for an input field. The min and max attributes work with the following input types: number, range, date, datetime-local, month, time and week. Tip: use the max and min attributes together to create a range of legal values.
The input multiple attribute specifies that the user is allowed to enter more than one value in an input field. The multiple attribute works with the following input types: email, and file.
code:
<form style="margin-left: 3vw;" action="/action_page.php">
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple><br>
<input type="submit" value="Submit">
</form>
The input pattern attribute specifies a regular expression that the input field's value is checked against, when the form is submitted. The pattern attribute works with the following input types: text, date, search, url, tel, email, and password. Tip: use the global title attribute to describe the pattern to help the user.
code:
<form style="margin-left: 3vw;" action="/action_page.php">
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"><br>
<input type="submit" value="Submit">
</form>
Note: The pattern attribute of the input tag is not supported in Safari 10 (or earlier).
The input placeholder attribute specifies a hint that describes the expected value of an input field (a sample value or a short description of the expected format). The short hint is displayed in the input field before the user enters a value. The placeholder attribute works with the following input types: text, search, url, tel, email, and password.
The input required attribute specifies that an input field must be filled out before submitting the form. The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.
The input step attribute specifies the legal number intervals for an input field. Example: if step="3", legal numbers could be -3, 0, 3, 6, etc. This attribute can be used together with the max and min attributes to create a range of legal values. The step attribute works with the following input types: number, range, date, datetime-local, month, time and week.
The input autofocus attribute specifies that an input field should automatically get focus when the page loads.
code:
<form style="margin-left: 3vw;" action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" ><br>
<input type="submit" value="Submit">
</form>
The input height attribute and input width attribute specify the height and width of an <input type="image"> element. Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded. Without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).
The input list attribute refers to a <datalist> element that contains pre-defined options for an <input> element.
code:
<form style="margin-left: 3vw;" action="/action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit" value="Submit">
</form>
The input autocomplete attribute specifies whether a form or an input field should have autocomplete on or off. Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.The autocomplete attribute works with <form> and the following <input> types: text, search, url, tel, email, password, datepickers, range, and color.Tip: in some browsers you may need to activate an autocomplete function for this to work (Look under "Preferences" in the browser's menu).
The input form attribute specifies the form the <input> element belongs to. The value of this attribute must be equal to the "id" attribute of the <form> element it belongs to.
code:
<form style="margin-left: 3vw;" action="/action_page.php" id="form1">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br>
<input type="submit" value="Submit">
</form>
<label for="lname" style="margin-left: 3vw;">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">
</div>
The "Last name" field is outside the form element, but still part of the form.
The input formaction attribute specifies the URL of the file that will process the input when the form is submitted. This attribute overrides the action attribute of the <form> element. The formaction attribute works with the following input types: submit and image.
code:
<form style="margin-left: 3vw;" action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br>
<input type="submit" value="Submit">
<input type="submit" formaction="/action_page2.php" value="Submit as Admin">
</form>
The input formenctype atribute specifies how the form-data should be encoded when submitted (only for forms with method="post"). This attribute overrides the enctype attribute of the <form> element. The formenctype attribute works with the following input types: submit and image.
code:
<form style="margin-left: 3vw;" action="/action_page.php" method="post">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data">
</form>
The input formmethod attribute defines the HTTP method for sending form-data to the action URL. This attribute overrides the method attribute of the <form> element. The formmethod attribute works with the following input types: submit and image. The form-data can be sent as URL variables (method="get") or as an HTTP post transaction (method="post").
code:
<form style="margin-left: 3vw;" action="/action_page.php" method="get" target="_blank">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br>
<input type="submit" value="Submit using GET">
<input type="submit" formmethod="post" value="Submit using POST">
</form>
The input formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form. This attribute overrides the target attribute of the <form> element. The formtarget attribute works with the following input types: submit and image.
code:
<form style="margin-left: 3vw;" action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br>
<input type="submit" value="Submit">
<input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>
The input formnovalidate attribute specifies that an <input> element should not be validated when submitted. This attribute overrides the novalidate attribute of the <form> element. The formnovalidate attribute works with the following input types: submit.
code:
<form style="margin-left: 3vw;" action="/action_page.php">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email" required><br>
<input type="submit" value="Submit">
<input type="submit" formnovalidate="formnovalidate" value="Submit without validation">
</form>
Note: The formnovalidate attribute of the input tag is not supported in Safari 10 (or earlier).
The input novalidate attribute is a <form> attribute. When present, novalidate specifies that all of the form-data should not be validated when submitted.
code:
<form style="margin-left: 3vw;" action="/action_page.php" novalidate>
<input type="email" id="email" name="email" required><br>
<input type="submit" value="Submit">
</form>
Note: The novalidate attribute of the form tag is not supported in Safari 10 (or earlier).