The Web Design Group

INPUT−入力書式(フォーム)

構  文 <INPUT>
属性仕様
  • TYPE=[ text | password | checkbox | radio |
    | submit | reset | file | hidden | image | button ]
    (入力タイプ)
  • NAME=CDATA(送信されるフォームのキー)
  • VALUE=CDATA(入力の値)
  • CHECKED(チェック・ラジオ・ボタンかchックボックス)
  • SIZE=CDATA
    (テキスト入力文字示唆数)
  • MAXLENGTH=Number
    (テキスト入力文字最大数)
  • SRC=URI(画像のソース)
  • ALT=CDATA (画像入力の代替えテキスト)
  • USEMAP=URI(クライアント側イメージ・マップ)
  • ALIGN=[ top | middle | bottom | left | right ]
    (画像入力の配置)
  • DISABLED(禁止要素)
  • READONLY (変更予防)
  • ACCEPT=ContentTypes(アップロードされるファイルのメディア・タイプ)
  • ACCESSKEY=Character(ショートカット・キー)
  • TABINDEX=Number(タブ順位付け)
  • ONFOCUS=Script(的になる要素)
  • ONBLUR=Script(的でなくなる要素)
  • ONSELECT=Script(選択されたテキストの要素)
  • ONCHANGE=Script(値が変更された要素)
  • 共通属性
内  容
内容になる ブロック−レベル要素, インライン要素 BUTTONを除く

 INPUT要素は、ユーザーが入力するフォーム制御(書式制御)を定義します。 INPUTFORM内で最も有効ですが、HTML 4.0では BUTTON以外のブロック−レベルインライン要素内でのINPUTを許しています。しかし、 Netscape NavigatorFORMの外のINPUT要素を表示しません。

 フォームが転送される時FORM内の各INPUT要素の現在の値がname/value組としてサーバーに送られます。 INPUT要素のNAME属性は使われている名前を提供します。送られる値は、フォーム制御のタイプやユーザーの入力によって決まります。

 INPUTで定義されるフォーム制御タイプは、 TYPE属性によって与えられます。 TYPEの初期値はtextで、一行のテキスト入力欄を提供します。 VALUE属性はテキスト欄の初期値を特定します。 SIZEMAXLENGTH属性は、それぞれテキスト欄の文字数や文字の最大数を指します。

 MAXLENGTH属性はユーザーに効果的なガイドになりますが、著者はクライアントによる文字最大数の強制に頼るべきではありません。ユーザーはHTML文書を写し、 MAXLENGTH属性を取り除いて、フォームを転送することができます。だから、フォーム処理の著者は必要な入力長さのチェックはサーバー・サイドで繰り返されるかを確認しておくべきです。

 password入力タイプはtextタイプのある変形です。ただ異なるのは入力文字が、典型的にはアスタリックで、微妙な情報を外部のものから守るために、見えなくされていることです。しかし、実際の値はサーバーへ見えるテキストとして転送されることに注意して下さい、だからクレジット・カード番号や非常に微妙な情報の十分な安全を提供していません。

 次の例は LABEL要素内でtextpassword欄を使い、ラベル・テキストを INPUT要素と結び付けています:

<P><LABEL ACCESSKEY=U>User name: <INPUT TYPE=text NAME=username SIZE=8 MAXLENGTH=8></LABEL></P>
<P><LABEL ACCESSKEY=P>Password: <INPUT TYPE=password NAME=pw SIZE=12 MAXLENGTH=12></LABEL></P>

 ブール変数型READONLY属性は、HTML 4.0で新しく導入され現在のブラウザのサポートは貧弱で、 textpassword入力タイプの内容の編集をユーザーができないようにします。読み専用要素は、フォームで送信されます。 DISABLED属性は、これは全ての入力タイプに適用しますがサポートもまだ貧弱で、制御をできなくします。禁止要素は読み専用要素でさらに値はフォームで送信されないという制限があり、要素は的を受けずその要素はタブで文書を誘導する場合とばされます。

 radiocheckbox入力タイプは、ユーザーが入れたり切ったり(オン・オフ)できる切り替えを提供します。ラジオボタンで異なるタイプがグループ化され(各 INPUTで同じNAMEを特定することで)、何時グループで一つのボタンだけが選択されます。Checkboxesは、同じNAMEの別のチェックボックスの状態を変更することなく、チェックされます。 VALUE属性は、ラジオボタンやチェックボックスで必須で、チェックされる時に制御の値を与えます。ブール変数型 CHECKED属性は、制御は初期でチェックされることを特定します。

 何時も選択されるべきグループ内の一つラジオボタンを要求するブラウザもあります。適切な初期選択がなされているかを確認するには、ラジオ radio INPUT要素の一つを CHECKEDとして定義します。

 以下の例で、ただ一つの支払方法がユーザーによって選択されます、と言うのもラジオボタンは同じNAMEを持っているからです:

<P>Please indicate your method of payment:</P>
<P><LABEL ACCESSKEY=C><INPUT TYPE=radio NAME="payment_method" VALUE="credit card" CHECKED> Credit card</LABEL><BR>
<LABEL ACCESSKEY=D><INPUT TYPE=radio NAME="payment_method" VALUE="debit card"> Debit card</LABEL><BR>
<LABEL ACCESSKEY=M><INPUT TYPE=radio NAME="payment_method" VALUE="money order"> Money order</LABEL></P>

<P><LABEL ACCESSKEY=S><INPUT TYPE=checkbox NAME="send_receipt" VALUE="yes" CHECKED> Send receipt by e-mail</LABEL></P>

 file入力タイプは、ユーザーが自分のコンピューターやネットワークからファイルを置く(アップロード)する欄を作成します。 VALUE属性はファイルの初期値名を特定しますが、典型的には案全上の配慮としてブラウザは無視します。 ACCEPT属性は受け入れられるメディア・タイプのコンマ区切りのリストを与え、ブラウザが不適切なファイルを取捨できます。今のブラウザは一般的にはACCEPT属性を無視します。

 file INPUTをもったフォームは、 <FORM>タグ内に METHOD=postENCTYPE="multipart/form-data"を特定しなければなりません。 CGI.pmなどの CGIライブラリーは、このようなフォーム取り扱いを簡潔にします

 フォーム基盤のファイルのアップロードは、今のブラウザの多くはサポートしていません。出来る所で入力方法の代替えを提供すべきです。

 以下の例では、ユーザーが検証のために HTML文書をアップロードできるようにしています:

<FORM METHOD=post ACTION="/cgi-bin/validate.cgi" ENCTYPE="multipart/form-data">
<P>Select an HTML document to upload and validate. If your browser does not support form-based file upload, use one of our <A HREF="methods.html">alternate methods of validation</A>.</P>
<P><INPUT TYPE=file NAME="html_file" ACCEPT="text/html"></P>
<P><INPUT TYPE=submit VALUE="Validate it!"></P>
</FORM>

 隠された入力タイプで、フォーム・データをユーザーに表示しないようにできます。これは幾つかの HTML 文書にまたがるアプリケーション・フォームの場合特に有効です;ユーザーはフォームから 隠された入力フォームに入力できます。 CGIスクリプトは隠された入力INPUTを使いスクリプト変数を定義し、以下の例ではフォームの内容である電子メールの受取人と表題を定義しています:

<INPUT TYPE=hidden NAME=recipient VALUE="liam@htmlhelp.com">
<INPUT TYPE=hidden NAME=subject VALUE="Feedback on your HTML Reference">

 欄が隠されるとはブラウザが表示しないということに注意してください。 HTML文書ソースをみれば、誰でも「隠された」欄がみえます。

 TYPEresetは、ユーザーがフォームを初期値に戻すボタンを定義します。リセット・ボタンの VALUE属性は選択性で、ボタン用のブラウザ初期テキストを上書きします。

 submit入力タイプはフォームを送信するボタンを定義します。 resetの様に、選択性の VALUE属性はボタン用のテキストを提供します。 NAME属性があり、フォームの送信に使われると、ブラウザは送信(submit)ボタン用のname/value組を送ることができます。これで多元送信ボタンを提供でき、使われた送信ボタンに応じて異なった作動をとるフォーム処理ができます。

 image入力タイプは画像送信ボタンを特定します。 SRC属性は、画像の URIを特定するのに、必要です。 ALT属性は画像を読み込まない場合の代替えテキストを与えるのに使わなければなりません。 ALTはHTML 4.0で新しく導入されています:多くのブラウザは代替えテキストとして NAMEVALUEに依存し、それ故に同じ目的のためにそれぞれ使える場所で三つの属性を使うべきです。テキスト・ユーザーにとっての画像送信ボタンについては、 INPUT TYPE=IMAGE for text users?で詳しく言及されています。

 画像送信ボタンがクリックされると、クリック領域の座標が name.x=x-valuename.y=y-valueの送信形式で送られ、ここで nameNAME属性の値、 x-valueは画像の上端からのクリックのピクセル値です。 TYPE=imageと組になった USEMAP属性は、クライアント側スクリプトを使ってクライアント側イメージ・マップを定義しますが、この方法はサポートが貧弱です。 USEMAP属性はMAPを定義するURIを与えます。

 旧式になるALIGN属性は、画像送信ボタンを特定します。値 topmiddleそして bottomは、左か右に内容を囲むに際して、ボタンの位置を特定します。値 leftrightは、ボタンの避け方を特定します;画像は左乃至は右端に置かれ内容はそれを回避します。ボタンの下に内容を置くには、適切に <BR CLEAR=left|right|all>を使います。

 カスケーディング・スタイツ・シートvertical-alignfloat特有値(プロパティー)が、ボタンの回避のより柔軟な方法を提供します。

 入力タイプbuttonは、クライアント側スクリプトで使う押し出し(push)ボタンを特定します。 VALUE属性は典型的にはボタンが作動させられた時取る活動を定義するのに使われます。例を以下にしめします:

<INPUT TYPE=button VALUE="Hide non-strict attributes" ID=toggler ONCLICK="toggle()">

 この例で、 toggle()関数が、 SCRIPT要素で前もって定義され、ボタンがクリックされると実行されます。ボタンは、可能クライアント側スクリプトと一緒の時のみ有効ですので、機能しないボタンを或るユーザーへの提供を避けるには、制作者は通常スクリプト言語を使って<INPUT TYPE=button>タグを出力ししなければなりません。かくて、前の例のより完成されたバージョンは以下のようになります:

<SCRIPT TYPE="text/javascript">
<!--
  document.write("<INPUT TYPE=button VALUE=¥"Hide non-strict attributes¥""
                 + "ID=toggler ONCLICK=¥"toggle()¥">");
// -->
</script>

 BUTTON要素は、送信・再設定・押し出し(submit, reset, push)ボタン用のラベルを可能にしていますが、ブラウザのサポートがなく、 INPUTが当面はより安全な選択です。

 ACCESSKEYTABINDEX属性は、 hiddenを除いた全ての入力タイプに適用します。 ACCESSKEYは、フォーム制御に的を当てるショート・カット・キーとして一つのユニコード文字を特定します。制作者は、 INPUT要素やその中に伴われている LABEL要素に、アクセス・キーを設定します。 実体例、e.g. &eacute;)は、 ACCESSKEY値として使われるかもしれません。

 TABINDEX属性は0から32767の数値を特定し、要素のタブ順位を指定します。 TABINDEX=0TABINDEX属性はないフォーム制御は、数値を取る TABINDEXをもった要素より後に訪問されます。 数値のある TABINDEX値の間では、小さい数値が先ず訪問されます。同数なら、 HTML文書内で最初に現われる要素が優先されます。

 INPUT要素も色々な属性を取り、さまざまな事象用のクライアント側スクリプト作動を特定します。大概の要素に共通な核事象以外に、 INPUTは以下の事象属性を受け入れます:

その他の情報