/

HTML / CSS / JavaScript Tutorial

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


Desktop view | Switch to Mobile