<INPUT>
フォームの構成部品を作成する
<INPUT>タグはテキスト入力欄や実行ボタン等、フォームを構成する部品を作成するタグです。type属性の値により、一行テキストボックス・チェックボックス・ラジオボタン・実行ボタン・リセットボタン等の異なる部品となります。
属性
- type="text"
- 1行テキストボックスをつくります。通常のテキストを入力するフィールドです。2行以上にわたる長い文章を入力させたい場合には<TEXTAREA>〜</TEXTAREA>を使用します。
- type="password"
- パスワード入力ボックスをつくります。入力したテキストがアスタリスク（*）などに置き換えて表示されます。ただし、データが暗号化されるわけではないので、送信されたデータを受け取ることができれば内容を見ることができます。利用の際には注意してください。
- type="chackbox"
- チェックボックスをつくります。チェックボックスは複数選択が可能です。checked属性を指定すると、その項目についてはあらかじめチェックの付いた状態となります。
- type="radio"
- ラジオボタンをつくります。複数の中から一つしか選択できない点がチェックボックスと異なります。複数を一つのグループとして認識させるには、name属性で同じ名前を付けてください。checked属性を指定すると、その項目についてはあらかじめチェックの付いた状態となります。
- type="file"
- サーバーへファイルを送信する際に、送信するファイルを選択します。ファイル名の入力フィールドと[参照]ボタンが表示されます。サーバー側にはファイルを受け取るための特別なCGI等が必要です。
- type="submit"
- 送信ボタンを作ります。
- type="reset"
- リセットボタンをつくります。このボタンを押すと、それまでに入力した情報をキャンセルして初期状態に戻します。
- type="button"
- 汎用ボタンを作ります。
- type="image"
- 画像のボタンをつくります。使用する画像ファイルはsrc属性で指定してください。またalt属性が必須となります。
ソース
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>タイトル</title>
</head>
<body>
<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="男">男
<input type="radio" name="gakunen" value="女">女
</td>
</tr>
<tr>
<td align="right"><b>年齢：</b></td>
<td>
<input type="checkbox" name="kamoku" value="10代">10代
<input type="checkbox" name="kamoku" value="20代">20代
<input type="checkbox" name="kamoku" value="30代">30代
<input type="checkbox" name="kamoku" value="40代">40代
<input type="checkbox" name="kamoku" value="50代">50代
<input type="checkbox" name="kamoku" value="60代">60代
</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>
</body>
</html>
対応ブラウザ
NS3・・・○- NS4・・・○
- NS6・・・○
- NS7・・・○
IE3・・・○- IE4・・・○
- IE5・・・○
- IE5.5・・・○
- IE6・・・○
O6・・・○- O7・・・○
FX1・・・○
更新履歴
- 2008.8.7
- linkページのリンクに、リンク先のサイトサムネイルを表示させるようにしました。
PORTFOLIOのページもサムネイルをクリックすることにより、画像を拡大して表示するようにしました。 - 2008.7.4
- linkに3件追加
- 2008.6.22
- Portfolioに1件追加
サイトデザイン修正 - 2008.6.17
- linkに1件追加
- 2008.1.19
- Portfolioに1点追加
- 2008.1.16
- Portfolioに2点追加
- 2007.9.29
- BLOG開始
- 2007.8.6
- HTMLに一件追加
- 2007.8.3
- サイトリニューアル
- 2007.6.19
- Portfolioに1点追加
- 2006.9.13
- Portfolioに1点追加
- 2006.8.11
- Portfolioに1点追加
- 2006.8.11
- Blog更新、BBS削除しました、LINKに1件追加
DARKNESS
このサイトへのリンクはフリーです。ご連絡していただければ相互リンクもいたします。リンクの際は下記バナをご利用ください。
- 31×31px
- 88×31px
- 188×29px