[参考記事] フォームの基本
テキスト
文字を送るときに使います。
type属性を省略した場合もこれになります。
改行は使えないので、改行を含む場合にはテキストエリアを使う必要があります。
パスワード
パスワードを入力する時に使います。
入力した文字が『＊(アスタリスク)』や『・(中黒)』などになります。
画面上に入力した文字が表示されないので、「ショルダーハック(キー入力や画面を盗み見る原始的なハッキング手法)」に効果があります。
ただ画面上は隠せても送られるデータは盗聴される可能性があるのでSSL暗号方式などを併用するといいでしょう。
ユーザー登録などでパスワード入力画面の次に確認画面がある場合、隠しデータとして値が継承されるフォームもありますが、あまりよくはないです。
一旦、『パスワード情報をデータベースに書き込んでそのIDを隠しデータとする』
または『テキストファイルに書き込んでファイル名を隠しデータとする』という手法がよいかと思います。
PHPのSessionは、２窓ができないのでオススメしません。
テキスト入力タグとは表示の大きさが違うので、デザインする際には注意が必要です。
ファイル
ファイルを送信する際に使います。
このフォームを使うときにはFORMタグにenctype="multipart/form-data"が必要です。
FORMタグ内でのファイル容量制限は隠しデータにMAX_FILE_SIZEとして指定する方法もあります。
[参考記事] PHPでの使用例
ただしフォームは改ざんされる可能性もありますし、PHPのバージョンによっては対応していないので、
ちゃんとスクリプト内でも容量制限をして２重チェックはしたほうがいいです。
またMAX_FILE_SIZEの隠しデータは、ファイルフォームより前に書く必要があります。
まとめるとこんな感じです。
<input type="hidden" name="MAX_FILE_SIZE" value="3000" />
<input type="file" name="form3" value="" />
………
…
………
</form>
<input type="checkbox" name="form4_1" value="1" />
『はい・いいえ』を送信するときに使います。
文字をクリックしてもcheckboxタグが反応するようにするには、LABELタグを使います。
<input type="checkbox" name="form4_1" value="1" id="form41" /><label for="form41">チェックボックス２</label>
[参考記事] ユーザビリティを考えたフォーム
文字にマウスを合わせたときに指マークにするとより分かりやすいです。
下記がそのスタイルシート
cursor: pointer;
}
<input type="radio" name="form5" value="2" />
文字をクリックしてもcheckboxタグが反応するようにするには、LABELタグを使います。
<input type="radio" name="form5" value="2" id="form52" /><label for="form52">ラジオボタン２</label>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<optgroup label="1桁">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</optgroup>
<optgroup label="2桁">
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</optgroup>
</select>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
| WinIE | MacIE | その他 |
|---|---|---|
| タグ表示内容 | なし | value |
JavaScriptを使わないと、どのボタンが押されたかの特定はできません。
指マークがつくようにしたほうが分かりやすいです。
cursor: pointer;
}
個別に指定する場合は下記をタグ内に書きます。
<input type="submit" value="送信" style="cursor: pointer;" />
クラスで指定する場合は次のようになります。
cursor: pointer;
}
</form>
</form>
検索キーワードタグ
フォームグループタグ・グループタイトルタグ
<legend>お届け先</legend>
</fieldset>
<fieldset>
<legend>送り元</legend>
</fieldset>
フォームを送信した後に再読み込み（リロード）すると、フォームのPOST内容が再送信されるのが普通ですが、MacIEは再送信されません。
