HTML Forms

Introduction:

HTML form is used to collect user input. The user input is most often sent to a server for processing.
An HTML form is a section of a document which contains controls such as text fields, password fields, checkboxes, radio buttons, submit button, menus etc.
An HTML form facilitates the user to enter data that is to be sent to the server for processing such as name, email address, password, phone number, etc. .

Why use HTML Form

1.HTML forms are required if you want to collect some data from of the site visitor.

2.For example: If a user want to purchase some items on internet, he/she must fill the form such as shipping address and credit/debit card details so that item can be sent to the given address.

HTML `<form>`

The HTML <form> tag is used to create an HTML form for user input.
The <form> tag is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.
Syntax:

<form>
.
form elements
.
</form>

Different Parts of a Form:

1.The <form> Attributes :

1. action attribute .

2.target attribute

3.method attribute

4.autocomplete attribute

5.novalidate attribute

6.accept-charset attribute

7.enctype attribute

8.name attribute

9.rel attribute

2. The <form> Element/Controls

1. <input>: to get single-line user input .

2. <textarea>: A multi-line text input field.

3. <select>: A drop-down list, with one or more <option> elements.

4. <button>: A button element, which can be of type submit, reset, or button, similar to <input type="submit">, <input type="reset">, and <input type="button">.

5. <label>: A label for form elements, enhancing accessibility and usability by linking text with form controls.

6. <fieldset>: A grouping element to group related form elements, often with a <legend>.

7. <legend>: A caption for the <fieldset> element.

8. <datalist>: A list of predefined options for an <input> element, used with the list attribute of <input>.

9. <output>: Displays the result of a calculation or user action.

10.<progress>: Displays the progress of a task.

11. <meter>: Displays a measurement within a known range (e.g., disk usage, a temperature sensor).

3.The <input> types

4.The <input> attributes

HTML Form Attributes

1. The Action Attribute

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.
The action attribute value defines the web page where information proceed. It can be .php, .jsp, .asp, etc. or any URL where you want to process your form.
If action attribute value is blank then form will be processed to the same page.
In the example below, the form data is sent to a file called "action_page.php". This file contains a server-side script that handles the form data.

Example

On submit, server send form data to "action_page.php":

Code:

<!DOCTYPE html>

<html>

<body>

<h2>HTML Forms</h2>

<label for="fname">First name:</label><br>

</form>

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

</body>

</html>

Output:

2. The Target Attribute

The target attribute specifies where to open or display the response that is received after submitting the form.

The target attribute can have one of the following values:

Value	Description
_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.

Example

Here, the submitted result will open in a new browser tab:

<!DOCTYPE html>

<html>

<body>

<h2>The form target attribute</h2>

<p>When submitting this form, the result will be opened in a new browser tab:</p>

<label for="fname">First name:</label><br>

</form>

</body>

</html>

Output:

3. The Method Attribute

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.

Example

This example uses the GET method when submitting the form data:

Code:

<!DOCTYPE html>

<html>

<body>

<h2>The method Attribute</h2>

<p>This form will be submitted using the GET method:</p>

<label for="fname">First name:</label><br>

</form>

<p>After you submit, notice that the form values is visible in the address bar of the new browser tab.</p>

</body>

</html>

Output:

Example

This example uses the POST method when submitting the form data:

<!DOCTYPE html>

<html>

<body>

<h2>The method Attribute</h2>

<p>This form will be submitted using the POST method:</p>

<label for="fname">First name:</label><br>

</form>

<p>After you submit, notice that, unlike the GET method, the form values is NOT visible in the address bar of the new browser tab.</p>

</body>

</html>

Output:

Notes on GET:

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:

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

Tip: Always use POST if the form data contains sensitive or personal information!

4.The Autocomplete Attribute

The HTML autocomplete attribute is a newly added attribute of HTML5 which enables an input field to complete automatically.
ü It can have two values "on" and "off" which enables autocomplete either ON or OFF. The default value of autocomplete attribute is "on".
ü When autocomplete is on, the browser automatically complete values based on values that the user has entered before.
ü It can be used with <form> element and <input> element both.

Example

A form with autocomplete on:

<!DOCTYPE html>

<html>

<body>

<h1>The form autocomplete attribute</h1>

<p>Fill in and submit the form, then reload the page, start to fill in the form again - and see how autocomplete works.</p>

<p>Then, try to set autocomplete to "off".</p>

<label for="fname">First name:</label>

<label for="email">Email:</label>

</form>

</body>

</html>

Output:

5. The Novalidate Attribute

The novalidate attribute is newly added Boolean attribute of HTML5.

If we apply this attribute in form then it does not perform any type of validation and submit the form.

When present, it specifies that the form-data (input) should not be validated when submitted.

The novalidate attribute is a boolean attribute.

Example

A form with a novalidate attribute:

<!DOCTYPE html>

<html>

<body>

<h1>The form novalidate attribute</h1>

<p>The novalidate attribute indicates that the form input is not to be validated on submit:</p>

<label for="email">Enter your email:</label>

</form>

</body>

</html>

Output:

6.The accept-charset Attribute

The accept-charset attribute specifies the character encodings that are to be used for the form submission.
A space-separated list of one or more character encodings that are to be used for the form submission.
Common values:

UTF-8 - Character encoding for Unicode
ISO-8859-1 - Character encoding for the Latin alphabet

In theory, any character encoding can be used, but no browser understands all of them. The more widely a character encoding is used, the better the chance that a browser will understand it.

Syntax:
<form accept-charset="character_set">

Example:
<!DOCTYPE html>
<html>
<body>
<h1>The form accept-charset attribute</h1>
<form action="/action_page.php" accept-charset="utf-8">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:

7. The enctype Attribute

1.The enctype attribute specifies how the form-data should be encoded when submitting it to the server.

2.The enctype attribute can be used only if method="post".

Attribute Values

Value	Description
application/x-www-form-urlencoded	Default. All characters are encoded before sent (spaces are converted to "+" symbols, and special characters are converted to ASCII HEX values)
multipart/form-data	This value is necessary if the user will upload a file through the form . It does not encode any character.
text/plain	Sends data without any encoding at all. Not recommended

Example:

<!DOCTYPE html>

<html>

<body>

<h1>The form enctype attribute</h1>

<form action="/action_page_binary.asp" method="post" enctype="multipart/form-data">

<label for="fname">First name:</label>

<input type="text" id="fname" name="fname"><br><br>

<label for="lname">Last name:</label>

<input type="text" id="lname" name="lname"><br><br>

<input type="submit" value="Submit">

</form>

</body>

</html>

Output:

8. The name Attribute

1.The name attribute specifies the name of a form.

2.The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted.

Syntax:

Attribute Values

Value	Description
Text	Specifies the name of the form

Example:
<!DOCTYPE html>
<html>
<head>
<script>
function formSubmit() {
document.forms["myForm"].submit();
}
</script>
</head>
<body>
<h1>The form name attribute</h1>
<form name="myForm" action="/action_page.php" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="button" onclick="formSubmit()" value="Send form data!">
</form>

<p>Notice that the JavaScript in the head section uses the name of the form to specify which form to submit.</p>
</body>
</html>
Output:

9.The rel Attribute

The rel attribute in an HTML <form> element specifies the relationship between the current document and the linked resource (usually the target of the form submission).
It can be used to define the nature of the relationship and to provide additional metadata.
This attribute is commonly used with link elements, but when used with forms, it helps in identifying the relationship between the form and its target.

Syntax

Attribute Values

Value	Description
external	Specifies that the referenced document is not a part of the current site
Help	Links to a help document
license	Links to copyright information for the document
Next	The next document in a selection
nofollow	Links to an unendorsed document, like a paid link. ("nofollow" is used by Google, to specify that the Google search spider should not follow that link)
noopener	Indicates that the new page should not be able to access the window.opener property and ensures it runs in a separate process.
noreferrer	Specifies that the browser should not send a HTTP referrer header if the user follows the hyperlink. Indicates that the new page should not be able to access the window.opener property and ensures it runs in a separate process.
Prev	The previous document in a selection
search	Links to a search tool for the document

window.opener property :

The window.opener property in JavaScript refers to a reference to the window that opened the current window. This is particularly relevant when dealing with hyperlinks or forms that open a new window or tab.

The window.opener property allows the newly opened window to interact with and manipulate the original window that opened it.

For example, if you have a link that opens a new window:

<a href="https://example.com" target="_blank">Open in new window</a>

When the new window is opened, it can access and manipulate the original window using window.opener. This can be useful but also poses a security risk because the new window can potentially perform malicious actions on the original window.

To mitigate this risk, you can use the rel="noopener" attribute in your links:

<a href="https://example.com" target="_blank" rel="noopener">Open in new window</a>

By using rel="noopener", you prevent the new window from having access to window.opener, thereby enhancing security.

Example:
<!DOCTYPE html>
<html>
<head>
    <title>Opener Example</title>
</head>
<body>
    <a href="https://example.com" target="_blank" rel="noopener">Open in new window</a>
    <script>
        if (window.opener) {
            console.log('This window was opened by another window.');
        } else {
            console.log('This window was not opened by another window.');
        }
    </script>
</body>
</html>
Output:

ü The HTML <form> Elements

The HTML <form> element can contain one or more of the following form elements:

1.       <input>
2.       <label>
3.       <select>
4.       <textarea>
5.       <button>
6.       <fieldset>
7.       <legend>
8.       <datalist>
9.       <output>

10. <option>

11. <optgroup>

HTML Form Elements

Tag	Description
<input>	Defines an input control
<textarea>	Defines a multiline input control (text area)
<label>	Defines a label for an <input> element
<fieldset>	Groups related elements in a form
<legend>	Defines a caption for a <fieldset> element
<select>	Defines a drop-down list
<optgroup>	Defines a group of related options in a drop-down list
<option>	Defines an option in a drop-down list
<button>	Defines a clickable button
<datalist>	Specifies a list of pre-defined options for input controls
<output>	Defines the result of a calculation

1. The <input> Element

One of the most used form elements is the <input> element.
The <input> element can be displayed in several ways, depending on the type attribute.

Example

<!DOCTYPE html>

<html>

<body>

<h2>The input Element</h2>

<label for="fname">First name:</label><br>

</form>

</body>

</html>

Output:

2. The <label> Element

The <label> element defines a label for several form elements.
<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.
<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.
for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.

Example:

<!DOCTYPE html>

<html>

<body>

<h2>The select Element</h2>

<p>The select element defines a drop-down list:</p>

<label for="cars">Choose a car:</label>

<option value="volvo">Volvo</option>

</select>

</form>

</body>

</html>

Output:

3. The <select> Element

The <select> element defines a drop-down list

Example:

<!DOCTYPE html>

<html>

<body>

<h2>The select Element</h2>

<p>The select element defines a drop-down list:</p>

<label for="cars">Choose a car:</label>

<option value="volvo">Volvo</option>

</select>

</form>

</body>

</html>

Output:

The <option> element defines 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:

Example:

<!DOCTYPE html>

<html>

<body>

<h2>Pre-selected Option</h2>

<p>You can preselect an option with the selected attribute:</p>

<label for="cars">Choose a car:</label>

<option value="volvo">Volvo</option>

</select>

</form>

</body>

</html>

Output:

Visible Values:

Use the size attribute to specify the number of visible values:

Example:

<!DOCTYPE html>

<html>

<body>

<h2>Visible Option Values</h2>

<p>Use the size attribute to specify the number of visible values.</p>

<label for="cars">Choose a car:</label>

<option value="volvo">Volvo</option>

</select><br><br>

</form>

</body>

</html>

Output:

Allow Multiple Selections:

Use the multiple attribute to allow the user to select more than one value.

Example:

<!DOCTYPE html>

<html>

<body>

<h2>Allow Multiple Selections</h2>

<p>Use the multiple attribute to allow the user to select more than one value.</p>

<label for="cars">Choose a car:</label>

<option value="volvo">Volvo</option>

</select><br><br>

</form>

<p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>

</body>

</html>

Output:

4. The <textarea> Element

The <textarea> element defines a multi-line input field (a text area). It can hold unlimited number of characters and the texts are displayed in a fixed-width font (usually courier).
The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.

Example:

<!DOCTYPE html>

<html>

<body>

<h2>Textarea</h2>

<p>The textarea element defines a multi-line input field.</p>

<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>

</form>

</body>

</html>

Output:

5. The <button> Element

The <button> element defines a clickable button:
The <button> tag is used to create a clickable button within HTML form on your webpage.
You can put content like text or image within the <button>........</button> tag.
You should always specify the type attribute for a <button> tag. Different browsers use different default type for the button element.
HTML Button tag can be used inside and outside the form.
If you use it inside the form, it works as the submit button. You can also use it as reset button.
If you use it outside the form, you can call JavaScript function on it.

Example(display the button.)
<!DOCTYPE>
<html>
<body>
<form>
<button name="button" value="OK" type="button">Click Here</button>
</form>
</body>
</html>
Output:

Example: Calling JavaScript Function
<!DOCTYPE>
<html>
<body>
<button name="button" value="OK" type="button" onclick="hello()">Click Here</button>
<script>
function hello(){
alert("hello javatpoint user");
}
</script>
</body>
</html>
Output:

Example: Button to Submit Form
<!DOCTYPE>
<html>
<body>
<form>
Enter Name:<input type="text" name="name"/><br/>
<button>Submit</button>
</form>
</body>
</html>
Output:

Example: Reset Form
<!DOCTYPE>
<html>
<body>
<form>
Enter Name:<input type="text" name="name"/><br/>
<button type="reset">reset</button>
</form>
</body>
</html>
Output:

6. The <fieldset> and <legend> Elements

The <fieldset> element is used to group related data in a form.
The <fieldset> tag draws a box around the related elements.
The <legend> element defines a caption for the <fieldset> element or is used to insert a title or caption to its parent element such as <fieldset>.
The <legend> element must be the first child of <fieldset > element.
By using <legend> tag with <form> elements, it is easy to understand the purpose of grouped form elements.

Example:

<!DOCTYPE>

<html>

<body>

<h1>Example of fieldset Tag</h1>

<p>User Feedback Form</p>

<form>

<legend>User basic information:</legend>

<label>First Name</label><br>

<label>Enter Email</label><br>

</fieldset><br>

<label >Enter your feedback:</label><br>

</form>

</body>

</html>

Output:

7. The <datalist> Element

The <datalist> element is introduced in HTML5.
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 <datalist> tag is used to provide an "autocomplete" feature for <input> elements. Users will see a drop-down list of pre-defined options as they input data.
The <datalist> element's id attribute must be equal to the <input> element's list attribute (this binds them together).

Example:
<!DOCTYPE html>
<html>
<body>
<h1>The datalist element</h1>
<form action="/action_page.php" method="get">
<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
    <option value="Edge">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>
<input type="submit">
</form>
<p><strong>Note:</strong> The datalist tag is not supported in Safari 12.0 (or earlier).</p>
</body>
</html>
Output:

8. The <output> Element

The <output> element represents the result of a calculation (like one performed by a script).

Example
Perform a calculation and show the result in an <output> element:
<!DOCTYPE html>
<html>
<body>
<h1>The output element</h1>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50">
+<input type="number" id="b" value="25">
=<output name="x" for="a b"></output>
</form>
<p><strong>Note:</strong> The output element is not supported in Edge 12 (or earlier).</p>
</body>
</html>
Output:

Explanation :

This form element contains an oninput attribute, which is an event handler. It triggers the execution of the JavaScript code whenever an input event occurs (i.e., when the user interacts with the form elements).
The JavaScript code inside oninput calculates the sum of the values of the inputs with id="a" and id="b", parses them as integers using parseInt(), and sets this sum as the value of the output element x.
<input type="range" id="a" value="50">

This is a slider input element with an initial value of 50 and an id of "a".

<input type="number" id="b" value="25">

This is a numeric input element with an initial value of 25 and an id of "b".<output name="x" for="a b"></output>

This element is used to display the result of the calculation. The name attribute is set to "x", and the for attribute specifies that this output is related to the inputs with ids "a" and "b".

How It Works

When the user adjusts the slider (input type="range") or changes the number (input type="number"), the oninput event is triggered.
The JavaScript code x.value=parseInt(a.value)+parseInt(b.value) runs, which:

Retrieves the current values of the inputs with ids "a" and "b".
Converts these values to integers using parseInt().
Adds these integers together.
Sets the result as the value of the output element x, which updates the displayed value inside the <output> element in real time.

This interactive form allows the user to see the sum of the values of the two input elements immediately as they adjust them.

Different Attributes Of <input> Element

1. The Type attributes of <input> Element

The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type attribute.

Here are the different input types you can use in HTML:

1.       <input type="button">
2.       <input type="checkbox">
3.       <input type="color">
4.       <input type="date">
5.       <input type="datetime-local">
6.       <input type="email">
7.       <input type="file">
8.       <input type="hidden">
9.       <input type="image">
10.    <input type="month">
11.    <input type="number">
12.    <input type="password">
13.    <input type="radio">
14.    <input type="range">
15.    <input type="reset">
16.    <input type="search">
17.    <input type="submit">
18.    <input type="tel">
19.    <input type="text">
20.    <input type="time">
21.    <input type="url">
22.    <input type="week">

Tip: The default value of the type attribute is "text".

Input Type Text

<input type="text"> defines a single-line text input field:

Example

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

This is how the HTML code above will be displayed in a browser:

First name:

Last name:

Input Type Password

<input type="password"> defines a password field:

Example

<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd">
</form>

This is how the HTML code above will be displayed in a browser:

Username:

Password:

The characters in a password field are masked (shown as asterisks or circles).

Input Type Submit

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

Example

<form 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><br>
  <input type="submit" value="Submit">
</form>

This is how the HTML code above will be displayed in a browser:

If you omit the submit button's value attribute, the button will get a default text:

Example

Input Type Reset

<input type="reset"> defines a reset button that will reset all form values to their default values:

Example

This is how the HTML code above will be displayed in a browser:

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

<input type="radio"> defines a radio button.

Radio buttons let a user select ONLY ONE of a limited number of choices:

Example

<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

This is how the HTML code above will be displayed in a browser:

HTML
CSS
JavaScript

Input Type Checkbox

<input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

Example

This is how the HTML code above will be displayed in a browser:

I have a bike
I have a car
I have a boat

Input Type Button

<input type="button"> defines a button:

Example

This is how the HTML code above will be displayed in a browser:

Input Type Color

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

Example

<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>

Input Type Date

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

Example

<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>

You can also use the min and max attributes to add restrictions to dates:

Example

Input Type Datetime-local

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

Example

<form>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>

Input Type Email

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

Example

<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>

Input Type Image

The <input type="image"> defines an image as a submit button.

The path to the image is specified in the src attribute.

Example

Input Type File

The <input type="file"> defines a file-select field and a "Browse" button for file uploads.

Example

<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>

Input Type Hidden

The <input type="hidden"> defines a hidden input field (not visible to a user).

A hidden field lets web developers include data that cannot be seen or modified by users when a form is submitted.

A hidden field often stores what database record that needs to be updated when the form is submitted.

Note: While the value is not displayed to the user in the page's content, it is visible (and can be edited) using any browser's developer tools or "View Source" functionality. Do not use hidden inputs as a form of security!

Example

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="hidden" id="custId" name="custId" value="3487">
  <input type="submit" value="Submit">
</form>

Input Type Month

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

Example

<form>
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>

Input Type Number

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

Example

<form>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

Input Restrictions

Here is a list of some common input restrictions:

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

You will learn more about input restrictions in the next chapter.

The following example displays a numeric input field, where you can enter a value from 0 to 100, in steps of 10. The default value is 30:

Example

<form>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>

Input Type Range

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

Example

<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>

Try it Yourself »

Input Type Search

The <input type="search"> is used for search fields (a search field behaves like a regular text field).

Example

<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>

Input Type Tel

The <input type="tel"> is used for input fields that should contain a telephone number.

Example

<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

Input Type Time

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

Example

<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>

Input Type Url

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

Example

<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>

Input Type Week

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

Example

<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>

The value Attribute

The input value attribute specifies an initial value for an input field:

Example

Input fields with initial (default) values:

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

The readonly Attribute

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!

Example

A read-only input field:

<form>
  <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">
</form>

The disabled Attribute

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!

Example

A disabled input field:

<form>
  <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">
</form>

The size Attribute

The input size attribute specifies the visible width, in characters, of an input field.

The default value for size is 20.

Note: The size attribute works with the following input types: text, search, tel, url, email, and password.

Example

Set a width for an input field:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" size="4">
</form>

The maxlength Attribute

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.

Example

Set a maximum length for an input field:

The min and max Attributes

The input min and max attributes 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.

Example

Set a max date, a min date, and a range of legal values:

<form>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>

  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

The multiple Attribute

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.

Example

A file upload field that accepts multiple values:

<form>
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple>
</form>

The pattern Attribute

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.

Tip: Learn more about regular expressions in our JavaScript tutorial.

Example

An input field that can contain only three letters (no numbers or special characters):

<form>
<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">
</form>

The placeholder Attribute

The input placeholder attribute specifies a short 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, number, tel, email, and password.

Example

An input field with a placeholder text:

<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

The required Attribute

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.

Example

A required input field:

<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</form>

The step Attribute

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.

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

Example

An input field with a specified legal number intervals:

<form>
<label for="points">Points:</label>
<input type="number" id="points" name="points" step="3">
</form>

Note: Input restrictions are not foolproof, and JavaScript provides many ways to add illegal input. To safely restrict input, it must also be checked by the receiver (the server)!

The autofocus Attribute

The input autofocus attribute specifies that an input field should automatically get focus when the page loads.

Example

Let the "First name" input field automatically get focus when the page loads:

<form>
  <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">
</form>

The height and width Attributes

The input height and width attributes specify the height and width of an <input type="image"> element.

Tip: 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).

Example

Define an image as the submit button, with height and width attributes:

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

The list Attribute

The input list attribute refers to a <datalist> element that contains pre-defined options for an <input> element.

Example

An <input> element with pre-defined values in a <datalist>:

The autocomplete Attribute

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.

Example

An HTML form with autocomplete on, and off for one input field:

<form action="/action_page.php" autocomplete="on">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="off"><br><br>
  <input type="submit" value="Submit">
</form>

HTML Input form* Attributes

The form Attribute

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.

Example

An input field located outside of the HTML form (but still a part of the form):

<form action="/action_page.php" id="form1">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
</form>

<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">

The formaction Attribute

The input formaction attribute specifies the URL of the file that will process the input when the form is submitted.

Note: This attribute overrides the action attribute of the <form> element.

The formaction attribute works with the following input types: submit and image.

Example

An HTML form with two submit buttons, with different actions:

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formaction="/action_page2.php" value="Submit as Admin">
</form>

The formenctype Attribute

The input formenctype attribute specifies how the form-data should be encoded when submitted (only for forms with method="post").

Note: This attribute overrides the enctype attribute of the <form> element.

The formenctype attribute works with the following input types: submit and image.

Example

A form with two submit buttons. The first sends the form-data with default encoding, the second sends the form-data encoded as "multipart/form-data":

<form action="/action_page_binary.asp" method="post">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>

The formmethod Attribute

The input formmethod attribute defines the HTTP method for sending form-data to the action URL.

Note: 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").

Notes on the "get" method:

This method appends the form-data to the URL in name/value pairs
This method is useful for form submissions where a user want to bookmark the result
There is a limit to how much data you can place in a URL (varies between browsers), therefore, you cannot be sure that all of the form-data will be correctly transferred
Never use the "get" method to pass sensitive information! (password or other sensitive information will be visible in the browser's address bar)

Notes on the "post" method:

This method sends the form-data as an HTTP post transaction
Form submissions with the "post" method cannot be bookmarked
The "post" method is more robust and secure than "get", and "post" does not have size limitations

Example

A form with two submit buttons. The first sends the form-data with method="get". The second sends the form-data with method="post":

<form action="/action_page.php" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit using GET">
  <input type="submit" formmethod="post" value="Submit using POST">
</form>

The formtarget Attribute

The input formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.

Note: This attribute overrides the target attribute of the <form> element.

The formtarget attribute works with the following input types: submit and image.

Example

A form with two submit buttons, with different target windows:

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>

The formnovalidate Attribute

The input formnovalidate attribute specifies that an <input> element should not be validated when submitted.

Note: This attribute overrides the novalidate attribute of the <form> element.

The formnovalidate attribute works with the following input types: submit.

Example

A form with two submit buttons (with and without validation):

<form action="/action_page.php">
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formnovalidate="formnovalidate"
value="Submit without validation">
</form>

The novalidate Attribute

The novalidate attribute is a <form> attribute.

When present, novalidate specifies that all of the form-data should not be validated when submitted.

Example

Specify that no form-data should be validated on submit:

<form action="/action_page.php" novalidate>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
</form>

Form in Detail

HTML Forms

Introduction:

Why use HTML Form

HTML <form>

Different Parts of a Form:

1.The <form> Attributes :

2. The <form> Element/Controls

3.The <input> types

4.The <input> attributes

HTML Form Attributes

1. The Action Attribute

Example

2. The Target Attribute

Example

3. The Method Attribute

Example

Example

4.The Autocomplete Attribute

Example

5. The Novalidate Attribute

Example

6.The accept-charset Attribute

7. The enctype Attribute

Attribute Values

Example:

<!DOCTYPE html>

<html>

<body>

<h1>The form enctype attribute</h1>

<form action="/action_page_binary.asp" method="post" enctype="multipart/form-data">

<label for="fname">First name:</label>

<input type="text" id="fname" name="fname"><br><br>

<label for="lname">Last name:</label>

<input type="text" id="lname" name="lname"><br><br>

<input type="submit" value="Submit">

</form>

</body>

</html>

Output:

8. The name Attribute

Attribute Values

Syntax

Attribute Values

ü The HTML <form> Elements

HTML Form Elements

1. The <input> Element

Example

2. The <label> Element

3. The <select> Element

Visible Values:

Allow Multiple Selections:

4. The <textarea> Element

5. The <button> Element

<!DOCTYPE>

<html>

<body>

<form>

Enter Name:<input type="text" name="name"/><br/>

<button type="reset">reset</button>

</form>

</body>

</html>

Output:

6. The <fieldset> and <legend> Elements

7. The <datalist> Element

8. The <output> Element

Example

How It Works

1. The Type attributes of <input> Element

Input Type Text

Example

Input Type Password

Example

Input Type Submit

Example

Example

Input Type Reset

Example

Input Type Radio

HTML `<form>`