ブラウザにテキストボックスなどの入力領域――入力コントロールを表示させるには、INPUTタグを使います。
- typeオプションで種類を指定する -
INPUTタグの書式は、以下の通りです。
<INPUT type="種類" value="値" name="名前">
| ・ |
type
表示するコントロールの種類を指定します。
submit:submit（送信）ボタン
reset:reset（取消）ボタン
text:テキストボックス
checkbox:チェックボックス
radio:オプションボタン（ラジオボタン） |
| ・ |
name
submitボタンとresetボタンではボタンに表示する文字列、チェックボックスとオプションボタンでは選択肢の項目名を指定します。 |
| ・ |
value
コントロールに付ける名前を指定します。この名前がデータと共にWebサーバーに送られるので、CGIプログラムでは、どのコントロールにどのような値が入力されたかが分かります。
※ INPUTタグは、HTMLでは開始タグのみで閉じるためのタグを持っていません。XHTMLに準拠したページを記述する場合は、最後に“/”を挿入してタグを閉じなければなりません |
- 送信／取消ボタン -
実際にWebサーバーデータを送信するには、ユーザーはブラウザに表示された[送信]ボタンをクリックします。[送信]ボタンという名称は本稿で便宜的に用いているもので、前回説明したように、一般には“sbmitボタン”と呼ばれます。
ボタン表面に表示される文字は自由に設定できるので、“submit”と表示されていることもあれば“送信”などとなっていることもあります。
入力したデータを取り消して送信しないのであれば、ユーザーは[取消]ボタンをクリックします。[取消]ボタンという名称は本稿で便宜的に用いているもので、一般には“resetボタン”と呼ばれます。
ボタン表面に表示される文字は自由に設定できるので、“reset”と表示されていることもあれば“取消”などとなっていることもあります。
送信／取消ボタンを生成するための書式は、以下のようになります。
<INPUT type="submit | reset" value="文字列">
データを送信するためのボタンに“送る”という文字列を表示させるなら、以下のようにします。
<INPUT type="submit" value="送る">
入力データを消去して送信しないためのボタンに“やめる”という文字列を表示させるなら、以下のようにします。
<INPUT type="reset" value="やめる">
valueオプションを省略した場合、ブラウザによってボタンに表示される文字列が異なります。
InternetExplorer 5以降（日本語版）
type="submit"とした場合：クエリ送信
type="reset"とした場合：リセット
Netscape
type="submit"とした場合：submit
type="reset"とした場合：reset
- テキストボックス -
ユーザーに文字列を入力させるには、テキストボックスを使います。テキストボックスはtypeオプションを"text"とし、nameオプションでテキストボックスの識別名を設定します。
テキストボックスを生成するための書式は、以下のようになります。
<INPUT type="text" name="識別名"
value="表示文字列" size="横幅"
maxlength="最大文字数">
オプションの意味は次の通りです。
| ・ |
type
"text"を指定します。テキストボックスがフォームの標準アイテムなので、typeオプションを省略してもテキストボックスが表示されます。type="password"とするとパスワード入力用のテキストボックスとなり、ユーザーの入力した文字が表示されなくなります。 |
| ・ |
name
テキストボックスの名前を指定します。入力を受け取ったCGIプログラム側で、コントロールを識別するために用います。 |
| ・ |
value
最初に表示させるテキストを設定します。省略すると空白の状態となります。 |
| ・ |
size
テキストボックスの横幅(長さ)をバイト数で指定します。 |
| ・ |
maxlength
入力できる最大の長さをバイト数で指定します。sizeオプションで指定した見かけ上の長さとは無関係に指定できます。 |
sizeオプションで指定できるテキストボックスの見た目の長さと、maxlengthオプションで指定できる最大入力文字数とは、互いに連携していません。小さなテキストボックスに長い文字を入力することも、その逆も可能です。
しかし、そのようにするとユーザーを無意味に戸惑わせることになるため、sizeで指定する値はmaxlengthと同じか、やや大きめとした方がよいでしょう。
テキストボックスの前には、通常「何を入力すればよいのか」を示す項目名を、テキストデータとして表示します。
例)
「所属」を入力するテキストボックスを表示し、初期値として「総務課」という文字列を表示しておきます。
所属：<INPUT type="text" name="sect"
value="総務課" size="20">
- チェックボックス -
１つの項目に対してYes／NoあるいはOn／Offを指定できるようにするには、チェックボックスを使います。チェックボックスはtypeオプションを"checkbox"とし、nameオプションで識別名を設定します。
チェックボックスを生成するための書式は、以下のようになります。
<INPUT type="checkbox" name="識別名"
value="送信される文字" checked>
画面に表示される項目名は、これに続けてテキストとして入力します。
| ・ |
type
"checkbox"を指定します。 |
| ・ |
name
チェックボックスの名前を指定します。入力を受け取ったCGIプログラム側で、コントロールを識別するために用います。 |
| ・ |
value
チェックされたときWebサーバーへ送信される文字列を指定します。指定を省略すると、チェックされているとき“on”、チェックされていないとき“off”という文字列が送られます。 |
| ・ |
checked
これを指定すると、最初からチェックされた状態で表示されます。 |
例)
送達手段を「郵便／宅配／手渡」の中から選択するためのチェックボックスを表示します。初期状態では「郵便」が選択されているようにします。
送達手段：
<INPUT type="checkbox" name="chk1"
value="mail" checked>郵便
<INPUT type="checkbox" name="chk2"
value="dlvr">宅配
<INPUT type="checkbox" name="chk3"
value="hand">手渡
ユーザーが「宅配」のチェックボックスをチェックして送信すると、CGIプログラムには“chk2”の値が“dlvr”、“chk1”と“chk3”の値が空文字となったデータが渡されます。
- オプションボタン -
複数の選択肢から１つを選べるようにするには、オプションボタン（ラジオボタン）を使います。オプションボタンはtypeオプションを"radio"とし、nameオプションで識別名を設定します。
オプションボタンを生成するための書式は、以下のようになります。
<INPUT type="radio" name="識別名"
value="送信される文字" checked>
画面に表示される項目名は、これに続けてテキストとして入力します。
| ・ |
type
"radio"を指定します。オプションボタンは「ラジオボタン」とも呼ばれます。HTMLでは後述するリストボックスの表示にOPTIONタグを用いるため、混同を避ける意味で「ラジオボタン」と呼ぶ方がよいでしょう。ここでは、WindowsでVisual Basicなどを扱っている人が多いと思えるため、オプションボタンと呼んでおきます。 |
| ・ |
name
オプションボタンの名前を指定します。オプションボタンは複数の選択肢から１つを選択する場合に用いるため、１つのグループとするオプションボタンには、すべて同じ名前を与えます。 |
| ・ |
value
チェックされたときWebサーバーへ送信される文字列を指定します。指定を省略すると、チェックされているとき“on”、チェックされていないとき“off”という文字列が送られます。 |
| ・ |
checked
これを指定すると、最初からチェックされた状態で表示されます。 |
例)
所属を「総務／人事／経理」の中から選択するためのオプションボタンを表示します。初期状態では「総務」が選択されているようにします。
所属：
<INPUT type="radio" name="sect" value="general" checked>総務
<INPUT type="radio" name="sect" value="person">人事
<INPUT type="radio" name="sect" value="account">経理
ユーザーが「人事」のオプションボタンをチェックして送信すると、CGIプログラムには“sect”の値が“person”となったデータが渡されます。
 |
|
|
