WEB.CSS

chapter37 : form_test3

GAWON 2023. 5. 19. 09:14 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">

body {
background-color: #C0C0C0;
}

.container {
width: 500px;
margin: 0 auto;
}

h1 {
text-align: center;
text-shadow: 2px 2px gray;
color: green;
}

ul {
list-style-type: none;
}

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

div.centered {
text-align: center;
}

fieldset {
margin: 15px 10px;
}

.a1 {
font-weight: bold;
font-size: 15px;
color: red;
text-shadow: 1px 1px gray;
}

ul li {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="d1">
<div class="container">
<h1>상품 주문서</h1>
<form action="#">
<a class="a1">개인 정보</a>
<fieldset>
<ul>
<li>
<label for="uname" class="title">이름</label>
<input type="text" id="uname" placeholder="필수" size="40" required>
</li>
<li>
<label for="tel1" class="title">연락처</label>
<input type="tel" id="tel1" placeholder="필수" size="40">
</li>
<li>
<label for="tel1" class="title">주소</label>
<input type="tel" id="tel1" placeholder="필수" size="40">
</li>
</ul>
</fieldset>

```
     <a class="a1">배송지 정보</a>
     <br>
     <input type="checkbox">주문자 정보와 같음
     <fieldset>
        <ul>
           <li>
              <label for="text" class="title">이름</label>
              <input type="text" size="40" id="addr" required>
           </li>
           <li>
              <label for="addr" class="title">연락처</label>
              <input type="text" size="40" id="addr" required>
           </li>
           <li>
              <label for="tel2" class="title">주소</label>
              <input type="text" size="40" id="addr" required>
           </li>
           <li>
              <label for="comment" class="title">메모</label>
              <textarea cols="43" rows="3" id="comment" placeholder="경비실에 맡겨주세요. 2층에 맡겨주세요."></textarea>
           </li>
        </ul>
     </fieldset>
     <div class="centered">
        <input type="submit" value="주문하기">
        <input type="reset" value="다시 작성">
     </div>
  </form>

```

</div>
</div>
</body>
</html>