6/25(水) 授業メモ
今日の授業で、問合せフォームの作成確認をしました。
先生が作成で使用していたタグの意味をメモしました。
<th scope="col">見出しセル</th>
scope属性を指定すると、そのセルがどちらの方向に対する見出しであるかを明示することができます。
値
row … そのセルが、横列に対する見出しであることを示します。
col … そのセルが、縦列に対する見出しであることを示します。
rowgroup … そのセルが、行グループ(thead、tfoot、tbody)に対する見出しであることを示します。
colgroup … そのセルが、列グループ(colgroup)に対する見出しであることを示します。
<EM>タグはEmphasisの略で、テキストを強調する際に使用します。
<LABEL>タグはフォームの構成部品(一行テキストボックス・チェックボックス・ラジオボタン等)と、 その項目名(ラベル)を明確に関連付けるための要素です。これによりチェックボックスやラジオボタンでは、関連付けられたテキスト部分をクリックしてもチェックを付けることができるようになります。
<LABEL>タグの使用方法は2通りあります。 1つは<LABEL>タグのfor属性の値と、フォーム部品のid属性の値を同じものにすることで両者を関連付ける方法です。 もう1つは<LABEL>~</LABEL>内にフォーム部品とテキストを含める方法です。後者の方法は、Internet Explorer5や6には対応していないようなので、できるだけ前者を用いた方が良いでしょう。
<OPTGROUP>は、セレクトボックスの選択肢(<OPTION>~<OPTION>)をグループ化するタグです。
<OPTGROUP>タグに対応したブラウザでは、セレクトボックスの選択肢が階層化されて表示されます。<OPTGROUP>のlabel属性の値が第一階層となり、 <OPTGROUP>~</OPTGROUP>内にある <OPTION>のlabel属性の値がその下の階層となります。
参照サイト:HTMLクイックリファレンス
私が記述したHTML
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォーム確認テスト</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<table border="1">
<tr class="indispensable"><th>お名前<span>(必須)</span></th><td><input type="text" name="name" size="22" placeholder="東京太郎" autofocus required></td></tr>
<tr><th>郵便番号</th><td><input name="zip" id="zip" size="6" placeholder="123">-<input name="zip1" id="zip1" size="8" placeholder="4567"></td></tr>
<tr><th>都道府県</th>
<td><select name="Prefectural">
<option value="" selected>選択して下さい
<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>
<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>
<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>
<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>
<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>
<option value="鹿児島県">鹿児島県</option>
<option value="沖縄県">沖縄県</option>
</select>
</select></td></tr>
<tr><th>市町村・番地</th><td><input type="text" name="Address" id="Address" size="56" placeholder="例)品川区南大井1-2-3" required></td></tr>
<tr><th>アパート・マンション名</th><td><input type="text" name="" id="" size="56" ></td></tr>
<tr class="indispensable"><th>E-Mailアドレス<span>(必須)</span></th><td><input type="email" name="email" id="email" size="56" requied></td></tr>
<tr class="indispensable"><th>お問い合わせの種類<span>(必須)</span></th><td><input type="radio" name="inquiry_type" id="inquiry_type">このサイトについての問い合わせ<br>
<input type="radio" name="inquiry_type" id="inquiry_type">弊社の業務内容についてのお問い合わせ<br>
<input type="radio" name="inquiry_type" id="inquiry_type">その他のお問い合わせ</td></tr>
<tr class="indispensable"><th>お問い合わせ内容<span>(必須)</span></th><td><textarea name="note" id="note" cols="50" rows="20"></textarea></td></tr>
</table>
<input type="submit" value="確認画面へ">
</div><!-- /#container -->
</body>
</html>
style.css
@charset "utf-8";
/* reset */
html, body, div, table, tr, th, td {
margin: 0;
padding:0;
}
/* layout */
#container {
margin: 50px;
}
table {
margin-bottom: 10px;
border-collapse: collapse;
border-left: solid 5px gray;
}
th {
background-color:lightgray;
width: 250px;
}
th span {
color: red;
}
.indispensable {
border-left: solid 5px red;
}
td {
width: 380px;
background-color: aliceblue;
}
<span>を<em>に変更して使おうと思いました。
<LABEL>と<OPTGROUP>はとても使えるな〜と思いました。
先生記述例
index.html
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>フォームのスタイルを設定する</title> <linkrel="stylesheet"href="css/style.css"> </head> <body> <formaction="check.php"method="post"id="inquiry"> <table> <tr> <thscope="row"class="must"><labelfor="name">お名前<em>(必須)</em></label></th> <td><inputtype="text"name="name"id="name"size="30"class="text1" placeholder="例:鈴木一郎" autofocus required></td> </tr> <tr> <thscope="row"><labelfor="postcode1">郵便番号</label></th> <td> <inputtype="text"name="postcode1"id="postcode1"size="3"maxlength="3"class="text2" placeholder="123"> - <inputtype="text"name="postcode2"id="postcode2"size="4"maxlength="4"class="text2" placeholder="4567"> </td> </tr> <tr> <thscope="row"><labelfor="prefecture">都道府県</label></th> <td> <selectname="prefecture"id="prefecture"> <optionvalue=""selected="selected">選択してください</option> <optgrouplabel="北海道・東北地方"> <optionvalue="北海道">北海道</option> <optionvalue="青森県">青森県</option> <optionvalue="岩手県">岩手県</option> <optionvalue="宮城県">宮城県</option> <optionvalue="秋田県">秋田県</option> <optionvalue="山形県">山形県</option> <optionvalue="福島県">福島県</option> </optgroup> <optgrouplabel="関東地方"> <optionvalue="茨城県">茨城県</option> <optionvalue="栃木県">栃木県</option> <optionvalue="群馬県">群馬県</option> <optionvalue="埼玉県">埼玉県</option> <optionvalue="千葉県">千葉県</option> <optionvalue="東京都">東京都</option> <optionvalue="神奈川県">神奈川県</option> </optgroup> <optgrouplabel="中部地方"> <optionvalue="新潟県">新潟県</option> <optionvalue="富山県">富山県</option> <optionvalue="石川県">石川県</option> <optionvalue="福井県">福井県</option> <optionvalue="山梨県">山梨県</option> <optionvalue="長野県">長野県</option> <optionvalue="岐阜県">岐阜県</option> <optionvalue="静岡県">静岡県</option> <optionvalue="愛知県">愛知県</option> </optgroup> <optgrouplabel="近畿地方"> <optionvalue="三重県">三重県</option> <optionvalue="滋賀県">滋賀県</option> <optionvalue="京都府">京都府</option> <optionvalue="大阪府">大阪府</option> <optionvalue="兵庫県">兵庫県</option> <optionvalue="奈良県">奈良県</option> <optionvalue="和歌山県">和歌山県</option> </optgroup> <optgrouplabel="中国地方"> <optionvalue="鳥取県">鳥取県</option> <optionvalue="島根県">島根県</option> <optionvalue="岡山県">岡山県</option> <optionvalue="広島県">広島県</option> <optionvalue="山口県">山口県</option> </optgroup> <optgrouplabel="四国地方"> <optionvalue="徳島県">徳島県</option> <optionvalue="香川県">香川県</option> <optionvalue="愛媛県">愛媛県</option> <optionvalue="高知県">高知県</option> </optgroup> <optgrouplabel="九州地方"> <optionvalue="福岡県">福岡県</option> <optionvalue="佐賀県">佐賀県</option> <optionvalue="長崎県">長崎県</option> <optionvalue="熊本県">熊本県</option> <optionvalue="大分県">大分県</option> <optionvalue="宮崎県">宮崎県</option> <optionvalue="鹿児島県">鹿児島県</option> <optionvalue="沖縄県">沖縄県</option> </optgroup> <optionvalue="日本国外">日本国外</option> </select> </td> </tr> <tr> <thscope="row"><labelfor="address1">市区町村・番地</label></th> <td><inputtype="text"name="address1"id="address1"size="56"class="text3" placeholder="例:豊島区池袋南池袋3-7-9"></td> </tr> <tr> <thscope="row"><labelfor="address2">アパート・マンション名</label></th> <td><inputtype="text"name="address2"id="address2"size="56"class="text3" placeholder="例:スカイマンション101号"></td> </tr> <tr> <thscope="row"class="must"><labelfor="email">E-Mailアドレス<em>(必須)</em></label></th> <td><inputtype="email"name="email"id="email"size="56"class="text3" placeholder="例:xxx@xxx.com" required></td> </tr> <tr> <tr> <thscope="row"class="must">お問い合わせの種類<em>(必須)</em></th> <td> <inputname="category"id="category1"type="radio"value="このサイトについてのお問い合わせ" required> <labelfor="category1">このサイトについてのお問い合わせ</label><br> <inputname="category"id="category2"type="radio"value="弊社の業務内容についてのお問い合わせ"> <labelfor="category2">弊社の業務内容についてのお問い合わせ</label><br> <inputname="category"id="category3"type="radio"value="その他のお問い合わせ"> <labelfor="category3">その他のお問い合わせ</label> </td> </tr> <tr> <thscope="row"class="must"><labelfor="content">お問い合わせ内容<em>(必須)</em></label></th> <td><textareaname="content"id="content"cols="40"rows="15"class="text4" placeholder="お問い合わせ内容を入力してください。" required></textarea></td> </tr> </table> <divclass="submit"><inputtype="submit"value="確認画面へ"></div> </table> </form> </body> </html>
style.css
@charset "UTF-8"; /* reset */ html, body, div, table, tr, th, td, form { margin: 0; padding: 0; line-height: 1.0; } a { text-decoration: none; } table { border: none; border-collapse: collapse; } /* body */ body { font-size: 14px; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; line-height: 1.5; color: #333; background-color: #FFF; } /* table */ #inquiry { width: 600px; margin: 50px auto; } #inquiry table { border-top: 1px solid #CCC; border-right: 1px solid #CCC; font-size: 100%; width: 100%; } #inquiry td { border-top: none; border-bottom: 1px solid #CCC; border-left: none; border-right: none; padding: 10px; } #inquiry th { border-top: none; border-bottom: 1px solid #CCC; border-left: 6px solid #CCC; border-right: none; background-color: #F3F3F3; font-weight: normal; padding: 10px; width: 200px; } #inquiry th.must { border-left-color: #D90000; } #inquiry th em { font-style: normal; color: #FF0000; padding-left: 5px; } .text1,.text2,.text3,.text4 { border: 1px solid #CCC; background-color: #F3F3F3; padding: 2px; } .text1 { width: 100px; } .text2 { width: 4em; } .text3 { width: 98%; } .text4 { width: 98%; } #inquiry select { border: 1px solid #CCC; background-color: #F3F3F3; } #inquiry .submit { text-align: center; margin-top: 30px; }