<input> - フォーム部品：入力欄

■ 概要

項　　目説　　明
記述形式 <input type="入力タイプ">
対応ブラウザー H3+ / e3+ / N2+ / Fx1+ / Op6+ / Ch1+ / Sa1+
種　　類
（カテゴリー）		 フロー・コンテンツ，フレージング・コンテンツ ，
インタラクティブ・コンテンツ（type属性がhiddenでないとき）
パルパブル・コンテンツ （type属性がhiddenでないとき）
置ける場所 フレージング・コンテンツが記入できる場所
内包要素
（コンテンツ・モデル）		 空
（コンテンツ・モデル: 空）

■ 解説

<input> は，<form>で作成したフォームの中に，テキスト入力や実行ボタンなどの各フォーム部品を表示します。　type属性の値によって，まったく見栄えや動作の異なる部品となります。

HTML4.0 の定義や IE での実装では，<input> を <form>～</form> で囲まなくても大丈夫ですが，HTML5 では，必ず <form>～</form> で囲まなくてはならないので注意しましょう。

■ 属性

種　　類名　　称
【固有属性】【重要属性】type，name，value
【共通属性】 disabled，readonly，required *，form
【テキスト入力系属性】 autocomplete *，autofocus *，size，list *，pattern *，
placeholder *，autocomplete *，dirname *，maxlength
【ボタン系属性】 checked
【数値・時刻系属性】 max *，min *，step *
【type=file の属性】 accept
【type=submit の属性】 formaction *，formenctype *，formmethod *，
formnovalidate *，formtarget *
【type=image の属性】 alt，height，src，width
【type=email の属性】 multiple
【グローバル属性】 accesskey，class，contentedittable *，contextmenu *，
dir，draggable *，dropzone *，hidden *，id，
lang，spellcheck *，style，tabindex，title，translate *
【ARIA】の属性 【ARIA role属性】
【ARIA aria-* 属性】		 type属性 の値に依存する （以下の通り）
【type=hidden】 【ARIA role属性】 で
指定可能な値 （役割）		 なし
【ARIA aria-* 属性】 で
指定可能なもの		 ARIA グローバル状態とプロパティ   
【type=text】
【type=search】		 【ARIA role属性】 で
指定可能な値 （役割）		 textbox （既定の役割のため指定対象外），
または，combobox
【ARIA aria-* 属性】 で
指定可能なもの		 ARIA グローバル状態とプロパティ，
指定可能な役割の任意の状態とプロパティ   
【type=tel】 【ARIA role属性】 で
指定可能な値 （役割）		 textbox （既定の役割のため指定対象外），
または，combobox
【ARIA aria-* 属性】 で
指定可能なもの		 ARIA グローバル状態とプロパティ，
指定可能な役割の任意の状態とプロパティ   
【type=url】 【ARIA role属性】 で
指定可能な値 （役割）		 textbox （既定の役割のため指定対象外），
または，combobox
【ARIA aria-* 属性】 で
指定可能なもの		 ARIA グローバル状態とプロパティ，
指定可能な役割の任意の状態とプロパティ   
【type=email】 【ARIA role属性】 で
指定可能な値 （役割）		 textbox （既定の役割のため指定対象外），
または，combobox
【ARIA aria-* 属性】 で
指定可能なもの		 ARIA グローバル状態とプロパティ，
指定可能な役割の任意の状態とプロパティ   
【type=password】 【ARIA role属性】 で
指定可能な値 （役割）		 textbox （既定の役割のため指定対象外）
【ARIA aria-* 属性】 で
指定可能なもの		 ARIA グローバル状態とプロパティ，
指定可能な役割の任意の状態とプロパティ   
【type=date】 【ARIA role属性】 で
指定可能な値 （役割）		 なし
【ARIA aria-* 属性】 で
指定可能なもの		 ARIA グローバル状態とプロパティ   
【type=time】 【ARIA role属性】 で
指定可能な値 （役割）		 なし
【ARIA aria-* 属性】 で
指定可能なもの		 ARIA グローバル状態とプロパティ   
【type=number】 【ARIA role属性】 で
指定可能な値 （役割）		 spinbutton （既定の役割のため指定対象外）
【ARIA aria-* 属性】 で
指定可能なもの		 ARIA グローバル状態とプロパティ，
指定可能な役割の任意の状態とプロパティ   
【type=range】 【ARIA role属性】 で
指定可能な値 （役割）		 slider （既定の役割のため指定対象外）
【ARIA aria-* 属性】 で
指定可能なもの		 ARIA グローバル状態とプロパティ，
指定可能な役割の任意の状態とプロパティ   
【type=color】 【ARIA role属性】 で
指定可能な値 （役割）		 なし
【ARIA aria-* 属性】 で
指定可能なもの		 ARIA グローバル状態とプロパティ   
【type=checkbox】 【ARIA role属性】 で
指定可能な値 （役割）		 checkbox （既定の役割のため指定対象外），または，
menuitemcheckbox
【ARIA aria-* 属性】 で
指定可能なもの		 ARIA グローバル状態とプロパティ，
指定可能な役割の任意の状態とプロパティ   
【type=radio】 【ARIA role属性】 で
指定可能な値 （役割）		 radio （既定の役割のため指定対象外），または，
menuitemradio
【ARIA aria-* 属性】 で
指定可能なもの		 ARIA グローバル状態とプロパティ，
指定可能な役割の任意の状態とプロパティ   
【type=file】 【ARIA role属性】 で
指定可能な値 （役割）		 なし
【ARIA aria-* 属性】 で
指定可能なもの		 ARIA グローバル状態とプロパティ   
【type=submit】 【ARIA role属性】 で
指定可能な値 （役割）		 button （既定の役割のため指定対象外）
【ARIA aria-* 属性】 で
指定可能なもの		 ARIA グローバル状態とプロパティ，
指定可能な役割の任意の状態とプロパティ   
【type=image】 【ARIA role属性】 で
指定可能な値 （役割）		 button （既定の役割のため指定対象外），link，
menuitem，menuitemcheckbox，menuitemradio，
または，radio
【ARIA aria-* 属性】 で
指定可能なもの		 ARIA グローバル状態とプロパティ，
指定可能な役割の任意の状態とプロパティ   
【type=reset】 【ARIA role属性】 で
指定可能な値 （役割）		 button （既定の役割のため指定対象外）
【ARIA aria-* 属性】 で
指定可能なもの		 ARIA グローバル状態とプロパティ，
指定可能な役割の任意の状態とプロパティ   
【type=button】 【ARIA role属性】 で
指定可能な値 （役割）		 button （既定の役割のため指定対象外），link，
menuitem，menuitemcheckbox，menuitemradio，
または，radio
【ARIA aria-* 属性】 で
指定可能なもの		 ARIA グローバル状態とプロパティ，
指定可能な役割の任意の状態とプロパティ   

■ 各種タイプ

type属性の値により，次のような多くの種類のものが使用できます。

種　類
（指定方法）		機　能使用例
テキスト
入力フィールド
（type="text"）
通常のテキストを入力します。
名前：
パスワード
入力フィールド
（type="password"）
他の人にパスワードを見られないように，入力した文字がすべてアスタリスク（*）で表示されます。
パスワード：
ファイル名
入力フィールド
（type="file"）
ブラウザーからWWWサーバーにファイルをアップロードする際に用います。　入力フィールドの横には参照ボタンが表示されます。　WWWサーバー側にはファイルを受け取るための特別なCGIスクリプトなどを設置しておく必要があります。　セキュリティのために，初期値を設定したり，スクリプトで値を操作することはできません。
転送ファイル：
チェックボックス
（type="checkbox"）
オン・オフの値を持つチェックボックスを表示します。
チェックボックス
ラジオボタン
（type="radio"）
同じ name属性を持つラジオボタンでひとつのラジオボタングループを形成します。　複数の内，どれかひとつしかチェックできない点がチェックボックスと異なります。
Yes No
隠しフィールド
（type="hidden"）
画面上には表示されません。　ユーザに気づかれない値をこっそりと<form> の actionで指定したアクションに渡すために用いられます。
実行ボタン
（type="submit"）
このボタンを押すと，<form> タグの action属性で指定したアクションが呼び出されます。
取消ボタン
（type="reset"）
このボタンを押すと，それまでに入力した情報をすべてキャンセルして，最初から入力をやり直すことができます。
汎用ボタン
（type="button"）
<input type="button" onclick="...">のように，ボタンを押した時にJavaScriptなどを起動する際によく用いられます。
画像ボタン
（type="image"）
例えば，<input type=image name="AAA" height=100 width=100 src="xxx.gif"> という画像ボタンをクリックすると，クリックした座標が AAA.x=n AAA.y=nという形式でアクションに送信されます。
数値
（type="number"）
HTML5 で追加されたタイプで，数値を入力します。
レンジ
（type="range"）
HTML5 で追加されたタイプで，数値を入力します。
検索文字列
（type="search"）
HTML5 で追加されたタイプで，検索文字列を入力します。
電話番号
（type="tel"）
HTML5 で追加されたタイプで，電話番号を入力します。
電話番号：
URL
（type="url"）
HTML5 で追加されたタイプで，URLを入力します。
Eメール
（type="email"）
HTML5 で追加されたタイプで， Eメールアドレスを入力します。
E-Mail：
時刻
（type="time"）
HTML5 で追加されたタイプで，時刻を入力します。　値の例：23:59:59
時刻：
日時
（type="datetime"）
HTML5 で追加されたタイプで，日時を入力します。　値の例：2011-06-04T12:00Z
日時：
時刻
（type="datetime-local"）
HTML5 で追加されたタイプで，ローカルタイムの日時を入力します。　値の例：2011-06-04T12:00
日時：
日付
（type="date"）
HTML5 で追加されたタイプで，日付を入力します。　値の例：2011-06-04
日付：
月
（type="month"）
HTML5 で追加されたタイプで，年月を入力します。　値の例：2011-06
年月：
週
（type="week"）
HTML5 で追加されたタイプで，週を入力します。　値の例：2011-W23
週：
色
（type="color"）
HTML5 で追加されたタイプで，色を入力します。　値の例：#ffcccc
色：

■ CSSプロパティ

種　　類名　　称
【よく使うもの】

■ 使用例

HTMLソース
HTML
<body> ～ </body>		 
<form method="POST" action="xxx.cgi">
<table style="margin-left: 25％;">
<tr>
 <td>名前：</td>
 <td><input type=text name="namae"></td>
</tr>
<tr>
 <td>パスワード：</td>
 <td><input type=password name="passwd"></td>
</tr>
<tr>
 <td>転送ファイル：</td>
 <td><input type=file name="tensou"></td>
</tr>
<tr>
 <td>性別：</td>
 <td>
  <input type=radio name="seibetsu" value="male" checked>男
  <input type=radio name="seibetsu" value="female">女
 </td>
</tr>
<tr>
 <td>趣味：</td>
 <td>
  <input type=checkbox name="shumi" value="PC">パソコン
  <input type=checkbox name="shumi" value="SP">スポーツ
  <input type=checkbox name="shumi" value="RD">読書
 </td>
</tr>
<tr>
 <td></td>
 <td>
  <input type=submit value=" 送信 ">
  <input type=reset value=" 取消 ">
 </td>
</tr>
</table>
</form>

ブラウザー 表示例
名前：
パスワード：
転送ファイル：
性別： 男 女
趣味： パソコン スポーツ 読書


■ 備考