フォームをデザインする
フォームの基本形
- 基準となる基本をつくりカスタマイズしていく
ソースコード【 HTML 】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>フォームとテーブルでマークアップする</title> <style type="text/css"> body { font-size: 75%; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", sans-serif; line-height: 1.5; color: #333; background-color: #FFF; } </style> </head> <body> <form action="#" method="post" id="inquiry"> <table border="border"> <tr> <td>お名前<em>(必須)</em></td> <td><input type="text" name="name" size="30"></td> </tr> <tr> <td>郵便番号</td> <td> <input type="text" name="postcode1" size="3" maxlength="3"> - <input type="text" name="postcode2" size="4" maxlength="4"> </td> </tr> <tr> <td>都道府県</td> <td> <select name="prefecture"> <option value="" selected="selected">選択してください</option> <optgroup label="北海道・東北地方"> <option value="北海道">北海道</option> <option value="青森県">青森県</option> <option value="岩手県">岩手県</option> <option value="宮城県">宮城県</option> <option value="秋田県">秋田県</option> <option value="山形県">山形県</option> <option value="福島県">福島県</option> </optgroup> <optgroup label="関東地方"> <option value="茨城県">茨城県</option> <option value="栃木県">栃木県</option> <option value="群馬県">群馬県</option> <option value="埼玉県">埼玉県</option> <option value="千葉県">千葉県</option> <option value="東京都">東京都</option> <option value="神奈川県">神奈川県</option> </optgroup> <optgroup label="中部地方"> <option value="新潟県">新潟県</option> <option value="富山県">富山県</option> <option value="石川県">石川県</option> <option value="福井県">福井県</option> <option value="山梨県">山梨県</option> <option value="長野県">長野県</option> <option value="岐阜県">岐阜県</option> <option value="静岡県">静岡県</option> <option value="愛知県">愛知県</option> </optgroup> <optgroup label="近畿地方"> <option value="三重県">三重県</option> <option value="滋賀県">滋賀県</option> <option value="京都府">京都府</option> <option value="大阪府">大阪府</option> <option value="兵庫県">兵庫県</option> <option value="奈良県">奈良県</option> <option value="和歌山県">和歌山県</option> </optgroup> <optgroup label="中国地方"> <option value="鳥取県">鳥取県</option> <option value="島根県">島根県</option> <option value="岡山県">岡山県</option> <option value="広島県">広島県</option> <option value="山口県">山口県</option> </optgroup> <optgroup label="四国地方"> <option value="徳島県">徳島県</option> <option value="香川県">香川県</option> <option value="愛媛県">愛媛県</option> <option value="高知県">高知県</option> </optgroup> <optgroup label="九州地方"> <option value="福岡県">福岡県</option> <option value="佐賀県">佐賀県</option> <option value="長崎県">長崎県</option> <option value="熊本県">熊本県</option> <option value="大分県">大分県</option> <option value="宮崎県">宮崎県</option> <option value="鹿児島県">鹿児島県</option> <option value="沖縄県">沖縄県</option> </optgroup> <option value="日本国外">日本国外</option> </select> </td> </tr> <tr> <td>市区町村・番地</td> <td><input type="text" name="address1" size="30"></td> </tr> <tr> <td>アパート・マンション名</td> <td><input type="text" name="address2" size="30"></td> </tr> <tr> <td>E-Mailアドレス<em>(必須)</em></td> <td><input type="text" name="email" size="30"></td> </tr> <tr> <td>お問い合わせの種類<em>(必須)</em></td> <td> <input name="category" type="radio" value="このサイトについてのお問い合わせ"> このサイトについてのお問い合わせ <br> <input name="category" type="radio" value="弊社の業務内容についてのお問い合わせ"> 弊社の業務内容についてのお問い合わせ <br> <input name="category" type="radio" value="その他のお問い合わせ"> その他のお問い合わせ </td> </tr> <tr> <td>お問い合わせ内容<em>(必須)</em></td> <td><textarea name="content" cols="30" rows="15"></textarea></td> </tr> </table> <div><input type="submit" value="確認画面へ"></div> </form> </body> </html>
ブラウザで表示