-----index.php----------------------------
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>PHP確認テスト(6/25)‐</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="content">
<h3>PHP確認テスト(6/25) ‐お問い合わせフォーム(フォームの形を整える)‐</h3>
<form action="check.php" method="post" id="mailform">
<table>
<tr class="small">
<th><label for="name">お名前 <span>(必須)</span></label></th>
<td><input type="text" name="name" id="name" placeholder="例：佐藤寛子" size="19" required></td>
</tr>
<tr>
<th><label for="postcode">郵便番号</label></th>
<td><input type="text" name="postcode1" id="postcode1" placeholder="123" size="4"> - <input type="text" name="postcode2" id="postcode2"
size="7"placeholder="4567"></td>
</tr>
<tr>
<th><label for="life">都道府県<br></label></th>
<td><select name="life">
<option value="" selected>選択してください</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>
</td>
</tr>
<tr>
<th><label for="name">市区町村・番地</label></th>
<td><input type="text" name="Cities" id="Cities" size="55"></td>
</tr>
<tr>
<th><label for="name">アパート・マンション名</label></th>
<td><input type="text" name="apartmentname" id="apartmentname" size="55"></td>
</tr>
<tr class="small">
<th><label for="email">E-mailアドレス <span>(必須)</span></span></label></th>
<td><input type="email" name="email" id="email" size="55" placeholder="例：sample@xxx.com" required></td>
</tr>
<tr class="small">
<th><label for="Kind">お問い合わせの種類 <span>(必須)</span></label><br></th>
<td id="must"><input type="radio" name="contact" id="contact1" value="このサイトについてのお問い合わせ"><label for="contact1">このサイトについてのお問い合わせ</label><br>
<input type="radio" name="contact" id="contact2" value="弊社の業務内容についてのお問い合わせ"><label for="contact2">弊社の業務内容についてのお問い合わせ</label><br>
<input type="radio" name="contact" id="contact3" value="その他のお問い合わせ"><label for="contact3">その他のお問い合わせ</label><br>
</td>
</tr>
<tr class="small">
<th><label for="message">お問い合わせ内容 <span>(必須)</span><br></label></th>
<td id="cont"><textarea type="message" name="message" rows="25" placeholder="お問い合わせ内容記入欄" cols="50" required></textarea></td>
</tr>
</table>
<p><input type="submit" value="確認画面へ" ></p>
</form>
</div>
</body>
</html>
-----style.css----------------------------
@charset "utf-8";
/* CSS Document */
/* reset */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {display:block;}
ul {
list-style: none;
}
img {
border: none;
}
a {
text-decoration: none;
}
/*lyout*/
#content{
width:700px;
margin:20px auto;
}
h3{
padding:10px;
}
table{
font-family:
Gothic ProN,
メイリオ,
sans-serif;
font-size:12px;
font-weight:bold;
border:1px solid #666;
border-collapse:collapse;
}
th,td{
border:1px solid #666;
border-collapse:collapse;
text-align:center;
}
.small th{
border-left:5px solid #F00;
}
th{
border-left:5px solid #CCC;
width:300px;
height:50px;
font-size:12px;
background:#F0F0F0;
}
th span{
color:#FF0000;
}
td{
padding-left:10px;
width:400px;
text-align:left;
}
#must{
padding:5px 0 5px 10px;
line-height:2.0;
}
#cont{
padding-top:10px;
}
p{
margin-top:10px;
text-align:center;
}