INPUT要素に入る属性
TEXT属性
１行テキスト欄は、短い文字列を入力するためのコントロールを提供します。TEXT型のコントロールは「フィールド」とも呼ばれ、一般ブラウザでは「一行テキストボックス」が表示されます。
値は、text｜password｜checkbox｜radio｜submit｜reset｜file｜hidden｜image｜button
です。
- type="hidden"
- 画面上の表示は無く、CGIに特定のパラメータを送信しプログラムを作動させる役割を持っています。
パラメータ ： プログラムの関数呼び出しに指定する引数（変数） - type="text"
- １行テキスト欄：単一のラインのテキスト入力コントロールを作成します。
- type="radio"
- ラジオボタンを構成します。単数の選択肢を作る場合に使います。
- type="checkbox"
- チェックボックスを構成します。複数の選択肢を作る場合に使います。
- type="password"
- パスワード欄を構成します。記入すると、入力テキストは「***」のように文字を隠すような方法をとります。
- type="file"
- ファイル選択欄を構成します。
- type="submit"
- 送信ボタンを構成します。
- type="reset"
- リセットボタンを構成します。
- type="image"
- 画像ボタンを構成します。src 属性で画像の URI を、alt 属性で代替テキストを指定します。その画像がそのままボタンとして使われます。
- type="button"
- 実行ボタンを構成します。onClick属性でスクリプト使用するボタンを製作します。
NAME属性（コントロール名）
フォームは複数の入力項目を同時に送信するので、データを受信したCGIプログラムがそれぞれの項目を区別できるようにする必要があります。そのためにデータ別に名前を付けるのがNAME属性です。
NAME属性で指定した名前は処理するアプリケーションに渡すだけで、ブラウザには表示されません。
ソース： <form> URL：<input type="text" name="url" value="http://" size="60"> </form>
VALUE属性（初期入力文字）
フォームが表示された時に最初から入力されている文字などをVALUE属性で指定できます。
上記のフォーム表示例で「http://」と記述されているのがVALUE属性の値になります。この値は、自由に書き込むことが出来ます。
フォームの入力を簡単にするために、初期値を用意するのはよい方法で、ブラウザによっては初期値がないとフィールド選択ができないことがあります、その意味でも初期値が推奨されています。
もし、空白が良いのであれば「value=" "」の様に半角スペースを採りましょう。
SIZE属性（入力欄の横幅指定）
テキスト入力欄の横幅を、size属性で指定することができます。「size=""」の値横幅の長さ（フィールド）は半角の文字数（バイト）で指定します。よく、見かけますがpx数値で指定ではありません。
因みに、日本語は一文字で「size="2"」になります。
MAXLENGTH属性（入力の文字数を限定）
テキスト入力欄の文字数を限定できます。時々いたずら？か、間違いでメッセージを書く人がいます。落語の「寿華無寿華無御光の・・・・・」と書かれた方もいました。（笑） 言ってみれば、いたずら防止策ですね。
そこで、 「maxlength=""」の値、最大文字数を半角の文字数で指定します。
因みに、日本語は一文字で「size="2"」になります。
◆ TEXT属性の種類
送信やリセット（消去）などのボタン類
フォームで入力されたデータを送信するためには、同じ<FORM>要素内に送信用のボタンを作る必要があります。
そのボタンをクリックされることでフォームの情報が送信されます。
<INPUT>要素のTYPE=""の値に「SUBMIT」の送信と「RESET」のリセット（消去、クリア、リセット）のボタンが作れます。
<INPUT TYPE="SUBMIT"><INPUT TYPE="RESET">では、ブラウザによっては文字のないボタンになるので上の「VALUE=""」でボタンの中の文字を表示させます。
「VALUE=""」が無い場合
IEでは「SUBMIT」を“クエリー送信”・「RESET」を“リセット”、
NNでは「SUBMIT」を“Submit Query”・「RESET」を“Reset”と表示します。
例えば、ソースを下のように記述すると
<INPUT TYPE="SUBMIT" VALUE="送るのだ！">
<INPUT TYPE="RESET" VALUE="や〜めた！">
同じ仲間の「TYPE="button"」を使った物で、テキストの使用条件項目を作り「VALUE="同意する"」「VALUE="同意しない"」というスクリプトボタンも見かけます。
また、「TYPE="image"」でボタンを画像に替えることも出来ます、これは後ほど<BUTTON>要素で紹介します。
◆ TYPE=""コントロールの使われ方
・type="text"
名前｜メールアドレス｜URL 等に使われる比較的短い文書に使われます。
・type="password"
会員制のページやサイトに使われて、一般的にユーザー名とパスワードの認証をCGIプログラムで行います。
パスワードの入力欄は「●●●」「•••」「***」等で隠されますが送信するデーターは入力した文字列を送信します。
・type="file"
フォームの利用者にファイｌルを送信してもらうためのファイルコントロールでCGIプログラムで送信します。
type="file"を指定するとテキスト入力欄の横に自動的に「参照ボタン」が付きます。
セキュリティの問題上「type="file"」の使用は、あまりお勧めできません。（ウイルスを送る方がいます。）
この、ファイルコントロールを使うためには、
<form method="post"
enctype="multipart/form-data">指定します、
・type="radio"
ラジオボタン：複数の選択肢（丸い窓）から一つだけ選ぶコントロールです。
複数の選択肢を作るときの注意点
サンプル：
<input type="radio" name="sex" value="male"
checked> 男性
<input type="radio" name="sex" value="female">
女性
このように、一つの選択肢に一つの<input>を記述します。
記入者が選択を選ばない場合のために「checked」をどれか一つに記述すると最初から選択された状態になります。
・type="checkbox"
チェックボックス：
複数の選択肢（四角い窓）から、いくつでも選択できるコントロールです。
複数の選択肢を作るときの注意点
サンプル：
<input type="checkbox" name="properties" value="Win"
checked> Windows
<input type="checkbox" name="properties" value="Mac">
Macintosh
<input type="checkbox" name="properties" value="Forth">
その他
このように、一つの選択肢に一つの<input>を記述します。
記入者が選択を選ばない場合のために「checked」をどれか一つに記述すると最初から選択された状態になります。
・type="button"
よく、JavaScriptのコントロールで作成された関数を呼び出すために使用されています。
・type="image"
TYPE="SUBMITや"TYPE="RESET"を画像に変えるための属性値です。
◆ TYPE属性のもう一つの顔（送信ボタンを押されると実行）
・TYPE="HIDDEN"コントロール（送信データ）
ブラウザには、表示されない入力用コントロールで、あらかじめ<INPUT>要素内に記述することで、情報をサーバーのCGIプログラムにパラメータを送信しプログラムの作動を設定します。
サンプル：
<FORM action="http://www.123net.ne.jp/^123/cgi-bin/form_mail.cgi"method="POST"> <INPUT TYPE="HIDDEN" NEME="CGIコントロール名" VALUE="送信データ"> <INPUT type=hidden name="subject" value="フォームメール"> </FORM>
◆ <TEXTAREA>でメーセージ欄
・<TEXTAREA></TEXTAREA>
複数行（長い文面）を記入するのに、使う要素になります。
<TEXTAREA NAME="コントロール名" COLS="横の文字数"
ROWS="行数">記入欄</TEXTAREA>
・テキストエリアの大きさを決める
- COLS="横の文字数"
- 横の幅になる半角の字数を数字で記述します。
- ROWS="行数"
- 縦の幅（行）になる字数を数字で記述します。
・入力者の改行コードを指定
入力者のEnterキーの実行を有効や無効の指定することが出来ます。
「WRAP=""」の属性に、OFF｜HARD｜SOFT 等の値を指定します。
- OFF
- 改行コードを解除して送信します。
- HARD
- 改行コードとテキストエリアの自動改行も有効にして送信します。
- SOFT
- 改行コードのみ有効にして送信します。
◆ その他の属性機能
・掲載・展示用のテキストボックスの属性
INPUT要素やTEXTAREA要素に「READONLY」の属性を記述すると、掲載・展示用のメッセージができます。
・データ入力順序を指定する属性
フォーム内Tabキー操作で入力順に移行させる属性です。「tabindex="1〜32767の数字"」
使用できる要素は、BUTTON｜INPUT｜SELECT｜TEXTAREA です。
・ショートカットキー操作を設定
ACCESSKEY属性を使いショートカットキー操作で指定したコントロールに移行できます。
使用できる要素は、BUTTON｜INPUT｜LABLE｜LEGEND｜TEXTAREA です。
・入力できないようにする
DISABLED属性を使い変更や選択などの入力ができないようにします。
通常、スクリプトを使い名前やメールアドレスを記述しないと操作できない物があります。それは、この属性を利用します。
使用できる要素は、BUTTON｜INPUT｜OPTION｜OPTGROUP｜SELECT｜TEXTAREA です。
タグ解説INPUTコントロール（入力部品）（送信データ）を定義： <FORM>要素の子要素で、さまざまな入力部品や送信データを作り、CGIプログラムのデータ渡役になります。 属性には、TEXT｜NAME｜VALUE｜SIZE｜MAXLENGTH｜TABINDEX｜ACCESSKEY｜SRC｜ALT｜CHECKED｜READONLY｜DISABLED｜onClick｜があります。 TEXTAREAテキストエリア（入力部品）を定義： 複数行にまたがる文書の入力欄を作ります。 属性には、NAME｜COLS｜ROWS｜WRAP｜があります。 |
【←BACK ┃NEXT→】