21/4/2020 HTML Form Elements

w3schools.com

  HTML CSS MORE   

HTML Form Elements

❮ Previous Next ❯

This chapter describes all the different HTML form elements.

The <input> Element

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

The <input> element can be displayed in several ways, depending on the type
attribute.

Example

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

Try it Yourself »

If the type attribute is omitted, the input field gets the default type: "text".

All the different input types are covered in the next chapter: HTML Input Types.

file:///C:/Users/Peregrin0/Documents/cursos programacion/www.w3schools.com/html/html_form_elements.html 1/11

21/4/2020 HTML Form Elements

The <select> Element

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

Example

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

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

<select name="cars" size="3">

<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
file:///C:/Users/Peregrin0/Documents/cursos programacion/www.w3schools.com/html/html_form_elements.html 2/11
21/4/2020 HTML Form Elements

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

Example

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

file:///C:/Users/Peregrin0/Documents/cursos programacion/www.w3schools.com/html/html_form_elements.html 3/11

21/4/2020 HTML Form Elements

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

The cat was playing in the garden.

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 »

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

Click Me!
file:///C:/Users/Peregrin0/Documents/cursos programacion/www.w3schools.com/html/html_form_elements.html 4/11
21/4/2020 HTML Form Elements

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

The <datalist> Element

file:///C:/Users/Peregrin0/Documents/cursos programacion/www.w3schools.com/html/html_form_elements.html 5/11
21/4/2020 HTML Form Elements

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">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>

file:///C:/Users/Peregrin0/Documents/cursos programacion/www.w3schools.com/html/html_form_elements.html 6/11

21/4/2020 HTML Form Elements

<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

Tag Description

<form> Defines an HTML form for user input

<input> Defines an input control

file:///C:/Users/Peregrin0/Documents/cursos programacion/www.w3schools.com/html/html_form_elements.html 7/11
21/4/2020 HTML Form Elements

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

COLOR PICKER

HOW TO

Tabs
Dropdowns
Accordions
Side Navigation
Top Navigation
file:///C:/Users/Peregrin0/Documents/cursos programacion/www.w3schools.com/html/html_form_elements.html 8/11
21/4/2020 HTML Form Elements

Modal Boxes
Progress Bars
Parallax
Login Form
HTML Includes
Google Maps
Range Sliders
Tooltips
Slideshow
Filter List
Sort List

SHARE

 


CERTIFICATES

HTML
CSS
JavaScript
SQL
Python
PHP
jQuery
Bootstrap
XML

Read More »

REPORT ERROR

PRINT PAGE

FORUM

ABOUT

file:///C:/Users/Peregrin0/Documents/cursos programacion/www.w3schools.com/html/html_form_elements.html 9/11

21/4/2020 HTML Form Elements

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
HTML Certificate
CSS Certificate
JavaScript Certificate
SQL Certificate
Python Certificate
jQuery Certificate
PHP Certificate
Bootstrap Certificate

file:///C:/Users/Peregrin0/Documents/cursos programacion/www.w3schools.com/html/html_form_elements.html 10/11

21/4/2020 HTML Form Elements

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.

file:///C:/Users/Peregrin0/Documents/cursos programacion/www.w3schools.com/html/html_form_elements.html 11/11