フォーム要素の簡単リスト|HTMLタグ

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

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

フォームの基本構成

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

プルダウンメニュー

フォームの基本構成

<form>

属性
  • action="★"(データの送信先URL)
  • method="★"(送信内容の指定)
  • enctype="★"(送信のMIMEタイプ)
  • target="★"(実行結果後のページ表示方法)
  • name="★"(変数名)
  • accept="★"(MIMEタイプ)
  • accept-charset="★"(文字コード)

フォームを作成する。この<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>

  • name="★"(エリアの名前)
  • cols="★"(1行の文字数)
  • roes="★"(行数)
  • readonly="★"(入力禁止)
  • disable="★"(入力禁止/選択不能)

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"

  • value="★"(送信される内容)
  • name="★"(ボタンの名前)
  • checked(チェックがつけられた状態で表示/HTML記述)
  • checked=”checked”(チェックがつけられた状態で表示/HTML記述)

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

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"

  • value="★"(送信される内容)
  • name="★"(ボタンの名前)
  • checked(チェックがつけられた状態で表示/HTML記述)
  • checked=”checked”(チェックがつけられた状態で表示/HTML記述)

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

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"

  • value="★"(ボタンに表示させるテキスト)
  • name="★"(ボタンの名前)

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

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"

  • value="★"(ボタンに表示する文字)
  • name="★"(ボタンの名前)

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

XHTMLでは />で閉じる。

ボタン|Sample


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

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

type="reset"

  • value="★"(ボタンに表示させるテキスト)
  • name="★"(ボタンの名前)

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

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"

  • src="★"(イメージURL)
  • name="★"(ボタンの名前)
  • alt="★"(代替テキスト)

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

XHTMLでは />で閉じる。

カスタム画像ボタン|Sample


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

type="file"

  • name="★"(ボタンの名前)
  • size="★"(入力フィールドの幅)
  • maxlength="★"(最大文字数)

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

XHTMLでは />で閉じる。

カスタム画像ボタン|Sample


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

type="hidden"

  • name="★"(ボタンの名前)
  • value="★"(送信テイスト)

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

XHTMLでは />で閉じる。

カスタム画像ボタン|Sample

↓ここにフォームが隠されています。


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

プルダウンメニュー

<select>

  • name="★"(エリアの名前)
  • value="★"(送信されるテキスト)
  • selected=”selected”(初期状態での選択を指定)

プルダウン式のメニューを表示。<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="★">

  • 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="★">

  • size="★"(ボックスの行数)
  • multiple="★"(複数選択の許可)
  • name="★"(エリアの名前)
  • value="★"(送信されるテキスト)
  • selected="★"(初期状態での選択を指定)

リストボックスを表示。<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>