<input> - フォーム部品：入力欄ホームページ制作京都

ＷＥＢ用語(N)

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

概要

形式	<input type="...">
サポート	H2～H4s～ / e2～ / N2～ / i1～
タグの省略	開始タグ：必須、終了タグ：無し

説明

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

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

各種タイプ

◆ テキスト入力フィールド（type="text"）

通常のテキストを入力する、最も一般的なフィールドです。

名前：

◆ パスワード入力フィールド（type="password"）

他の人にパスワードを見られないように、入力した文字がすべてアスタリスク（*）で表示されます。

パスワード：

◆ ファイル名入力フィールド（type="file"）

ブラウザからサーバーにファイルをアップロードする際に用います。入力フィールドの横には参照ボタンが表示されます。サーバー側にはファイルを受け取るための特別な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 という形式でアクションに送信されます。

属性

【共通属性】

属性	意味
accesskey=key	H4s/e4/N6/i1。例えば accesskey=X としておくと、キーボードで ALT キーを押しながら X キーを押した時、この部品にフォーカスが移動します。
disabled	H4s/e4/N6。この属性を指定すると、部品が無効化されます。
tabindex=n	H4s/e4/N6。タブインデックスを指定します。
type=type	H2-H4s/e2/N2/i1。部品の種類を指定します。
datafld=datafld	e4。データバインド機能を用いる際の、データソースの列名を指定します。
datasrc=datasrc	e4。データバインド機能を用いる際の、データソースの ID を指定します。
IE拡張属性	他にもIEで拡張された属性が指定可能です。

【一般属性】

属性	意味
class=class	H4s/e3/N4。クラスを指定します。
dir=dir	H4s/e5/N6。文字の表示方向を指定します。
id=id	H4s/e3/N4。IDを指定します。
lang=lang	H4s/e4/N6。言語を指定します。
language=language	e4。スクリプト言語を指定します。
name=name	H2-H4s/e2/N2/i1。名前を指定します。
style=style	H4s/e3/N4。スタイルシートを指定します。
title=title	H4s/e4/N6。タイトルを指定します。

【type=textの属性】 H2-H4s/e2/N2/i1

属性	意味
autocomplete=onoff	e5。off にすると、過去に入力した値を候補として表示するオートコンプリート機能を無効にします。規定値は on です。
istyle=n	i2。i-modeにおいて、入力モードの初期値を指定します。かな入力モードの時は、1（全角カナ）、2（半角カナ）、3（英字）、4（数字）となり、ポケットベル入力時は、1（全角文字）、2（半角文字）、3（小文字推奨半角文字）、4（数字推奨半角文字）となります。
maxlength=n	H2-H4s/e2/N2/i1。最大入力文字数を指定します。
readonly	H4s/e4/N6。読み出し専用にします。
size=n	H2-H4s/e2/N2/i1。入力フィールドの大きさを指定します。IE と Netscape ブラウザで若干サイズが異なります。
value=value	H2-H4s/e2/N2/i1。入力フィールドの初期値を指定します。

【type=passwordの属性】 H2-H4s/e2/N2/i1

属性	意味
autocomplete=onoff	e5。off にすると、過去に入力した値を候補として表示するオートコンプリート機能を無効にします。規定値は on です。
maxlength=n	H2-H4s/e2/N2/i1。最大入力文字数を指定します。
readonly	H4s/e4。読み出し専用にします。
size=n	H2-H4s/e2/N2/i1。入力フィールドの大きさを指定します。IE と Netscape ブラウザで若干サイズが異なります。
value=value	H2-H4s/e2/N2/i1。入力フィールドの初期値を指定します。

【type=fileの属性】 H2-H4s/e2/N2

属性	意味
accept=accept	H4s。送信するデータのMIMEタイプの候補リストをカンマで区切って指定します。あまり使用されていません。
maxlength=n	H2-H4s/N2。最大入力文字数を指定します。
size=n	H2-H4s/e4/N2。入力フィールドの大きさを指定します。IE と Netscape ブラウザで若干サイズが異なります。

【type=checkboxの属性】 H2-H4s/e2/N2/i1

属性	意味
checked	H2-H4s/e2/N2/i1。このチェックボックスをあらかじめチェックした状態にしておきます。
value=value	H2-H4s/e2/N2/i1。このボタンがオンの時の値を指定します。

【type=radioの属性】 H2-H4s/e2/N2/i1

属性	意味
checked	H2-H4s/e2/N2/i1。このラジオボタンをあらかじめチェックした状態にしておきます。
value=value	H2-H4s/e2/N2/i1。このボタンがオンの時の値を指定します。

【type=hiddenの属性】 H2-H4s/e2/N2/i1

属性	意味
value=value	H2-H4s/e2/N2/i1。フィールドの初期値を指定します。

【type=submitの属性】 H2-H4s/e2/N2/i1

属性	意味
value=value	H2-H4s/e2/N2/i1。ボタンに表示するテキストを指定します。

【type=resetの属性】 H2-H4s/e2/N2/i1

属性	意味
value=value	H2-H4s/e2/N2/i1。ボタンに表示するテキストを指定します。

【type=buttonの属性】 H4s/e2/N2

属性	意味
value=value	H4s/e2/N2。ボタンに表示するテキストを指定します。

【type=imageの属性】 H2-H4s/e2/N2

属性	意味
align=align	H2-H4t/e2/N2。表示位置を指定します。
alt=alt	H4s/e2。画像の代わりに表示する代替テキストを指定します。
border=n	N2。画像の周りの枠線の太さをピクセルで指定します。
dynsrc=url	e4。画像の代わりに動画（*.avi）を表示します。
height=n	e4/N2。画像の高さをピクセルまたはパーセンテージで指定します。
ismap	H2-H4s。サーバーサイドクリッカブルマップを実現する際に用います。
lowsrc=url	e4。src で指定した画像を転送する間に表示する、荒い（サイズの小さい）画像の URL を指定します。
src=url	H2-H4s/e2/N2。表示する画像ファイルの URL を指定します。
width=n	e4/N2。画像の横幅をピクセルまたはパーセンテージで指定します。

使用例

HTMLソース

<form method="POST" action="xxx.cgi">
<table>
<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="MAN" checked>男
  <input type=radio name="SEIBETSU" value="FIMALE">女
 </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>

ブラウザ表示例