HTMLタグの”form要素”に関するリストです。アンケートやお問い合わせなどユーザーからのデータを受け渡しさせたい場合に使用します。
使用の場合にはCGIプログラムが必要になります。

HTMLタグのフォーム要素に関するリスト

フォームの基本構成

• <form>（フォームボディ）
• <fieldset><legend>★</legend> 内容 </fieldset>（グループ化と見出し）
• <input type="★" ★="★">（入力フィールドやボタン）
• <textarea>（1行以上の入力フィールド）
• <label for="★">（チェック項目とラベルの同期）

<input type="★">に指定できる要素

• type="checkbox"（複数選択できるチェックボタン）
• type="radio"（1項目選択のラジオボタン）
• type="submit"（フォームに入力された内容の送信ボタン）
• type="button"（送信等などのボタン/カスタム用）
• type="reset"（入力内容をリセット）
• type="image"（ボタンを任意の画像で表示）
• type="file"（アップロードファイル名のフィールド）
• type="hidden"（隠しフォーム）

プルダウンメニュー

• <select>（一般的なプルダウンメニュー）
• <optgroup label=”★”>（見出し付きのプルダウンメニュー）
• <select size="★">（ボックスエリア内にリストを表示）

フォームの基本構成

<form>

フォームを作成する。この<form></form>の中に必要なボタンやテキストエリアを記述していく。

フォームを使用する場合、XHTMLは『Transitional』で記述。

<form>
<input type="text" name="yourname">
<textarea name="toiawase" cols="40" rows="5"></textarea>
<input type="button" name="sousin" value="送信">
</form>

<fieldset><legend>★</legend> 内容 </fieldset>

フォーム内の任意の項目をグループ化し、ライン上に見出しをつける。フォーム内であればいくつも作ることができる。

見出し｜Sample

<form>
<input type="text" name="yourname">
<textarea name="toiawase" cols="40" rows="5"></textarea>
<input type="button" name="sousin" value="送信">

</form>

<input type="★" ★="★">

入力欄やボタンなどを指定。
XHTMLで記述の場合は />で閉じる。

インプット｜Sample

<!--入力欄-->
<input type="text" name="yourname">

<!--送信ボタン-->
<input type="button" name="sousin" value="送信">

<textarea>

1行以上のテキスト入力をさせたい場合に指定。

テキストエリア｜Sample

<!--行数指定-->
<textarea name="toiawase" cols="40" rows="5">
</textarea>

<!--入力禁止-->
<textarea readonly>
</textarea>

<!--選択不能-->
<textarea disable>
サンプルテキスト
</textarea>

<label for="★">

<input>に関連付けて同じ操作を指定することができる。
チェックボタンやラジオボタンなどはボタン部分しか反応しないが、この属性を使うことで内容テキストをクリックした際にもチェックできるようになる。

<input>に<id属性>を記述し、<label for="ID属性値と同じ">とする。

ラベルの関連付け｜Sample

<input type="radio" name="ques" value="yes" id="ques-yes" />
<label for="ques-yes">YES</label>
<input type="radio" name="ques" value="no" id="ques-no" />
<label for="ques-no">NO</label>

<input type="★">に指定できる要素

送信するためのボタンや、項目を選択することのできるチェックボックスなどを製作する際に使用。選択性のボタンはvalue="★"に記述された値が送信される。

なおCGIは未設置ですので動作はいたしません。

type="checkbox"

複数選択できるチェックボタンを表示。

XHTMLでは />で閉じる。

チェックボタン｜Sample

<form name="toiawase" method="post" action="/cgi-bin/***.cgi" >
<input type="checkbox" name="koubutu" value="ichigo" >イチゴ<br>
<input type="checkbox" name="koubutu" value="meron" >メロン<br>
<input type="checkbox" name="koubutu" value="katudon" checked>カツ丼<br>
</form>

type="radio"

ラジオボタンを表示。ひとつの項目だけを選ばせたい場合に使用。

XHTMLでは />で閉じる。

ラジオボタン｜Sample

<form name="toiawase" method="post" action="/cgi-bin/***.cgi" >
<input type="radio" name="koubutu" value="ichigo" >イチゴ<br />
<input type="radio" name="koubutu" value="meron" >メロン<br />
<input type="radio" name="koubutu" value="katudon" checked="checked" >カツ丼<br />
</form>

type="submit"

送信ボタンを表示。フォームに入力された内容を送信させる際に使用。

XHTMLでは />で閉じる。

送信ボタン｜Sample

<form name="toiawase" method="post" action="/cgi-bin/***.cgi" >
<p>お問い合わせ内容：</p>
<textarea name="toiawase" cols="40" rows="4" ></textarea>
<input type="submit" name="check" value="記述内容を確認" >
<input type="submit" name="sousin" value="送信" >
</form>

type="button"

クリックすることのできるボタンを表示。送信やリセットなどに使う。スクリプトを使いオリジナルのボタンを制作することも可能。

XHTMLでは />で閉じる。

ボタン｜Sample

<!--一般的な送信ボタン-->
<input type="button" name="sousin" value="送信" >

<!--前のページへ戻る/JavaScript使用-->
<input type="button" name="sousin" value="戻る"
onClick="history.back()" >

type="reset"

フォームに入力された情報をリセットさせるボタンを表示。

XHTMLでは />で閉じる。

送信ボタン｜Sample

<form name="toiawase" method="post" action="/cgi-bin/***.cgi" >
<p>お問い合わせ内容：</p>
<textarea name="toiawase" cols="40" rows="4" ></textarea>
<input type="reset" name="reset" value="リセット" >
<input type="submit" name="sousin" value="送信" >
</form>

type="image"

任意の画像を使いボタンを表示。

XHTMLでは />で閉じる。

カスタム画像ボタン｜Sample

<input type="image" src="images/sample.jpg" name="sousin" value="送信" >

type="file"

サーバー送るアップロードファイル名を入力するフィールドを表示。フィールド横に自動で参照ボタンが設置される。

XHTMLでは />で閉じる。

カスタム画像ボタン｜Sample

<input type="file" name="upload" size="45" >

type="hidden"

隠しフォームを設置。ユーザーには不可視。フォームによって個別のvalue="★"を送らせたい場合などに使用。

XHTMLでは />で閉じる。

カスタム画像ボタン｜Sample

<input type="hidden" name="upload" value="No-001" >

プルダウンメニュー

<select>

プルダウン式のメニューを表示。<select></select>内に<option></option>を記述することで表示させる。

プルダウン｜Sample

<select name="todouhuken">
<option selected="selected">都道府県</option>
<option value="hokaido">北海道</option>
<option value="tokyo">東京都</option>
<option value="kanagawa">神奈川県</option>
<option value="hukuoka">福岡県</option>
</select>

<optgroup label="★">

見出し付きのプルダウン式のメニューを表示。<select></select>内に<optgroup></optgroup>を記述させ、その中に<option></option>を指定。

optionをグループ化する。

見出しプルダウン｜Sample

<select name="todouhuken">
<option selected="selected">出身地</option>
<optgroup label="東京都">
	<option value="sibuya">渋谷区</option>
	<option value="sinjuku">新宿区</option>
	<option value="nakano">中野区</option>
</optgroup>
<optgroup label="神奈川県">
	<option value="kouhoku">港北区</option>
	<option value="nisi">西区</option>
	<option value="minami">南区</option>
</optgroup>
</select>

<select size="★">

リストボックスを表示。<select></select>内に<option></option>を記述することで表示させる。

リストボックス｜Sample

<select name="todouhuken" size="4" multiple="multiple">
<option value="hokaido">北海道</option>
<option value="tokyo">東京都</option>
<option value="kanagawa">神奈川県</option>
<option value="hukuoka">福岡県</option>
</select>