HTML Standard attribute: type
[this page | pdf | back links]
The
HTML type attribute indicates the type of
an element. It applies to <area>, <button>, <embed>, <input>, <keygen>, <link>, <menu>, <menuitem>, <object>, <ol>, <script>, <source> and <style> elements.
Valid attribute
values (when used with <area>, <embed>, <link>, <object>, <script>
elements) include:
Value
|
Description
|
media_type
|
The internet media type
(previously known as MIME type) of the target URL
|
Valid attribute
values (when used with <button>
elements) include:
Value
|
Description
|
button
|
Is a clickable button
|
reset
|
Is a submit button (so
submits form data)
|
submit
|
Is a reset button (so
resets form data to initial / default values)
|
Valid attribute
values (when used with <input> and <keygen> elements)
include:
Value
|
Description
|
button
|
A clickable button that
(typically) activates some JavaScript when clicked
|
checkbox
|
Input field allowing
selection of one or more options from a limited list of options
|
color
|
Input field for
selecting a colour
|
date
|
Input field for
entering a date
|
datetime
|
Input field for
entering a date and time (including time zone) (N.B. Is not currently
supported by most browsers)
|
datetime-local
|
Input field for
entering a date and time (no specific time zone)
|
email
|
E-mail address input
field (automatically validated when submitted)
|
file
|
Define a file selection
(with browse) button (for file uploads)
|
hidden
|
Hidden field (i.e. not
visible to user). Is often used to store a default value or may be used as a
variable by JavaScript
|
image
|
Define image as a
submit button
|
month
|
Input field for
entering a month and year (no specific time zone)
|
number
|
Input field for
entering a number. The default value is the value attribute. Minimum, maximum
and legal number intervals are defined by the min, max and step attributes
|
password
|
Password field
(characters are masked)
|
radio
|
Buttons allowing user
to select only one of a limited number of choices
|
range
|
Slider control, i.e. a
control whose exact values are not important. Default range is 0 to 100 but
restrictions can be placed, e.g. using the min, max and step attributes.
|
reset
|
Reset button (e.g. for
resetting all form values to default values)
|
search
|
A search field
|
submit
|
Submit button
|
tel
|
Input field for
entering a telephone number
|
text
|
Single-line input field
for entering text
|
time
|
Input field for
entering a time (no specific time zone)
|
url
|
Input field for
entering a URL
|
week
|
Input field for
entering a week and year (no specific time zone)
|
Valid attribute
values (when used with <menu> elements)
include:
Value
|
Description
|
list
|
A list menu
|
toolbar
|
A toolbar menu
|
context
|
A context menu
|
Valid attribute
values (when used with <menuitem>
elements) include:
Value
|
Description
|
checkbox
|
Command can be toggled
using a checkbox
|
command
|
A normal command
|
Radio
|
Command can be toggled
using a radio button
|
Note: at the time of
writing the type attribute for <menuitem>
elements was not supported by major browsers.
Valid attribute
values (when used with <ol>
elements) include:
Value
|
Description
|
1
|
List is of type 1, 2,
3, 4, …
|
A
|
List is of type A, B,
C, D, …
|
a
|
List is of type a, b,
c, d, …
|
I
|
List is of type I, II,
III, IV, …
|
i
|
List is of type i, ii,
iii, iv, …
|
Valid values (when used
with <source>
elements) include:
Value
|
Description
|
MIME-type
|
MIME type of resource
|
Valid attribute
values (when used with <style>
elements) include:
Value
|
Description
|
text/css
|
Media type of the <style>
element
|
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head></head>
<body>
Created using HTML:<br>
<form action="http://www.nematrian.com/ExpressionEvaluator.aspx">
<input type="radio" name="expr" value="3*5">3*5</input><br>
<input checked type="radio" name="expr" value="5*exp(1)*max((1,2,3))">5*exp(1)*max((1,2,3))</input><br>
<input type="submit" value="Go to webpage to evaluate">
</form>
<br><br>Created using JavaScript:<br>
<span id="element"></span>
<script>
var f = document.createElement("FORM");
f.setAttribute("action","http://www.nematrian.com/ExpressionEvaluator.aspx");
var x1 = document.createElement("INPUT");
x1.setAttribute("type","radio");
x1.setAttribute("name","expr");
x1.setAttribute("value","3*5");
var txt1 = document.createTextNode("3*5");
var x2 = document.createElement("BR");
var x3 = document.createElement("INPUT");
x3.setAttribute("type","radio");
x3.setAttribute("checked","checked");
x3.setAttribute("name","expr");
x3.setAttribute("value","5*exp(1)*max((1,2,3))");
var txt3 = document.createTextNode("5*exp(1)*max((1,2,3))");
var x4 = document.createElement("BR");
var x5 = document.createElement("INPUT");
x5.setAttribute("type","submit");
x5.setAttribute("value","Go to webpage to evaluate");
f.appendChild(x1);
f.appendChild(txt1);
f.appendChild(x2);
f.appendChild(x3);
f.appendChild(txt3);
f.appendChild(x4);
f.appendChild(x5);
document.getElementById("element").appendChild(f);
</script>
</body>
</html>
|
NAVIGATION LINKS
Contents | Prev | Next | HTML Attributes