Forms – brown-salmon-372873.hostingersite.com

The HTML <form> Elements

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

Go to Forms (Core Concept)

<input>
<label>
<textarea>
<button>

→ View Forms Core Concepts (input, label, textarea, button)

Details of the following tags are on this page. For details of the above tags, go to Form(core concept).

<select>
<fieldset>
<legend>
<datalist>
<output>
<option>
<optgroup>

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>

<form 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">Fiat</option>
    <option value="audi">Audi</option>
  </select>
</form>

</body>
</html>

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

Result

The select Element

The select element defines a drop-down list:

Choose a car:

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

<option value="fiat" selected>Fiat</option>

1	<option value="fiat" selected>Fiat</option>

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.

Example

<!DOCTYPE html>
<html>
<body>

<h3>Grouping Form Data with Fieldset</h3>

<p>The fieldset element is used to group related data in a form, and the legend element defines a caption for the fieldset element.</p>

<form action="/action_page.php">
  <fieldset>
    <legend>Personalia:</legend>
    <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>
  </fieldset>
</form>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h3>Grouping Form Data with Fieldset</h3>

<p>The fieldset element is used to group related data in a form, and the legend element defines a caption for the fieldset element.</p>

<legend>Personalia:</legend>

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

</fieldset>

</form>

</body>

</html>

Result

Grouping Form Data with Fieldset

The fieldset element is used to group related data in a form, and the legend element defines a caption for the fieldset element.

The <datalist> Element

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.

Example

<!DOCTYPE html>
<html>
<body>

<h3>The datalist Element</h3>

<p>The datalist element specifies a list of pre-defined options for an input element.</p>

<form action="/action_page.php">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Edge">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h3>The datalist Element</h3>

<p>The datalist element specifies a list of pre-defined options for an input element.</p>

</datalist>

</form>

</body>

</html>

Result

The datalist Element

The datalist element specifies a list of pre-defined options for an input element.

The <output> Element

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

Example

<!DOCTYPE html>
<html>
<body>

<h3>The output Element</h3>
<p>The output element represents the result of a calculation.</p>

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

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h3>The output Element</h3>

<p>The output element represents the result of a calculation.</p>

<form action="/action_page.php"

oninput="x.value=parseInt(a.value)+parseInt(b.value)">

100 +

</form>

</body>

</html>

Result

The output Element

The output element represents the result of a calculation.

HTML Input Types

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

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

📝 Text Inputs

Input Type Text

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

Example

<!DOCTYPE html>
<html>
<body>

<h3>Text field</h3>
<p>The <strong>input type="text"</strong> defines a one-line text input field:</p>

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

<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of a text field is 20 characters.</p>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h3>Text field</h3>

<p>The <strong>input type="text"</strong> defines a one-line text input field:</p>

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

</form>

<p>Note that the form itself is not visible.</p>

<p>Also note that the default width of a text field is 20 characters.</p>

</body>

</html>

Result

Text field

The input type=”text” defines a one-line text input field:

Input Type Password

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

Example

<!DOCTYPE html>
<html>
<body>

<h3>Password field</h3>

<p>The <strong>input type="password"</strong> defines a password field:</p>

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

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

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h3>Password field</h3>

<p>The <strong>input type="password"</strong> defines a password field:</p>

<label for="username">Username:</label><br>

<label for="pwd">Password:</label><br>

</form>

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

</body>

</html>

Result

Password field

The input type=”password” defines a password field:

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

<!DOCTYPE html>
<html>
<body>

<h2>Email Field</h2>

<p>The <strong>input type="email"</strong> is used for input fields that should contain an e-mail address:</p>

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

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h2>Email Field</h2>

<p>The <strong>input type="email"</strong> is used for input fields that should contain an e-mail address:</p>

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

</form>

</body>

</html>

Result

Email Field

The input type=”email” is used for input fields that should contain an e-mail address:

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

<!DOCTYPE html>
<html>
<body>

<h2>Number Field</h2>

<p>The <strong>input type="number"</strong> defines a numeric input field.</p>

<p>You can use the min and max attributes to add numeric restrictions in the input field:</p>

<form action="/action_page.php">
  <label 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>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h2>Number Field</h2>

<p>The <strong>input type="number"</strong> defines a numeric input field.</p>

<p>You can use the min and max attributes to add numeric restrictions in the input field:</p>

<label for="quantity">Quantity (between 1 and 5):</label>

</form>

</body>

</html>

Result

Number Field

The input type=”number” defines a numeric input field.

You can use the min and max attributes to add numeric restrictions in the input field:

🚀 Buttons

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

<!DOCTYPE html>
<html>
<body>

<h2>Submit Button</h2>

<p>The <strong>input type="submit"</strong> defines a button for submitting form data to a form-handler:</p>

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

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

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h2>Submit Button</h2>

<p>The <strong>input type="submit"</strong> defines a button for submitting form data to a form-handler:</p>

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

</form>

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

</body>

</html>

If you click “Submit”, the form-data will be sent to a page called “/action_page.php”.

🔘 Selection Inputs

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

<!DOCTYPE html>
<html>
<body>

<h2>Radio Buttons</h2>

<p>The <strong>input type="radio"</strong> defines a radio button:</p>

<p>Choose your favorite Web language:</p>
<form action="/action_page.php">
  <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><br><br>
  <input type="submit" value="Submit">
</form> 

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h2>Radio Buttons</h2>

<p>The <strong>input type="radio"</strong> defines a radio button:</p>

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

<label for="javascript">JavaScript</label><br><br>

</form>

</body>

</html>

Result

Radio Buttons

The input type=”radio” defines a radio button:

Choose your favorite Web language:

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

<!DOCTYPE html>
<html>
<body>

<h2>Checkboxes</h2>
<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>

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

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h2>Checkboxes</h2>

<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>

</form>

</body>

</html>

Result

Checkboxes

The input type=”checkbox” defines a checkbox:

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

<!DOCTYPE html>
<html>
<body>

<h2>Show a Color Picker</h2>

<p>The <strong>input type="color"</strong> is used for input fields that should contain a color.</p>

<form action="/action_page.php">
  <label for="favcolor">Select your favorite color:</label>
  <input type="color" id="favcolor" name="favcolor" value="#00e1ff">
  <input type="submit" value="Submit">
</form>

<p><b>Note:</b> type="color" is not supported in Internet Explorer 11.</p>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h2>Show a Color Picker</h2>

<p>The <strong>input type="color"</strong> is used for input fields that should contain a color.</p>

<label for="favcolor">Select your favorite color:</label>

</form>

<p><b>Note:</b> type="color" is not supported in Internet Explorer 11.</p>

</body>

</html>

Result

Show a Color Picker

The input type=”color” is used for input fields that should contain a color.

Input Type File

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

Example

<!DOCTYPE html>
<html>
<body>

<h1>File upload</h1>

<p>Show a file-select field which allows a file to be chosen for upload:</p>
<form action="/action_page.php">
  <label for="myfile">Select a file:</label>
  <input type="file" id="myfile" name="myfile"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h1>File upload</h1>

<p>Show a file-select field which allows a file to be chosen for upload:</p>

<label for="myfile">Select a file:</label>

</form>

</body>

</html>

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

<!DOCTYPE html>
<html>
<body>

<h2>Display an Image as the Submit button</h2>

<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="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

<p><b>Note:</b> The input type="image" sends the X and Y coordinates of the click that activated the image button.</p>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h2>Display an Image as the Submit button</h2>

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

</form>

<p><b>Note:</b> The input type="image" sends the X and Y coordinates of the click that activated the image button.</p>

</body>

</html>

Result

Display an Image as the Submit button

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

<!DOCTYPE html>
<html>
<body>

<h2>Date Field</h2>

<p>The <strong>input type="date"</strong> is used for input fields that should contain a date.</p>

<form action="/action_page.php">
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
  <input type="submit" value="Submit">
</form>

<p><strong>Note:</strong> type="date" is not supported in Internet Explorer 11.</p>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h2>Date Field</h2>

<p>The <strong>input type="date"</strong> is used for input fields that should contain a date.</p>

<label for="birthday">Birthday:</label>

</form>

<p><strong>Note:</strong> type="date" is not supported in Internet Explorer 11.</p>

</body>

</html>

Result

Date Field

The input type=”date” is used for input fields that should contain a date.

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

<!DOCTYPE html>
<html>
<body>

<h2>Local Date Field</h2>

<p>The <strong>input type="datetime-local"</strong> specifies a date and time input field, with no time zone.</p>

<form action="/action_page.php">
  <label for="birthdaytime">Birthday (date and time):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">
  <input type="submit" value="Submit">
</form>

<p><strong>Note:</strong> type="datetime-local" is not supported in Internet Explorer 11.</p>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h2>Local Date Field</h2>

<p>The <strong>input type="datetime-local"</strong> specifies a date and time input field, with no time zone.</p>

<label for="birthdaytime">Birthday (date and time):</label>

</form>

<p><strong>Note:</strong> type="datetime-local" is not supported in Internet Explorer 11.</p>

</body>

</html>

Result

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

<!DOCTYPE html>
<html>
<body>

<h2>Month Field</h2>

<p>The <strong>input type="month"</strong> allows the user to select a month and year.</p>

<form action="/action_page.php">
  <label for="bdaymonth">Birthday (month and year):</label>
  <input type="month" id="bdaymonth" name="bdaymonth">
  <input type="submit" value="Submit">
</form>

<p><strong>Note:</strong> type="month" is not supported in Firefox, Safari, or Internet Explorer 11.</p>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h2>Month Field</h2>

<p>The <strong>input type="month"</strong> allows the user to select a month and year.</p>

<label for="bdaymonth">Birthday (month and year):</label>

</form>

<p><strong>Note:</strong> type="month" is not supported in Firefox, Safari, or Internet Explorer 11.</p>

</body>

</html>

Result

Month Field

The input type=”month” allows the user to select a month and year.

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

<!DOCTYPE html>
<html>
<body>

<h1>Show a Time Input Control</h1>

<p>The <strong>input type="time"</strong> allows the user to select a time (no time zone):</p>

<p>If the browser supports it, a time picker pops up when entering the input field.</p>

<form action="/action_page.php">
  <label for="appt">Select a time:</label>
  <input type="time" id="appt" name="appt">
  <input type="submit" value="Submit">
</form>

<p><strong>Note:</strong> type="time" is not supported in Internet Explorer 11.</p>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h1>Show a Time Input Control</h1>

<p>The <strong>input type="time"</strong> allows the user to select a time (no time zone):</p>

<p>If the browser supports it, a time picker pops up when entering the input field.</p>

<label for="appt">Select a time:</label>

</form>

<p><strong>Note:</strong> type="time" is not supported in Internet Explorer 11.</p>

</body>

</html>

Result