こちらではデザイン的なものではなく、管理画面内で最も多用するフォームの構成と要素・属性とその例を紹介します。初めてフォームを書く方にもわかるように書きました。
⇒フォームの基本となる部品はこちら
nameなどは、プログラマの方が後から追加記述する場合が多いのですが、HTMLコーディングの時点で入れておくと、後の作業の効率があがります。
が、しかし、やりすぎは厳禁です。余計な記述は後の作業に差し支える場合があります。プロジェクトを進める際、プログラマとどこまで記述するか打ち合わせをしておくといいでしょう。
私は、特に指示がない場合は、Dreamweaverデフォルトで入るnameをそのまま入れておきます（例： name="textfield2"）。
name=""と、空を入れておくのもいいのですが、空だと上書きする際に、書き直す部分をダブルクリックすることができないので、コピペに若干手間取ります。
しかし、このあたりは好みです。空を入れておくほうが、記述抜けがないか検索してチェックするのが楽というメリットもあります（空タグを検索すればいいので）。
結果、プログラマと相談しておくのがベストです（どっちでもいいよといってくれる方が多いのですが、空と空でないものに双方こんなメリット・デメリットがあるよと説明して、効率アップのためにもキッチリいきましょう。）
※属性：action・inputなど 要素：action・inputなどの以下のtext・select・actionなど
| <form>の属性 |
表示サンプル |
ソース |
備考 |
| action |
|
例1：<form method="get" action="aaa.cgi">
例2：<form method="get" action="/~kanri-gamen/index.html"> |
<form>で送信したデータを処理するファイルを指定します。
HTMLファイルを指定し、HTMLだけで動作確認することもできます（但しサーバー上ではgetでしか動きません、ローカルではpostでも動きます。サンプルはgetになっています）。⇒HTMLのみでの動作確認例 |
| method |
|
例1：<form action="/~kanri-gamen/index.html" method="get">
例2：<form action="/~kanri-gamen/index.html" method="post"> |
<form>データの送信方法の指定します。
get：URLに送信するデータがくっついた状態で送信されます。送信するURLの字数制限がある＋送信データが生で見れてしまいます。検索などの常に一定の結果を伴うものはget、新しいデータの送信・登録はpostというのが原則です。
ちなみにMacのローカルでHTMLの動作確認をする場合、getにしないと、指定したHTMLファイルへ移動することができません。
post：フォームデータのみ送信します。URLには処理する（HTMLファイルの場合は移動先の）ファイル名のみ表示されます。左記のボタンは正しく移動しませんが、URLのみ参考にごらんください。 |
| name |
|
例1：<form action="/~kanri-gamen/index.html" method="get" name="aaa" > |
不要です。オーサリングソフトで自動で入った場合、削除しておきましょう。但し、プログラマから指示があった場合は、記述しますが・・・、おそらく「不要」といわれるでしょう。 |
| target |
|
例1：<form method="POST" action="example01c.html" target="bottom">
コメント ：<input type="text" name="name" size="50">
<input type="submit" value="送信する">
</form> |
送信後表示される画面のターゲットを指定します。⇒サンプル |
| <select>の属性 |
表示サンプル |
ソース |
備考 |
| name |
|
例1：<select name="sample_select">
<option>1</option>
<option>2</option>
</select> |
入力フィールドに入力・選択されたデータと共に<form>で指定したプログラムに送信されます。<input>のnameと同様の扱いです。 |
| size |
|
例1：<select name="select" size="5">
<option>1</option>
<option>2</option>
</select> |
行数指定をします。行数指定することで、自動的にプルダウンメニューではなくなります。また、行数より選択肢が多い場合は左にスクロールバーが表示されます。 |
| multiple |
|
例1：<select name="select" size="5" multiple>
<option>1</option>
<option>2</option>
</select> |
複数選択できるようになります（Windows の場合、Ctrl キーや Shift キーを押しながらマウスでクリック）。 |
| optgroup |
|
例1：<select name="aaa">
<optgroup label="グループ1" class="optgroup_color">
<option label="あああ" value="aaa">あああ</option>
<option label="いいい" value="iii">いいい</option>
<option label="ううう" value="uuu">ううう</option>
</optgroup>
<optgroup label="グループ2">
<option label="かかか" value="kakaka">かかか</option>
<option label="ききき" value="kikiki">ききき</option>
</optgroup>
</select> |
セレクトボックスの選択肢（<option>〜<option>）をグループ化します。グループの見出しは選択できません。また、グループごとにCSSを適用することも可能です。 |
| <option>の属性 |
表示サンプル |
ソース |
備考 |
| selected |
|
例1：<select name="select6" size="5" multiple>
<option>1</option>
<option selected>2</option>
<option selected>3</option>
</select> |
selectに使用します。デフォルトで選択する項目を指定します。 |
| value |
|
例1：<select name="select7">
<option value="aaa">1</option>
<option value="bbb">2</option>
<option value="ccc">3</option>
</select> |
selectに使用します。この項目が選択された場合、このデータと共に<form>で指定したプログラムに送信されます。 |
| <textarea>の属性 |
表示サンプル |
ソース |
備考 |
| name |
|
例1：<textarea name="aaa" cols="10" rows="5"></textarea> |
入力フィールドに入力・選択されたデータと共に<form>で指定したプログラムに送信されます。<input>のnameと同様の扱いです。 |
| cols・rows |
|
例1：<textarea name="textfield7" cols="10" rows="5"></textarea> |
入力フィールドの幅と行数をそれぞれ設定します。入力文字制限をかけるのではありません。 |
| wrap |
off：
virtual：
physical：
|
off：<textarea name="textarea" cols="10" rows="5" wrap="off"></textarea>
virtual：<textarea name="textarea2" cols="10" rows="5" wrap="virtual"></textarea>
physical：<textarea name="textarea3" cols="10" rows="5" wrap="physical"></textarea> |
テキストエリア内に記入したテキストの折り返し設定をします。
off：オフ。一切折り返しません。横スクロールがでます。
virtual：仮想。テキストエリアの幅に合わせて自動的に折り返しされます。フォームを送信した際、この改行情報も送信されます。
physical：物理的。テキストエリアの幅に合わせて自動的に折り返しされます。フォームを送信した際、この改行情報は送信されません。あくまで見た目的に折り返しされているようになっているだけです。この設定が一番多いのではないかと思います。 |
フォームの構成と要素・属性 
