표준 입력 폼(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" />

                                        &nbsp;-&nbsp;

                                        <input type="text" id="phoneNumber2" name="phoneNumber2" class="shortTextBox" />

                                        &nbsp;-&nbsp;

                                        <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" />월

                                        &nbsp;&nbsp;

                                        <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>