type属性 - タイプ

■ 概要

項　　目説　　明
記述形式 type = "タイプ"   
値 の形式 要素ごとに異なる（解説参照）   
対応ブラウザー IE9+ / IE8+ / Fx4.0+ / Fx3.6+ / Fx3.6+ / Ch11+ / Sa5+ / Op11+   
適用可能な要素
（種　　類）		 <a>，<area>，<button>，<embed>，<input>，<link>，   
<object>，<ol>，<script>，<style>，<source> *　   
（固有属性）   
継　　承 しない

■ 解説

type属性 は，

多くの要素で指定可能な属性ですが，
用途や内容は必ずしも同じではありません。

W3C では，type属性 の対象要素をグループ分けして，以下のように分類しています。

対象要素type属性 の指定内容値の形式
<a>，<area>，<link> 参照するリソースの形式のヒント MIMEタイプ
<button> ボタンの形式 submit，reset，button
<embed>，<object>，<script>，
<source>，<style> 		埋め込むリソースの形式 MIMEタイプ
<input> フォーム・コントロールの形式 キーワード　
（<input>要素の type属性 の値）
<ol> リスト・マーカーの形式 1，a，A，i，I

これらについての詳細は，以下の通りです。

[1] a 要素 で，
type 属性は，リンク先リソースの MIMEタイプ を指定します。　ただし，ブラウザーは，HTTPレスポンス・ヘッダーの Content-Type にセットされた MIMEタイプ を使って処理方法を決定するため，a 要素 の type 属性 を使って処理方法を決定するわけではありません。　従って，この type 属性の値は，特に用途があるわけではなく，参考情報という程度の意味しかありません。　そのため，必ずしも指定する必要はないでしょう。

[2] area 要素 で，
type 属性 には，ハイパーリンクの宛先の言語コード を指定します。

[3] button 要素 で，
button 要素 は，ボタンを表示します。　しかし，type 属性 の値に指定するキーワードによって，次のように役割が変わってきます。

キーワード役 割
submit　（既定値）フォームのデータを送信するためのサブミット・ボタンになります。
resetフォームをリセットするためのリセット・ボタンになります。
button特定の機能が定義されていない汎用的なボタンになります。

[4] embed 要素 で，
type 属性には，組み込みコンテンツの MIMEタイプを指定します。

[5] input 要素 で，
input 要素 は，type 属性 の値によって，表示されるコントロールの種類が変わります。　下表は，HTML5 で定義されている type 属性 の値と，その意味を表しています。 (実際の表示例は，input 要素 の 解説 を参照してください。)

属性値種類入力データコントロール
hidden非表示任意の文字列なし
textテキスト改行なしのテキストテキスト・フィールド
search検索改行なしのテキスト検索フィールド
tel電話改行なしのテキストテキスト・フィールド
urlURL絶対URLテキスト・フィールド
emailEメールメールアドレステキスト・フィールド
passwordパスワード改行なしのテキスト
（機密情報用）		 テキスト・フィールド
（入力した文字は非表示）
datetime日時タイムゾーンが UTC の日時
（年，月，日，時，分，
　秒，小数点以下の秒）		日時コントロール
date日時タイムゾーンなしの日付
（年，月，日）		日付コントロール
month月タイムゾーンなしの年月月コントロール
week週タイムゾーンなしの年
と週番号のデータ		週コントロール
time時間タイムゾーンなしの時間
（時，分，秒，小数点以下の秒）		時間コントロール
datetime-
local		ローカルの日時タイムゾーンなしの日時
（年，月，日時，分，
　秒，小数点以下の秒）		日時コントロール
number数値数値テキスト・フィールド，または，
スピナー・コントロール
range範囲数値スライダー・コントロールなど
color色赤，緑，青のコンポーネントを
8ビットずつで表した sRGB値		色選択
checkboxチェックボックス0個以上の値のセットチェックボックス
radioラジオ・ボタン指定の値ラジオ・ボタン
fileファイル・アップロード0個以上のファイル
（MIMEタイプとファイル名）		ラベルとボタン
submitサブミット・ボタン指定の値
（フォームのサブミットを開始）		ボタン
imageイメージ・ボタンイメージのサイズに対する座標クリッカブルなイメージ，
または，ボタン
resetリセット・ボタンなしボタン
buttonボタンなしボタン

input 要素 には，type 属性 の他にも数多くの属性が規定されています。　しかし，コントロールの種類によって，利用可能な属性が変わってきます ので，注意してください。

[6] link 要素 で，
link 要素 は，HTML文書 を別のリソースと関連付けます。　そのリソースの リンク先 は href 属性 を使って指定します。　また，type属性 を使って，その リソースの種類 を MIMEタイプ で指定します。
（詳細は，link 要素 の 使用例 を参照してください。）

[7] object 要素 で，
object 要素 に表示するコンテンツの URL を data 属性 で，また，MIMEタイプ（リソースの種類）を type 属性 でそれぞれ指定すれば，ブラウザーが対応していれば，それを表示できます。

[8] ol 要素 で，
type 属性には，リスト・マーカーの形式のキーワード: 1，a，A，i，I のうち１つを指定します。

[9] script 要素 で，
type 属性 には，スクリプトの種類を表す MIMEタイプ を指定します。　既定値は "text/javascript" です。　そのため，JavaScript の場合には，必ずしも type属性 を指定する必要はありません。

[10] source 要素 で，
type 属性には，メディア・ファイルの MIMEタイプ を指定します。　この属性は必須ではありませんが，ブラウザーが事前に再生可能かどうかを判別するためのヒントにもなりますので，入れておいた方が良いでしょう。　通常， "video/mp4" や "audio/ogg" といった表記が使われますが，さらに詳細に，コーデックを指定する表記 も許されています。　その場合は，"video/mp4" などの表記の直後にセミコロン ";" を入れ，その後に codec="" を使ってコーデックの種類を書きます。　HTML5 では，以下の ファイル・タイプ が扱えることなっています。

映像音声コンテナマークアップ
H.264
シンプル・ベースライン・
プロファイル レベル3 		Low-Complexity
AAC 		MP4 <source src="video.mp4"
type='video/mp4;
codecs="avc1.42E01E,mp4a.40.2"'>
H.264
拡張プロファイル
レベル3 		Low-Complexity
AAC 		MP4 <source src="video.mp4"
type='video/mp4;
codecs="avc1.58A01E,mp4a.40.2"'>
H.264
メイン・プロファイル
レベル3 		Low-Complexity
AAC 		MP4 <source src="video.mp4"
type='video/mp4;
codecs="avc1.4D401E,mp4a.40.2"'>
H.264
ハイ・プロファイル
レベル3 		Low-Complexity
AAC 		MP4 <source src="video.mp4"
type='video/mp4;
codecs="avc1.64001E,mp4a.40.2"'>
H.264
ビジュアル・
シンプル・プロファイル
レベル3 		Low-Complexity
AAC 		MP4 <source src="video.mp4"
type='video/mp4;
codecs="mp4v.20.8,mp4a.40.2"'>
H.264
アドバンス・
シンプル・プロファイル
レベル3 		Low-Complexity
AAC 		MP4 <source src="video.mp4"
type='video/mp4;
codecs="mp4v.20.240,mp4a.40.2"'>
MPEG-4
ビジュアル・
シンプル・プロファイル
レベル0 		AMR 3GPP <source src="video.3gp"
type='video/3pp;
codecs="mp4v.20.8,samr"'>
Theora Vorbis Ogg <source src='video.ogv'
type='video/ogg; codecs="theora,vorbis"'>
Theora Speex Ogg <source src='video.ogg'
type='video/ogg;codecs="theora,speex"'>
- Vorbis Ogg <source src='video.ogg'
type='audio/ogg;codecs=vorbis'>
- Speex Ogg <source src='video.ogg'
type='audio/ogg;codecs=speex'>
- FLAC Ogg <source src='audio.oga'
type='audio/ogg;codecs=flac'>
Dirac Vorbis Ogg <source src='video.ogv'
type='video/ogg;codecs="dirac,vorbis"'>
Theora Vorbis Matroska <source src='video.mkv'
type='video/x-matroska;
codecs="theora,vorbis"'>

[11] style 要素 で，
type 属性は，スタイルシートの種類を表す MIMEタイプ を指定します。　通常は "text/css" です。

■ 使用例（ type 属性の利用）

HTMLソース
HTML
<body> ～ </body>		 
<input type="search" name="search">
<input type="submit" value="検索">

ブラウザー 表示例

■ 備考

【参考ページ】