input

input要素は、フォームの各種入力項目を作ります。type属性によって実に様々な形態を取るので、一度にはその機能を把握しきれないかも知れません。必要が出た時にそれぞれの使い方を覚えていくといいでしょう。

この要素はコントロールの種類もさる事ながら、属性の数も多く、しかも特定の種類のコントロールとしか組み合わせられないものも存在するので、主な固有属性は併せて紹介していきますが、コントロール名を与えるname属性と、初期値を指定するvalue属性はほぼ全てのコントロールが持てます。

単数行のテキスト入力欄です。キーボード入力などによって、任意の文字列を入力させる事ができます。type属性をtextにして作成します。

テキストボックスの初期値はvalue属性で与えられます。この値はユーザが変更する事ができ、最終的に送られるのはユーザが加工した値です。勿論何も手をつけなければ初期値が送られるでしょう。

maxlength属性、size属性などを指定する事ができます。

単数行のテキスト入力欄で、キーボード入力などによって、文字列を入力させる事ができますが、入力された文字は画面上で読み取られないように隠されます(例えば、アスタリスク一種類に置き換えられるとか)。勿論それは画面の上だけで、送信時には入力されたままの文字列が送られます。type属性をpasswordにして作成します。

textでなくpasswordを使う事は、軽いパスワード保護にはなりますが、気が紛れる程度でしかありません。フォームの内容がサーバに送信される時には、前述の通り生の入力内容が送られます。これは、SSL (Secure Socket Layer)などを利用して通信を暗号化すれば転送時の盗聴はまず防げますが、サーバ上に生のままで保存しておくとそれを覗き見られる恐れもあります。通信にSSLを使って、サーバ上ではハッシュを記録しておくとそれなりに安心です。詳しくはmethod属性を参照して下さい。

maxlength属性、size属性などを指定する事ができます。

二者択一の選択肢を提供します。選択する事で、チェック状態をトグルさせる事ができます。チェックボックスはtype属性をcheckboxにして作成します。

チェックボックスの値は不変、つまりvalue属性が送られます。オンであればサクセスフルになり、オフであれば非サクセスフルになるので、データセットが送られて来るか来ないかでチェック状態を確認できます。

checked属性などを指定する事ができます。

択一の選択肢を提供します。選択する事でオンにでき、同じname属性を持つ他のラジオボタンをオフにできます。ラジオボタンはtype属性をradioにすれば作れます(radiobuttonではないので注意)。

ラジオボタンの値も不変で、サクセスフルなラジオボタンのvalue属性がそのまま送られます。また、上の例のように、ラジオボタンでは同じカテゴリの選択肢に同じname属性を持たせるのが普通です。

checked属性などを指定する事ができます。

ユーザの目には一切触れないコントロールです。表示こそされませんが、データセットは送られます。type属性をhiddenにすると作られます。

隠しコントロールの値も変わる事がありません。value属性の値がそのまま送られます。

ちなみに、隠しコントロールが表示されないのはユーザの利便性を鑑みているからであり、見られてはまずいものを隠す為ではありません。ソースを見られれば筒抜けです。隠しコントロールは、ユーザが見ても利益が無いと思われるものを前に出さないようにするだけです。

ローカルコンピュータ上のファイルをリモートコンピュータに転送する為のものです。砕けて言えば、 こちら側からファイルをアップロードする事ができます。type属性がfileのものがそれです。

ファイル選択欄ではテキストボックスと違い、通常初期値を与えません。ほぼ無意味だからです。通常のテキストボックスの場合は、value属性に初期値を書く事が推奨されてはいます(ユーザーエージェントの下位互換性の為)。実際に値として送られるものは、ファイル選択欄に入力されたファイル名ではなく、そのファイルの内容です。

accept属性などを指定する事ができます。

ラベル文字列ではなく画像を貼り付けたフラットな送信ボタンです。type属性をimageにして作成します。

グラフィカルブラウザで画像ボタンをクリックすると、画像の座標が送られます。例えば、上の例で、画像の左上から右に13ピクセル、下に25ピクセルの場所でクリックすると、search-je.x=13&search-je.y=25が送られます。つまり、 コントロール名.x=x座標 と コントロール名.y=y座標 の二つがこのコントロールのデータセットとして送られてきます。テキストブラウザを使っていたり、ポインティングデバイスで選択したのではない場合、座標には( 0, 0 )が使われるでしょう。

画像ボタンをサーバーサイドイメージマップ(Server-side Image Mapモジュール参照)としても使えます。サーバーサイドイメージマップとしてみなされるようにするにはismap属性を使いますが、この属性は(指定しなくても座標が送られる為)実質的な効果はありません。

src属性、alt属性をほぼ必須の属性として使い、場合によってはismap属性も指定します。value属性を指定すればそれも送られてくるはずですが、ユーザーエージェントによっては送ってくれない事があります。

普通のラベル文字列を備えた送信ボタンです。押された時に、フォームの内容を送信します。type属性をsubmitにして作ります。

ラベル文字列はvalue属性で指定します。これはユーザに向けて表示されるとともに、name属性があればその値としても使われます。

送信ボタンはbutton要素でも作る事ができる為、どうしても駄目という訳でなければbutton要素を使う方がメリットがあるでしょう。

普通のラベル文字列を備えたリセットボタンです。押された時に、フォームの全てのコントロールの値を初期値に戻します。type属性をresetにすると作れます。

ラベル文字列は、同様にvalue属性で指定します。これはユーザに向けて表示されるしか用途がありません。name属性を持ったとしても、リセットボタンがサクセスフルになる事は無いからです。

リセットボタンは、あればなるほど便利ですが、うっかり間違えて押してしまうと(特に長時間かけて内容を入力した場合は)うんざりする為、つける場合はonreset属性とスクリプトで確認を取ったほうがいいかも知れません。リセットボタン自体無くても構わない事の方が多い事すらあるかも知れません。

リセットボタンもbutton要素でも作る事ができる為、どうしても駄目という訳でなければbutton要素を使う方がメリットがあるでしょう。

普通のラベル文字列を備えた何という事は無いボタンです。押された時の規定の動作も無い上、常に非サクセスフルです。使い方は殆ど、イベント発火でしょう。つまり、onclick属性などと一緒に使います。作り方はtype属性をbuttonにするだけです。

ラベル文字列は、これもvalue属性で指定します。非サクセスフルなのでname属性には意味がありません。

このボタンもbutton要素でも作る事ができる為、どうしても駄目という訳でなければbutton要素を使う方がメリットがあるでしょう。

解説を参照して下さい。