DoIt - 상품 주문서

<style>
ul {
    list-style:none;
}

ul li {
    margin-bottom:10px;
}

label.subt {
    font-weight:bold;
    width:80px;
    float:left;
}

.centered {
    text-align:center;
}

fieldset {
    margin:15px 10px;
}

fieldset legend {
    font-weight:bold;
    font-size:18px;
    color:purple;
}
</style>

<h1>상품 주문서</h1>

<fieldset>
    <legend>개인정보</legend>
    <ul>
        <li><label for="uname" class="subt">이름</label>
            <input type="text" id="uname" placeholder="여백없이 입력" required></li>
        <li><label for="tel" class="subt">연락처</label>
            <input type="tel" id="tel1" placeholder="연락 가능한 번호" required></li>
    </ul>
</fieldset>

<fieldset>
    <legend>배송지 정보</legend>
    <ul>
        <li><label for="addr" class="subt">주소</label>
            <input type="text" id="addr" size="40" max="60" required></li>
        <li><label for="tel2" class="subt">전화번호</label>
            <input type="tel" id="tel2" required></li>
        <li><label for="memo" class="subt">메모</label>
            <textarea id="memo" cols="40" rows="3"></textarea></li>
    </ul>
</fieldset>

<fieldset>
    <legend>주문 정보</legend>
    <ul>
        <li><label><input type="checkbox">과테말라 안티구아 (100g)
            <input type="number" value="0" min="0" max="5">개</label></li>
        <li><label><input type="checkbox">인도네시아 만델링 (100g)
            <input type="number" value="0" min="0" max="5">개</label></li>
        <li><label><input type="checkbox">자체 블렌딩 (그커피 탐라도다)
            <input type="number" value="0" min="0" max="5">개</label></li>
    </ul>
</fieldset>

<div class="centered">
    <input type="submit" value="주문하기">
    <input type="reset" value="다시 작성">
</div>