button 要素の場合、type 属性は、ボタンのタイプを指定します。
input 要素の場合、type 属性は、<input> 要素の表示タイプを指定します。
menu 要素の場合、type 属性は、メニューのタイプを指定します。
embed、link、object、script、source、and style 要素の場合、type 属性は、インターネット・メディア・タイプ (以前は、MIME タイプと言っていました) を指定します。
type 属性は、以下の要素で使用することができます:
要素 | 属性 |
---|---|
<button> | type |
<embed> | type |
<input> | type |
<link> | type |
<menu> | type |
<object> | type |
<script> | type |
<source> | type |
<style> | type |
1 つは送信ボタンとして、もう 1 つはリセットボタンとして動作する 2 つの button 要素(1 つのフォーム内):
<form action="demo_form.html" 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 src="helloworld.swf"
type="application/vnd.adobe.flash-movie">
Try it Yourself ❯
2 つの異なる入力タイプ(text と submit)を持つ HTML フォーム。テキストと提出:
<form action="demo_form.html">
Username: <input type="text" name="usrname"><br>
<input type="submit" value="Submit">
</form>
Try it Yourself ❯
次の例では、type 属性は、リンク先文書が外部スタイルシートであることを示します:
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
Try it Yourself ❯
コンテキストメニュー:
<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> 要素:
<object width="400" height="400" data="helloworld.swf"
type="application/vnd.adobe.flash-movie"></object>
Try it Yourself ❯
指定の type 属性を持つスクリプト:
<script type="text/javascript">
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
Try it Yourself ❯
type 属性の使用:
<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> タグのメディアタイプを指定するために type 属性を使用します:
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
Try it Yourself ❯
type
属性は、要素ごとに以下のブラウザがサポートしています。
要素 | |||||
---|---|---|---|---|---|
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 | サポートなし | サポートなし | 8.0 (only type="context") |
サポートなし | サポートなし |
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 |