HTML type Attribute
Definition and Usage
For button elements, the type attribute specifies the type of button.
For input elements, the type attribute specifies the type of <input> element to display.
For menu elements, the type attribute specifies the type of menu.
For embed, link, object, script, source, and style elements, he type attribute specifies the Internet media type (formerly known as MIME type).
Applies to
The type attribute can be used on the following elements:
| Elements | Attribute |
|---|---|
| <button> | type |
| <embed> | type |
| <input> | type |
| <link> | type |
| <menu> | type |
| <object> | type |
| <script> | type |
| <source> | type |
| <style> | type |
Examples
Button Example
Two button elements that act as one submit button and one reset button (in a form):
<form action="/action_page.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
Try it Yourself »
Embed Example
An embedded flash animation with a specified media type:
<embed src="helloworld.swf" type="application/vnd.adobe.flash-movie">
Try it Yourself »
Input Example
An HTML form with two different input types; text and submit:
<form action="/action_page.php">
Username: <input type="text" name="usrname"><br>
<input type="submit" value="Submit">
</form>
Try it Yourself »
Link Example
In the following example, the type attribute indicates that the linked document is an external style sheet:
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
Try it Yourself »
Menu Example
A context menu:
<menu type="context" id="mymenu">
<menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png">
</menuitem>
<menu label="Share on...">
<menuitem label="Twitter" icon="ico_twitter.png"
onclick="window.open('//twitter.com/intent/tweet?text='+window.location.href);">
</menuitem>
<menuitem label="Facebook" icon="ico_facebook.png"
onclick="window.open('//facebook.com/sharer/sharer.php?u='+window.location.href);">
</menuitem>
</menu>
<menuitem label="Email This Page"
onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
</menu>
Try it Yourself »
Object Example
An <object> element with a specified media type:
<object width="400" height="400" data="helloworld.swf" type="application/vnd.adobe.flash-movie"></object>
Try it Yourself »
Script Example
A script with the type attribute specified:
<script type="text/javascript">
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
Try it Yourself »
Source Example
Use of the type attribute:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Try it Yourself »
Style Example
Use the type attribute to specify the media type of the <style> tag :
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
Try it Yourself »
Browser Support
The type attribute has the following browser support for each element:
| Element | |||||
|---|---|---|---|---|---|
| button | Yes | Yes | Yes | Yes | Yes |
| embed | Yes | Yes | Yes | Yes | Yes |
| input | Yes | Yes | Yes | Yes | Yes |
| link | Yes | Yes | Yes | Yes | Yes |
| menu | Not supported | Not supported | 8.0 (only type="context") |
Not supported | Not supported |
| object | Yes | Yes | Yes | Yes | Yes |
| script | Yes | Yes | Yes | Yes | Yes |
| source | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
| style | Yes | Yes | Yes | Yes | Yes |
