【CSS】フォームのおさらい
Flash（実務経験なし）が全然イケてないので、
昨日のフォームのおさらいで記事をかせぐ手段に出る。
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html lang="ja"> <head> <meta charset=UTF-8"> <title>【CSS】form_sample</title> <style type="text/css"> #container { width:800px; height:auto; background-color: #3c9; margin: 0; padding: 0; position: absolute; } #header { width:780px; height: 100px; margin: 10px 10px 0 10px; position: relative; background-color: #fcc; } #header-inner { margin-right: 10px; position: absolute; text-align:right; top: 20px; right: 20px; } #header-inner li { display:inline; text-decoration: none; list-style-type:none; } #content { float: right; width: 540px; margin: 10px 10px 10px 0; background-color: #FFFF99; } #content h1 { margin-left: 10px; font-size: 1.8em; color: #3300FF; text-decoration: none; } #form { margin-left: 10px; } #myform label { margin-bottom: 3px; display: block; } p.sub { text-align: center; } </style> </head> <body> <div id="container"> <div id="header"> <div id="header-inner"> <ul> <li><a href="#">このサイトについて</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#">サイトマップ</a></li> </ul> </div> </div> <div id="content"> <h1>お問い合わせ</h1> <div id="form"> <form action="#" method="post" id="myform"> <p><label for="user">名前</label> <input type="text" id="user" name="username"></p> <p><label for="mail">メールアドレス</label> <input type="text" id="mail" name="mailaddress"></p> <p><label for="com" >コメント</label> <textarea id="com" name="comment" cols="40" rows="8"></textarea></p> <p>スマートフォン： <label><input type="checkbox" name="mobile" value="1" checked>iPhone</label> <label><input type="checkbox" name="mobile" value="2">Android</label> <label><input type="checkbox" name="mobile" value="3">その他</label> </p> <p>性別： <label><input type="radio" name="sex" value="male" id="male" checked>男性</label> <label><input type="radio" name="sex" value="female" id="female">女性</label> </p> <p>言語： <select name="language"> <option value="" selected>以下の言語を選択してください</option> <option value="1">日本語</option> <option value="2">英語</option> <option value="3">フランス語</option> <option value="4">スペイン語</option> <option value="5">韓国語</option> </select> </p> <p class="sub"><input type="submit" value="送信" id="submit"></p> </form> </div> </div> </div> </body> </html>
