표준 입력 폼(html + css)
css
/* 데모신청 입력 폼 시작 */
.demoApplicationForm
{
width: 600px;
margin: 0 auto;
border: none;
padding: 10px 3px 10px 3px;
}
.demoApplicationForm legend
{
font-weight: bold;
}
.demoApplicationForm .item
{
background-color: rgba(240, 240, 240, 0.5);
}
.demoApplicationForm .item label
{
display:inline-table;
width: 150px;
padding: 10px 0 10px 10px;
background-color: rgba(188, 233, 246, 0.5);
margin-left: 2px;
}
.demoApplicationForm hr
{
margin: 0px;
border: thin solid white;
}
.demoApplicationForm textarea
{
vertical-align:middle;
margin-top: 5px;
margin-bottom: 5px;
}
.largeTextBox
{
width: 330px;
}
.meddleTextBox
{
width: 190px;
}
.shortTextBox
{
width: 50px;
}
/* 데모신청 입력 폼 끝 */
html
<fieldset class="demoApplicationForm">
<legend>신청자 정보</legend>
<div class="item">
<label for="name" accesskey="N">신청자 이름(N)</label>
<input type="text" id="name" name="name" />
</div>
<hr />
<div class="item">
<label for="phoneNumber1" accesskey="P">전화번호(P)</label>
<input type="text" id="phoneNumber1" name="phoneNumber1" class="shortTextBox" />
-
<input type="text" id="phoneNumber2" name="phoneNumber2" class="shortTextBox" />
-
<input type="text" id="phoneNumber3" name="phoneNumber3" class="shortTextBox" />
</div>
<hr />
<div class="item">
<label for="dateIsMonth" accesskey="H">데모시연 희망 일자(H)</label>
<input type="text" id="dateIsMonth" name="dateIsMonth" class="shortTextBox" />월
<input type="text" id="dateIsDay" name="dateIsDay" class="shortTextBox" />일
</div>
<hr />
<div class="item">
<label for="address" accesskey="A">주소(A)</label>
<input type="text" id="address" name="address" class="meddleTextBox" />
</div>
<hr />
<div class="item">
<label for="addressDetail">상세 주소</label>
<input type="text" id="addressDetail" name="addressDetail" class="largeTextBox" />
</div>
<hr />
<div class="item">
<label for="userMemo" accesskey="M">기타 의견(M)</label>
<textarea id="userMemo" name="userMemo" cols="44" rows="3"></textarea>
</div>
</fieldset>
<div style="width:100px; margin:0 auto; margin-top:10px; margin-bottom:10px;">
<span style="background-color:#00a0b1; border:1px solid rgba(0,0,0,0.5); color:White; width:100px; height:25px; display:table-cell; vertical-align:middle; text-align:center; font-weight:bold">신청서 제출</span>
</div>