8/17/2020 HTML Form Elements

  HTML CSS MORE  EXERCISES   

w3schools.com

HTML Form Elements

❮ Previous Next ❯

This chapter describes all the different HTML form elements.

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

One of the most used form element is the <input> element.

https://www.w3schools.com/html/html_form_elements.asp 1/13
8/17/2020 HTML Form Elements

The <input> element can be displayed in several ways, depending on the type
  HTML CSS MORE  EXERCISES   
attribute.

Example

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

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

Try it Yourself »

All the different values of the type attribute are covered in the next chapter: HTML
Input Types.

The <label> Element

The <label> element defines a label for several 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 <select> Element

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

Example

<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>
https://www.w3schools.com/html/html_form_elements.asp 2/13
8/17/2020 HTML Form Elements

<option value="audi">Audi</option>
  HTML CSS MORE 
</select>
EXERCISES   

Try it Yourself »

The <option> elements 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>

Try it Yourself »

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

Example

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

Try it Yourself »

Allow Multiple Selections:

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

https://www.w3schools.com/html/html_form_elements.asp 3/13
8/17/2020 HTML Form Elements

 HTML
Example CSS MORE  EXERCISES   

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

Try it Yourself »

The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):

Example

<textarea name="message" rows="10" cols="30">

The cat was playing in the garden.
</textarea>

Try it Yourself »

The rows attribute specifies the visible number of lines in a text area.

The cols attribute specifies the visible width of a text area.

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

https://www.w3schools.com/html/html_form_elements.asp 4/13
8/17/2020 HTML Form Elements

The 
cat was playing in the garden.
HTML CSS MORE  EXERCISES   

You can also define the size of the text area by using CSS:

Example

<textarea name="message" style="width:200px; height:600px;">

The cat was playing in the garden.
</textarea>

Try it Yourself »

The <button> Element

The <button> element defines a clickable button:

Example

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

Try it Yourself »

https://www.w3schools.com/html/html_form_elements.asp 5/13
8/17/2020 HTML Form Elements

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

  HTML CSS MORE  EXERCISES   
Click Me!

Note: Always specify the type attribute for the button element. Different browsers
may use different default types for the button element.

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

Try it Yourself »

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

Personalia:
First name:
John
Last name:
Doe

Submit

https://www.w3schools.com/html/html_form_elements.asp 6/13
8/17/2020 HTML Form Elements

  HTML CSS MORE  EXERCISES   

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

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

Try it Yourself »

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:

<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">

https://www.w3schools.com/html/html_form_elements.asp 7/13
8/17/2020 HTML Form Elements

100 +
  HTML CSS MORE 
<input type="number" id="b" name="b" value="50">
EXERCISES   
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>

Try it Yourself »

HTML Exercises

Test Yourself With Exercises

Exercise:
In the form below, add an empty drop down list with the name "cars".

<form action="/action_page.php">
< >
</ >
</form>

Submit Answer »

Start the Exercise

HTML Form Elements

https://www.w3schools.com/html/html_form_elements.asp 8/13
8/17/2020 HTML Form Elements

Tag Description
  HTML CSS MORE  EXERCISES   
<form> Defines an HTML form for user input

<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

For a complete list of all available HTML tags, visit our HTML Tag Reference.

❮ Previous Next ❯

https://www.w3schools.com/html/html_form_elements.asp 9/13
8/17/2020 HTML Form Elements

  HTML CSS MORE  EXERCISES   

COLOR PICKER

HOW TO

Tabs
Dropdowns
Accordions
Side Navigation
Top Navigation
Modal Boxes
Progress Bars
Parallax
Login Form
HTML Includes
Google Maps
Range Sliders
Tooltips
Slideshow
Filter List
Sort List

SHARE

 
https://www.w3schools.com/html/html_form_elements.asp
 10/13
8/17/2020 HTML Form Elements

  HTML CSS MORE   EXERCISES   

CERTIFICATES

HTML
CSS
JavaScript
SQL
Python
PHP
jQuery
Bootstrap
XML

Read More »

https://www.w3schools.com/html/html_form_elements.asp 11/13
8/17/2020 HTML Form Elements

  HTML CSS MORE REPORT

 ERROR
EXERCISES   
FORUM

ABOUT

SHOP

Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
jQuery Tutorial
Java Tutorial
C++ Tutorial

Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
jQuery Reference
Java Reference
Angular Reference

Top Examples
HTML Examples
CSS Examples
JavaScript Examples
How To Examples
SQL Examples
Python Examples
W3.CSS Examples
Bootstrap Examples
PHP Examples
jQuery Examples
Java Examples
XML Examples

Web Certificates

https://www.w3schools.com/html/html_form_elements.asp 12/13
8/17/2020 HTML Form Elements

HTML Certificate
  HTML CSS MORE CSS
 Certificate EXERCISES   
JavaScript Certificate
SQL Certificate
Python Certificate
jQuery Certificate
PHP Certificate
Bootstrap Certificate
XML Certificate

Get Certified »

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading
and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but
we cannot warrant full correctness of all content. While using this site, you agree to have read and
accepted our terms of use, cookie and privacy policy. Copyright 1999-2020 by Refsnes Data. All Rights
Reserved.
Powered by W3.CSS.

https://www.w3schools.com/html/html_form_elements.asp 13/13