hidden

typeコンテンツ属性の値にhiddenが指定されると、ユーザに対して非表示として、その内容をスクリプトなしに変更できないようにします。

■利用例

  <input type="hidden" name="usr_id" value="5" />
      

name属性に名前をセットし、valueコンテンツ属性に値をセットしておくことで、フォームがサブミットされた際に、ユーザに見せることなく、サーバにそのデータを送信することができます。ただし、name="_charset_"とした場合は、valueコンテンツ属性は指定できません。name="_charset_"として指定するとvalueコンテンツ属性にそのフォームの文字エンコーディング名がセットされたものとして、サーバに送信されます。

text

typeコンテンツ属性の値にtextがセットされると、1行テキストの入力フィールドを表します。

■利用例

  <input type="text" name="username" />
    

■レンダリング表示（Firefoxの場合）

フォーカスをあてると、文字を入力できるようになります。このコントロールに指定できる値に、改行を入れることはできません。つまり、valueコンテンツ属性に改行を含んだ文字列を指定することはできません。

search

typeコンテンツ属性の値にsearchがセットされると、1行テキストの入力フィールドを表し、さらにそれが検索向けであることを表します。

■利用例

  <form action="search.php" method="get">
  	<p>サイト内検索：<input type="search" name="p" /></p>
  </form>
    

■レンダリング表示（Safariの場合）

基本的にtextタイプのinput要素と、機能上の違いはありません。textタイプと同様に、valueコンテンツ属性に改行を含んだ文字列を指定することはできません。

現状では、MacOX版では、検索用ではテキスト・フィールドの両端に丸みを加えて、スタイリングを変えて表示されます。将来的に、視覚的に単なる文字の入力ボックスなのか、検索用の入力ボックスの違いを狙った規定になっています。

tel

typeコンテンツ属性の値にtelがセットされると、1行テキストの入力フィールドを表し、さらにそれが電話番号向けであることを表します。

■利用例

  <p><label>電話番号：<input type="tel" name="tel" /></label></p>
    

■レンダリング表示（Chromeの場合）

基本的にtextタイプのinput要素と、機能上の違いはありませんし、入力値に制限が設けられることもありません。また、textタイプと同様に、valueコンテンツ属性に改行を含んだ文字列を指定することはできません。

現在では、telタイプのinput要素を区別してレンダリングするブラウザはありませんが、iPhoneでは、入力の際に表示される入力パッドが数字入力モードになります。

url

typeコンテンツ属性の値にurlがセットされると、1行テキストの入力フィールドを表し、さらにそれがURL向けであることを表します。

■利用例

  <p><label>URL：<input type="url" name="url" /></label></p>
    

■レンダリング表示（Safariの場合）

urlタイプのinput要素のテキスト・フィールドに入力できる値は、「http://」から始まる絶対URLのみです。不適切なURLを入力をすると、Operaではエラーであるメッセージを表示します。

■誤った入力をした時のレンダリング表示（Operaの場合）

email

typeコンテンツ属性の値にemailがセットされると、1行テキストの入力フィールドを表し、さらにそれがメールアドレス向けであることを表します。

■利用例

  <p><label>メールアドレス：<input type="email" name="email" /></label></p>
    

■レンダリング表示（Operaの場合）

emailタイプのinput要素のテキスト・フィールドに入力できる値は、メールアドレスのみです。不適切なメールアドレスを入力すると、Operaではエラーであるメッセージが表示されます。

■誤った入力をした時のレンダリング表示（Operaの場合）

textタイプと同様に、valueコンテンツ属性に改行を含んだ文字列を指定することはできません。なお、multipleコンテンツ属性をセットすると、複数のメールアドレスを入力できます。なお、multipleコンテンツ属性は、論理属性です。

  <p><label>
  	メールアドレス：<input type="email" name="email" multiple="multiple" />
  </label></p>
    

password

typeコンテンツ属性の値にpasswordがセットされると、1行テキストの入力フィールドを表し、さらにそれが機密情報向けであることを表します。テキスト・フィールドに入力しても、ブラウザ上ではそれを読むことはできないように表示されます。

■利用例

  <p><label>パスワード：<input type="password" name="pwd" /></label></p>
    

■レンダリング表示（Firefoxの場合）

基本的に、textタイプのinput要素と、レンダリング上の違いを除き、機能上の違いはありません。また、textタイプと同様に、valueコンテンツ属性に改行を含んだ文字列を指定することはできません。

datetime

typeコンテンツ属性の値にdatetimeがセットされると、日付と時間をセットするためのコントロールを表します。

■利用例

  <p><label>希望日時：<input type="datetime" name="dt" /></label></p>
    

■レンダリング表示（Operaの場合）

利用例をOperaでレンダリングすると、日付にプルダウンメニュー、時間を指定するための入力コントロール、最後にUTCという文字が表示されます。
日付を指定するためのプルダウンメニューをクリックすると、カレンダーが表示されて、その日付をクリックすることで日付がセットされます。

HTML5仕様では、このコントロールが表す日時のタイムゾーンをUTCと定めています。つまり、グリニッジ標準時間と同じで、日本時間と比べて9時間前の日時となります。

date

typeコンテンツ属性の値にdateがセットされると、日付をセットするためのコントロールを表します。

■利用例

  <p><label>希望日：<input type="date" name="dt" /></label></p>
    

■レンダリング表示（Operaの場合）

利用例をOperaでレンダリングすると、日付にプルダウンメニューが表示されます。プルダウンメニューをクリックするとカレンダーが表示され、希望日をクリックするだけで日付がセットされます。

month

typeコンテンツ属性の値にmonthがセットされると、年月をセットするためのコントロールを表します。

■利用例

  <p><label>年月：<input type="month" name="mt" /></label></p>
    

■レンダリング表示（Safariの場合）

利用例をSafariでレンダリングすると、スピンボタンが表示されます。スピンボタンをクリックすると、年月が自動入力されます。Operaでレンダリングすると、カレンダーが表示されて年月がクリックするだけで入力できます。

week

typeコンテンツ属性の値にweekがセットされると、週をセットするためのコントロールを表します。

■利用例

  <p><label>週：<input type="week" name="wk" /></label></p>
    

■レンダリング表示（Operaの場合）

利用例はOperaでレンダリングしたものです。プルダウンメニューをクリックするとカレンダーが表示され、そこから希望する週を選択すると、週を表す値がセットされます。ただし、このカレンダーから日付を選択することはできません。例えば、下の図のような値が入力されたとします。

これは、西暦2011年の33番目の州ということを表します。ここで表される週とは、月曜から日曜日で終わる7日間を指します。

time

typeコンテンツ属性の値にtimeがセットされると、時間をセットするためのコントロールを表します。

■利用例

  <p><label>時間：<input type="time" name="t" /></label></p>
    

■レンダリング表示（Operaの場合）

利用例は、Operaでレンダリングした結果で、時間入力欄の右にあるスピンボタンをクリックすることで、時と分を調整できます。なお、時間を直接入力もできます。

datetime-local

typeコンテンツ属性の値にdatetime-localがセットされると、タイムゾーンを持たない日付と時間をセットするためのコントロールを表します。

■利用例

  <p><label>日時：<input type="datetime-local" name="dt" /></label></p>
    

■レンダリング表示（Operaの場合）

datetime-localタイプのコントロールは、タイムゾーンを持たない点を除いて、datetimeタイプと同じになります。datetimeタイプはタイムゾーンがUTCに固定されますので、日本においては使いにくいと言えます。datetime-localタイプであれば、単純に年月日と時分秒のみを扱うことができますので、日本に特化したサイトであれば使いやすいです。

number

typeコンテンツ属性の値にnumberがセットされると、数値をセットするためのコントロールを表します。

■利用例

  <p><label>番号：<input type="number" name="nb" /></label></p>
    

■レンダリング表示（Safariの場合）

利用例はSafariでレンダリングした結果です。入力欄の右側のスピンボタンで簡単に数値を入力することができます。なお、数値を直接入力することもできます。このコントロールは、マイナス値も指定することができますが、小数点を入れることはできません。
しかし、stepコンテンツ属性を指定することで、小数点の入力が可能となります。

  <p><label>番号：<input type="number" name="nb" step="0.1" /></label></p>
    

上のマークアップであると、0.1刻みで数値を入力することができます。

range

typeコンテンツ属性の値にrangeがセットされると、数値をセットするためのコントロールを表しますが、それに範囲を設けたものとなります。

■利用例

  <p><label>番号：<input type="range" name="nb" /></label></p>
    

■レンダリング表示（Operaの場合）

■レンダリング表示（Chromeの場合）

利用例のように、HTML5仕様がサポートされているブラウザではスライダーとしてレンダリングされます。デフォルトでは、スライダーが表す値の範囲は、0～100でValueコンテンツ属性の値がセットされていなければ、範囲の中間となる50が適用されます。
スライダーだけでは、実際にどんな数値がセットされているか分かりません。そのため、通常はoutput要素とJavaScriptを組み合わせて値を表示させます。シンプルなマークアップは次のようにします。

  <form>
  <p>
  	<label>番号：<input type="range" name="nb" /></label>
  	<output onformchange="value = form.elements.nb.value"></output>
  </p>
  </form>
    

ただ、output要素、onformchangeコンテンツ属性をサポートしているブラウザでないと表示されません。最新のOperaは、サポートしていてその結果が下の図のようになります。

また、スライダーを縦長に表示するにはスタイルシートで次のように記述します。

  	input[type=range] {
  		height:150px;
  		width:30px;
  	}
    

Operaでのレンダリングの結果は次のようになります。

color

typeコンテンツ属性の値にcolorがセットされると、色をセットするためのコントロールを表します。

■利用例

  <p><label>色：<input type="color" name="iro" /></label></p>
    

■レンダリング表示（Operaの場合）

利用例はOperaでレンダリングした結果です。プルダウンメニューをクリックすると、カラーピッカーが表示され、そこから色を選択できるユーザ・インターフェイスを提供します。
指定可能な値は、#000000～#FFFFFFまでの色を表現でき、それ以外の値がセットされると#000000が適用されます。また、このコントロールでは未指定の状態は許されないので、指定がなければ#000000が適用されます。

checkbox

typeコンテンツ属性の値にcheckboxがセットされると、チェックボックスを表します。

■利用例

  <label><input type="checkbox" name="ok" value="ok" />同意します。</label>
    

■レンダリング表示（Safariの場合）

チェックボックスにチェックを入れると、そのチェックボックスのvalueコンテンツ属性の値が、フォームをサブミットした時に、サーバに送信されます。
checkedコンテンツ属性を使うと、初めからチェックをした状態にすることができます。checkedコンテンツ属性は論理属性になります。

  <label>
  <input type="checkbox" name="ok" value="ok" checked="checked" />同意します。
  </label>
    

■レンダリング表示（Safariの場合）

radio

typeコンテンツ属性の値にradioがセットされると、ラジオボタンを表します。

■利用例

  <p>
  	<label><input type="radio" name="sex" value="man" />男性</label>
  	<label><input type="radio" name="sex" value="woman" />女性</label>
  </p>
    

■レンダリング表示（Safariの場合）

ラジオ・ボタンにチェックを入れると、そのラジオ・ボタンのvalueコンテンツ属性の値が、フォームをサブミットした時に、サーバに送信されます。
ラジオ・ボタンは、選択肢の中から1つだけを選択できるコントロールですから、同じラジオ・ボタンに属するradioタイプのinput要素を2個以上用意する必要があります。同じフォームの中で、name属性の値が同じradioタイプのinput要素が、同じラジオ・ボタンのグループに属します。
checkboxタイプと同様に、checkedコンテンツ属性を指定することで、初めから選択した状態にすることができます。

file

typeコンテンツ属性の値にfileがセットされると、選択ファイルのリストを表します。リストには、それぞれのファイルごとに、ファイル名、ファイルの種類、ファイルの本体が含まれます。fileタイプのinput要素は、ファイルのアップロード時に使います。

■利用例

  <form action="test.cgi" method="post" entype="multipart/form-data">
  	<p><label>ファイル選択<input type="file" name="image" /></label></p>
  </form>
    

■レンダリング表示（Firefoxの場合）

■レンダリング表示（Safariの場合）

利用例をFirefoxとSafariでレンダリングすると、ブラウザによって表示が異なることが分かります。いずれかの場合でも、該当のボタンをクリックすることで、OSに依存したファイル選択ダイアログボックスが表示され、そこからファイルを選択することになります。
なお、ファイルのデータをアップロードするには、entypeコンテンツ属性にmultipart/form-dataを指定します。もし、この指定がなければ、ファイルの中身をサーバ側で受け取ることができませんので注意します。
fileタイプにacceptコンテンツ属性を使うと、選択可能なファイルの種類を示すことができます。ただ、ブラウザ側でファイルを選択する際に、指定のファイルの種類ではないファイルを選択できないように制限するものではありません。例えば、選択ボタンをクリックして、ファイルの種類をイメージのjpegに限定したいのであれば以下のようにマークアップします。

  <label>ファイル選択
  	<input type="file" name="image" accept="image/jpeg" />
  </label>
    

Operaは、このacceptコンテンツ属性をサポートしていますので、ファイル選択ウィンドウが開くと、ファイルの種類が「image/jpeg」と最初から指定されます。
また、複数のファイルを選択できるようにするためには、multipleコンテンツ属性を使用します。multipleコンテンツ属性は論理属性です。

submit

typeコンテンツ属性の値にsubmitがセットされると、サブミット・ボタンを表し、このボタンを押すことでフォームの内容がサーバへ送信されることになります。ボタンに表示される文字はvalueコンテンツ属性の値が適用されます。

■利用例

  <p><input type="submit" value="送信" /></p>
    

■レンダリング表示（Operaの場合）

image

typeコンテンツ属性の値にimageがセットされると、サブミット・ボタンを表しますが、ボタンの代わりにイメージを指定することができます。そして、このボタンを押すことでフォームの内容がサーバへ送信されることになります。

■利用例

  <p><input type="image" src="button.png" alt="送信ボタン" /></p>
    

■レンダリング表示（Operaの場合）

利用例のように、srcコンテンツ属性にイメージのURLを、altコンテンツ属性にテキスト・ラベルを指定します。いずれの属性も必須です。altコンテンツ属性はイメージを見ることができないユーザ向けに、正しい情報を伝えるためのテキストを指定します。
このタイプは、ブラウザによって座標の扱い方が異なります。

reset

typeコンテンツ属性の値にresetがセットされると、リセット・ボタンを表します。このボタンを押すと、該当のフォームのすべてのコントロールが初期状態に戻ります。ボタンに表示される文字はvalueコンテンツ属性の値が適用されます。

■利用例

  <p><input type="reset" value="リセット" /></p>
    

■レンダリング表示（Operaの場合）

button

typeコンテンツ属性の値にbuttonがセットされると、デフォルトではアクションを伴わないボタンを表します。このタイプのinput要素をアークアップしただけでは、このボタンを押しても何も起こりません。JavaScriptを使った、サブミットやリセット以外のアクションを発生する時に使用します。

■利用例

  <form action="test.cgi" method="post">
  	<p><label>自宅の住所<input type="text" name="addr1" /></label></p>
  	<p>
  		<label>勤務先住所<input type="text" name="addr2" /></label>
  		<input type="button" name="copy" value="自宅の住所をコピー" />
  	</p>
  	<p><input type="submit" value="送信" /></p>
  </form>
  
  <script>
  (function() {
  	ar btn = document.getElementsByName("copy").item(0);
	btn.onclick = function() {
		var addr1 = document.getElementsByName("addr1").item(0);
		var addr2 = document.getElementsByName("addr2").item(0);
		if(addr2.value != "") {
			var res = confirm("コピーして良いですか？");
			if (! res) {return;}
		}
	addr2.value = addr1.value;
	}
  })();
  </script>
    

■レンダリング表示（Operaの場合）