HTML Form Elements
❮ Previous Next ❯
This chapter describes all HTML form elements.
The Element
The most important form element is the element.
The element can be displayed in several ways, depending on the type attribute.
All the different input types are covered in the next chapter.
The Element
The element defines a drop-down list:
Example
Volvo
Saab
Fiat
Audi
»
The 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
Fiat
»
The Element
The element defines a multi-line input field (a text area):
Example
The cat was playing in the garden.
»
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:

The cat was playing in the garden.
The Element
The element defines a clickable button:
Example
Click Me!
»
This is how the HTML code above will be displayed in a browser:
Click Me!
HTML5 Form Elements
HTML5 added the following form elements:
Note: Browsers do not display unknown elements. New elements that are not supported in older browsers will not “destroy” your web page.
HTML5 Element
The element specifies a list of pre-defined options for an element.
Users will see a drop-down list of the pre-defined options as they input data.
The list attribute of the element, must refer to the id attribute of the element.
Example
»
HTML5 Element
The purpose of the element is to provide a secure way to authenticate users.
The element specifies a key-pair generator field in a form.
When the form is submitted, two keys are generated, one private and one public.
The private key is stored locally, and the public key is sent to the server.
The public key could be used to generate a client certificate to authenticate the user in the future.
Example
A form with a keygen field:
Username:
Encryption:
»
HTML5 Element
The element represents the result of a calculation (like one performed by a script).
Example
Perform a calculation and show the result in an element:
<form action="/action_page.php"
oninput=”x.value=parseInt(a.value)+parseInt(b.value)”>
0
100 +
=
»
Test Yourself with Exercises!
Exercise 1 » Exercise 2 » Exercise 3 »
HTML Form Elements
= new in HTML5.
Tag Description
Defines an HTML form for user input
Defines an input control
Defines a multiline input control (text area)
Defines a label for an element
Groups related elements in a form
Defines a caption for a element
Defines a drop-down list
Defines a group of related options in a drop-down list
Defines an option in a drop-down list
Defines a clickable button
Specifies a list of pre-defined options for input controls
Defines a key-pair generator field (for forms)
Defines the result of a calculation
❮ Previous Next ❯
shahzade bau 