CSS를 이용한 단순한 폼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> New Document </title>
<style>
fieldset {
margin: 1em 0;
padding: 1em;
border: 1px solid #ccc;
background: #f8f8f8;
}
legend {
font-weight: bold;
}
label {
display: block
}
input {
width: 200px;
}
textarea {
width: 300px;
height: 100px;
}
input.radio, input.chekbox, input.submit {
width: auto;
}
input.radio {
float: left;
margin-right: 0.5em;
}
input:focus, textarea:focus {
background: #ffc;
}
.required {
font-size: 0.75em;
color: #red;
}
</style>
</head>
<body>
<fieldset>
<legend> 개인 연락처 정보 </legend>
<p>
<label for="author">이름:<em class="required">(필수입력항목)</em></label>
<input name="author" id="author" type="text" />
</p>
<p>
<label for="email">이메일 주소:</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="url">홈페이지 주소:</label>
<input name="url" id="url" type="text" />
</p>
</fieldset>
<fieldset>
<legend> 댓글 </legend>
<p>
<label for="text">본문 : </label>
<textarea name="text" id="text" cols="20" rows="10">
</textarea>
</p>
</fieldset>
<fieldset>
<legend>개인정보 기록</legend>
<p>
<input id="remember-yes" class="radio" name="remember" type="radio" value="yes" />
<label for="remember-yes"> 기억함 </label>
</p>
<p>
<input id="remember-no" class="radio" name="remember" type="radio"value="no" checked="checked"/>
<label for="remember-no">기억하지 않음</label>
</p>
</fieldset>
</body>
</html>