<INPUT>タグはテキスト入力欄や実行ボタン等、
フォーム(<FORM>~</FORM>)を構成する部品を作成するタグです。
type属性の値により、一行テキストボックス・チェックボックス・ラジオボタン・実行ボタン・リセットボタン等の部品となります。
各入力フィールドにデータが入力され、
<FORM>でデータが送信される際には、
<INPUT>タグのname属性で付けたデータ名とその値を一組にして、
<FORM>タグのaction属性で指定したサーバー上のファイルに、
<FORM>タグのmethod属性で指定した転送方法で送られます。
■属性
- type=”text”
- 1行テキストボックスをつくります。通常のテキストを入力するフィールドです。2行以上にわたる長い文章を入力させたい場合には、<TEXTAREA>~</TEXTAREA>を使用します。
- type=”password”
- パスワード入力ボックスをつくります。入力したテキストがアスタリスク(*)などに置き換えて表示されます。ただし、データが暗号化されるわけではないので、送信されたデータを受け取ることができれば内容を見ることができます。利用の際には注意してください。
- type=”checkbox”
- チェックボックスをつくります。チェックボックスは複数選択が可能です。checked属性を指定すると、その項目についてはあらかじめチェックの付いた状態となります。
- type=”radio”
- ラジオボタンをつくります。複数の中から一つしか選択できない点がチェックボックスと異なります。複数を一つのグループとして認識させるには、name属性で同じ名前を付けてください。checked属性を指定すると、その項目についてはあらかじめチェックの付いた状態となります。
- type=”file”
- サーバーへファイルを送信する際に、送信するファイルを選択します。ファイル名の入力フィールドと[参照]ボタンが表示されます。サーバー側にはファイルを受け取るための特別なCGI等が必要です。
- type=”hidden”
- 隠しデータをサーバーに送信する際に使用します。このタイプのデータは、画面上には表示されませんが、value属性で指定した値がサーバーへ送信されます。
- type=”submit”
- 送信ボタンをつくります。
- type=”reset”
- リセットボタンをつくります。このボタンを押すと、それまでに入力した情報をキャンセルして初期状態に戻します。
- type=”button”
- 汎用ボタンをつくります。
- type=”image”
- 画像のボタンをつくります。使用する画像ファイルはsrc属性で指定してください。またalt属性が必須となります。
■使用例
HTMLソース
<form action=”cgi-bin/aaa.cgi” method=”post”>
<table border=”0″>
<tr>
<td align=”right”><b>
名前:</b></td>
<td><input type=”text” name=”name” size=”30″ maxlength=”20″></td>
</tr>
<tr>
<td align=”right”><b>
パスワード:</b></td>
<td><input type=”password” name=”pass” size=”6″
maxlength=”4″></td>
</tr>
<tr>
<td align=”right”><b>学年:</b></td>
<td>
<input type=”radio” name=”gakunen” value=”1年生”>1年生
<input type=”radio” name=”gakunen” value=”2年生”>2年生
<input type=”radio” name=”gakunen” value=”3年生”>3年生
<input type=”radio” name=”gakunen” value=”4年生”>4年生
<input type=”radio” name=”gakunen” value=”5年生”>5年生
<input type=”radio” name=”gakunen” value=”6年生”>6年生
</td>
</tr>
<tr>
<td align=”right”><b>好きな課目:</b></td>
<td>
<input type=”checkbox” name=”kamoku” value=”国語”>国語
<input type=”checkbox” name=”kamoku” value=”英語”>英語
<input type=”checkbox” name=”kamoku” value=”算数”>算数
<input type=”checkbox” name=”kamoku” value=”理科”>理科
<input type=”checkbox” name=”kamoku” value=”社会”>社会
<input type=”checkbox” name=”kamoku” value=”体育”>体育
</td>
</tr>
<tr>
<td align=”right”><b>宿題ファイル:</b></td>
<td><input type=”file” name=”syukudai”></td>
</tr>
<tr>
<td></td>
<td>
<input type=”submit” value=”送信”>
<input type=”reset” value=”リセット”>
</td>
</tr>
</table>
</form>