フォームに関するタグを示します。
フォーム全体を囲みます。以下の属性を持ちます。
action | フォームデータの送信先(メールアドレスまたはCGIのURLアドレス)を指定します。 |
---|---|
method | フォームデータの送信形式をpostまたはgetで指定します。actionで指定したCGIに対応した形式で指定する必要があります。getには文字数制限があるので、一般的にpostが使用されます。 |
enctype | フォームを送信する際の形式(MIMEタイプ)を指定します。 |
<form action="http://www.tokiwa.ac.jp/~shio/el/html/print.cgi" method="post"> </form>
入力項目を作成します。終了タグはありません。type属性によってさまざまな入力を作成できます。type属性の値別に説明します。
入力行を作成します。passwordにした場合には入力された文字が*で表示され、他の人にはわからなくなります。続けて以下の属性を指定できます。
name | 入力行に名前をつけます。 |
---|---|
value | あらかじめ表示させておく値を指定します。 |
size | 入力欄の大きさを指定します。 |
maxlength | 入力できる最大文字数を指定します。 |
名前
<input type="text" name="name" size="15"><br>パスワード
<input type="password" name="password" length="10" size="10">
チェックボックス、ラジオボタンを作成します。続けて以下の属性を指定できます。
name | 入力フィールドに名前を付けます。 |
---|---|
value | 選択肢の内容を指定します。 |
checked | あらかじめチェックのついた状態になります。属性値はありません。 |
血液型
<input type="radio" name="blood" value="A">A
<input type="radio" name="blood" value="B">B
<input type="radio" name="blood" value="AB">AB
<input type="radio" name="blood" value="O">O
<br>好きなゲーム(複数回答可)
<br> <input type="checkbox" name="MUSIC" value="yes">音ゲー
<input type="checkbox" name="RPG" value="yes">RPG
<input type="checkbox" name="SLG" value="yes">シュミレーション
<input type="checkbox" name="ACTION" value="yes">アクション
参照ボタンと参照したファイル名を表示する欄を作成します。続けて以下の属性を指定できます。
name | 入力フィールドに名前をつけます。 |
---|---|
value | あらかじめ表示させておく値を指定します。 |
ブラウザに表示されない項目を作成します。続けて以下の属性を指定できます。
name | 入力フィールドに名前をつけます。 |
---|---|
value | 送信される値を指定します。 |
入力欄のクリアを行うリセットボタンを作成します。続けてvalue属性にボタンの名前を指定します。
<input type="reset" value="リセット">
フォームの送信ボタンを作成します。続けてvalue属性にボタンの名前を指定します。
<input type="submit" value="送信">
画像を使った送信ボタンを作成します。続けて以下の属性を指定できます。
src | 画像のファイル名を指定します。 |
---|---|
name | ボタンにつける名前を指定します。 |
width | 画像の横幅を指定します。 |
height | 画像の高さを指定します。 |
あらかじめ表示させておくテキストを囲んで、複数行のテキスト入力欄を作成します。以下の属性を持ちます。
rows | テキストボックスの行数を指定します。 |
---|---|
cols | テキストボックスの文字数を指定します。 |
name | 入力欄に名前を付けます。 |
wrap | 入力欄の自動改行を設定します。hardは、自動改行して実際の改行と自動改行の両方で改行コードを送信します。softは、自動改行して実際の改行のみ送信します。offは、自動改行せずに改行コードを取り除いて送信します。 |
<textarea rows="10" cols="80" name="comment" wrap="soft">
コメントをどうぞ
</textarea>
選択メニュー全体を表します。各選択項目はoption要素として書きます。以下の属性を持ちます。
name | 入力欄に名前を付けます。 |
---|---|
size | 項目を表示する行数を指定します。指定した行数以上に項目がある場合にはスクロールバーがつきます。省略した場合には、1行のプルダウンメニューになります。 |
選択メニューの項目を表します。終了タグはありません。以下の属性を持ちます。
value | 送信される内容を指定します。 |
---|---|
selected | あらかじめ表示される項目につけます。属性値はありません。 |
<select name="syusshin" size="3"> <option value="ibaraki">茨城
<option value="fukusima">福島
<option value="tochigi">栃木
<option value="others">その他
</select>
Programming Laboratory (Shio seminar)