【HTML】type属性でボタンやinputの型や種類を指定する

このページについて

このページではHTMLで使う事ができるtype属性の機能と使い方の解説をしています。

type属性はaタグ/buttonタグ/inputタグ/linkタグ/menuタグ/scriptタグ/sourceタグ/styleタグで使う事ができます。そしてそれぞれで働き方が異なります。それぞれのタグごとで解説します。

ちなみにembedタグとobjectタグでも使う事ができますが、それらはすでに代わりとなるタグが出ていることもあるので省略します。

リンクされたドキュメントのメディアタイプを指定します。これはブラウザに対して知らせる程度の機能になります。

<a href="リンクURL" type="値">リンク名</a>

値にはリンク先がどんな種類なのかを指定するわけですが、正直言うとこれに関しては考えなくても良いレベルだったりします。なぜかと言うとそのメディアタイプを全て掲載しているサイトがこちらになるんですが、目的のタイプがどれなのか探すのが超大変だからです。

それでも探し出して使いたいという方は是非ともチャレンジしてみてください。それに見合う結果や成果が得られるかは保証できません。

ボタンの機能を指定する事ができます。

<button type="ボタンの種類">表示するテキスト</button>

ボタンの種類は以下から選びます。

それぞれ実際にbuttonタグを使ったものを配置しましたが、スタイルシートを弄っていないのでかなり小さいボタンが出ていると思います。それぞれ見た目はスタイルシートで変更するのが望ましいですが、基本的には機能こそ違えど全て同じ見た目のボタンが出てきます。

inputタグでは入力フォームで受け付ける型を指定する事ができます。基本的な書き方は以下の通りです。

<input type="値">

button	クリック可能なボタン(JavaScriptで使用)
chechbox	チェックボックスを定義
color	カラーピッカーを定義
date	日付コントロール(年/月/日)を定義(時間は無し)
datetime-local	日付と時刻の制御を定義(年月日時刻)
email	eメールアドレスを定義
file	ファイル参照ボタンとアップロードを行う事ができるボタンを表示
hidden	隠し入力フィールドを定義します
image	画像を送信ボタンとして定義する
month	年と月のコントロールを定義
number	数字を入力するためのフィールドを定義
password	パスワード入力用を定義
radio	ラジオボタンを定義
range	範囲コントロールを定義
reset	リセットボタンを定義
search	検索文字列を入力するためのフィールドを定義
submit	フォームの内容を送信するボタンを定義
tel	電話番号入力用のフィールドを定義
text	単一行テキストを入力するフィールドを定義
time	時間を入力するためのフィールドを定義
url	URLを入力するフィールドを定義
week	週と年のコントロールを定義

一番type属性を使うのがこのinputタグです。それぞれサンプルを配置したので弄ってみてください。

menuタグにおけるtype属性はメニューのタイプを指定します。

<menu type="値"> </menu>

実際にはmenuitemタグを使って表示するんですが今回は割愛します。

list	デフォルト。リストメニューを指定し、ユーザーが実行またはアクティブ化できるコマンドのリスト。
context	コンテキストメニューを指定します。ただしこれはFireFox専用です。
toolbar	ツールバーのメニューを指定します。アクティブなコマンドを使用すると、ユーザーはすぐにコマンドを操作できます

scriptタグにおけるtype属性はシンプルにスクリプトのタイプを指定します。

<script type="値">

scripttype	スクリプトのタイプを指定します。デフォルトではapplication/javascriptが指定されています。完全なリストについてはIANAメディアタイプを参照してください。

よくあるのはtext/javascriptとかですかね。

sourceタグにおけるtype属性はメディアのタイプを指定します。

<source type="メディアタイプ">

メディアタイプ	メディアタイプを指定します。一般的な動画形式(ogg/mp4/webm) 一般的な音楽形式(ogg/mpeg)

これまた完全なメディアタイプのリストはIANAのページを参照してください。

styleタグはhtmlソースの中でスタイルシートを適用させる時に使うものです。通常の外部CSS読み込み時と同じように、指定するのはtext/cssです。

<style type="text/css"></style>

これはstyleタグの中にあるものがcssであることを示す書き方になります。これ以外の書き方をする場合はIANAのメディアタイプのページを参考にしてみてください。textcssでいいと思うんですけどね。

type属性はいろんなタグに使われる属性です。それぞれ機能が異なるので使いたいタグと属性の関係をしっかり選びましょう。