THE WORLD'S LARGEST WEB DEVELOPER SITE

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