WEB.CSS

chapter33 : form

GAWON 2023. 5. 19. 09:12 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
td {
padding: 0 30px 0 0;
}

.td1 {
vertical-align : top;
}
</style>
</head>
<body>
<form action="#">
<h1>상품 주문서</h1>
<fieldset>
<legend>주문자 정보</legend>
<table>
<tr>
<td>이름</td>
<td><input type="text" placeholder="여백없이입력(필수)"></td>
</tr>
<tr>
<td>전화번호</td>
<td>
<select>
<option>지역번호</option>
<option>02</option>
<option>032</option>
<option>051</option>
</select>
<input type="text" placeholder="연락가능한번호">
</td>
</tr>
</table>
</fieldset>

```
  <fieldset>
     <legend>배송지 정보</legend>
     <table>
        <tr>
           <td>주소</td>
           <td><input type="text" placeholder="배송받을주소(필수)"></td>
        </tr>
        <tr>
           <td class="td1">배송메모</td>
           <td>
              <textarea rows="5" cols="60" style="resize: none;"></textarea>
           </td>
        </tr>
     </table>
  </fieldset>
  <input type="submit" value="주문하기">
  <input type="reset" value="다시작성">

```

</form>
</body>
</html>