<form>
<h1>CONTACT</h1>
<div>
<label><span>必須</span>名前</label>
<input type="text" class="text" size="45" value="" />
</div>
<div>
<label><span>必須</span>メールアドレス</label>
<input type="text" class="text" size="45" value="" />
</div>
<div>
<label>セレクトメニュー</label>
<select class="dropdown" >
<option>選択して下さい</option>
<option>さつまいも</option>
<option>くり</option>
<option>かぼちゃ</option>
</select>
</div>
<div>
<label>コメント</label>
<textarea cols="60" rows="5" name="comments" id="comments"></textarea>
</div>
<div>
<input type="submit" class="submit" value="送信する" />
</div>
</form>
form {
background:#F5F5F5;
width:700px;
padding:20px 40px;
}
form div {
padding: 10px 20px;
}
h1 {
text-align:center;
font-size:30px;
}
input.submit {
display:block;
margin:0 200px;
}
label {
display:block;
float:left;
width:200px;
}
span {
background:#000;
padding:4px 4px;
font-size:12px;
color:#fff;
margin-right:10px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.