<input> - 入力欄

構文

<form>
<div>
  <input>
    ：
</div>
</form>

説明文

　<input>タグは，<form>タグでサーバー側に送信するデータの入力や選択の部品として利用する。「type」属性に指定した値によって異なった部品として動作する。例えば，「text」と指定すると文字列の入力部品として，「checkbox」と指定するとチェックボックスとして利用できる。各タイプについてはこのページ中の「type属性の種類」を参照。

　また，「type」属性に「submit」と指定することで，データを送信するボタンとなる。

　<input>タグはインライン要素であるため，基本的にブロック要素の中で利用するようにする。また，<form>タグはブロック要素であるが，HTML 4 Strictでは<form>タグ内にはブロック要素のみ包括を許可しているため，<input>タグを利用する際は，他のブロック要素を利用して記載するようにする。

サンプル

HTMLソース

<form method="POST" action="postbox.cgi">
<div>
  <h2>オンライン・ストレージへのアップロード</h2>
  <p>アカウント名：<input type="text" name="account"></p>
  <p>パスワード：<input type="password" name="passwd"></p>
  <p>対象ファイル：<input type="file" name="upload"></p>
  <dl>
    <dt>転送先：</dt>
    <dd><input type="radio" name="target" value="home">ホーム・
    フォルダ</dd>
    <dd><input type="radio" name="target" value="image">イメー
    ジ・フォルダ</dd>
    <dd><input type="radio" name="target" value="private">プラ
    イベート・フォルダ</dd>
  </dl>
  <p><input type="checkbox">ファイルの外部公開を行う</p>
  <p><input type="submit" value="転送">  <input type="reset"
  value="リセット"></p>
</div>
</form>

ブラウザ表示例

対応状況

要素，タグ

属性

よく利用する属性

その他の属性

マウスやキーボードの状況変化に関わる属性

各typeについて

type="text"

　キーボードから入力したテキストを送信する際に利用する。<textarea>とは異なり1行のみの入力エリアとなる。

<input type="text" name="data">

　type="text"指定時の固有属性は下表の通り。

type="password"

　キーボードから入力したテキストを送信する際に利用する。ただし，type="text"とは異なり入力した文字は「*」や「●」といった入力した文字を判断できない記号でマスクされる。パスワードのような他人に盗み見られたくない情報を入力する際に利用する。

<input type="password" name="data">

　type="password"指定時の固有属性は下表の通り。

type="file"

　クライアントからサーバーへファイルを転送したい場合に利用する。テキスト・エリアが表示されるがここにはファイルのパスを指定する。また，最近のWebブラウザではファイル名を直接入力できず，右に表示されたボタンから対象のファイルを選択することが多い。

<input type="file" name="data">

　type="file"指定時の固有属性は下表の通り。

type="checkbox"

　選択項目を選択するといった場合に利用する。<input>を指定すると，その部分にチェック用のボックスが表示される。ここにチェックを入れると，value属性に指定した値が送られる。

<input type="checkbox" name="data1" value="1"> 項目1<br>
<input type="checkbox" name="data2" value="2"> 項目2<br>
<input type="checkbox" name="data3" value="3"> 項目3

　type="checkbox"指定時の固有属性は下表の通り。

type="radio"

　一方を選択すると他方の選択が外れるラジオ・ボタンを使う場合に指定する。性別や年齢といった1つしか選択できない場合に利用する。関連するラジオ・ボタンのname属性は同じにしておく必要がある。もし異なると，別のラジオ・ボタンとして扱われる。また，選択時に送信される値はvalue属性に指定する。

<input type="radio" name="data" value="1"> 項目1<br>
<input type="radio" name="data" value="2"> 項目2<br>
<input type="radio" name="data" value="3"> 項目3

　type="radio"指定時の固有属性は下表の通り。

type="hidden"

　hiddenを指定すると，画面上に何も表示しない。ページ固有の値を送信したい場合や，処理時に使いたい値を指定するといった際に利用する。例えば，処理した回数をhiddenで指定しておき，その値から次に行う処理を分岐するなどだ。

　hiddenでは，valueに指定した値を送信する。

<input type="hidden" name="data" value="1">

　type="radio"指定時の固有属性は下表の通り。

type="submit"

　submitは，送信用のボタンを表示するタイプである。このボタンをクリックすると，対応するフォームの内容がサーバーに送られる。また，value属性に指定した値はボタン上に表示される。

<input type="submit" name="data" value="投稿">

　type="submit"指定時の固有属性は下表の通り。

type="reset"

　resetは，フォームの内容をクリアーするためのボタンを表示するタイプである。このボタンをクリックすると，同じ<form>タグ内に所属するすべてのフォームがクリアーされる。ただし，<input type="text" value>のように初期の値が設定されている場合，ボタンをクリックすると初期の値が表示される。また，value属性に指定した値はボタン上に表示される。

<input type="reset" name="data" value="Clear">

　type="reset"指定時の固有属性は下表の通り。

type="button"

　buttonは，ボタンを表示するタイプである。submitタイプとは別の動作をさせたい場合などに利用する。

　submitタイプでは，ボタンをクリックすると<form>のaction属性に指定したプログラムにデータを送るが，buttonタイプでは何も動作しない。もし，ボタンを押して処理を行いたい場合は，onmousedown属性などのイベント属性でスクリプト等を呼び出すようにする。

　また，value属性に指定した値はボタン上に表示される。

<input type="button" name="data" value="集計">

　type="button"指定時の固有属性は下表の通り。

type="image"

　imageは，指定した画像を用いたボタンにするタイプである。画像をクリックすると<form>タグのaction属性に指定されたプログラムにデータが送信される。また，ボタンをクリックした際，クリックした画像の座標が同時に送信される。送られるデータは「name属性の内容.x=横座標&name属性の内容.y=縦座標」となる。また，valueの内容も同時に送られる。

　また，画像表示に対応していないWebブラウザ用の代替文字をaltに指定する。

<input type="image" src="button.jpg" name="data" value="Click" 
alt="Click Me!">

　type="image"指定時の固有属性は下表の通り。

関連項目

• <form>
• <select>
• <textarea>
• <button>
• <fieldset>
• <label>