티스토리 뷰
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Order Form</title>
</head>
<body>
<form>
<p>고객 명 : <input type = "text" name = "cname"></p>
<p>전화번호 : <input type = "tel" name = "cPhone"></p>
<p>E-mail : <input type = "email" name = "email"></p>
<fieldset style = "width:380px; height:165px;">
<legend>피자 사이즈</legend><br>
<input type = "radio" name = "small"> Small<br/><br/>
<input type = "radio" name = "medium"> Medium<br/><br/>
<input type = "radio" name = "large"> Large<br/><br/>
</fieldset>
<fieldset style = "width:380px; height:210px;">
<legend>토핑 선택</legend><br>
<input type = "checkbox" name = "bakon"> 베이컨 <br/><br/>
<input type = "checkbox" name = "cheese"> 치즈 <br/><br/>
<input type = "checkbox" name = "onion"> 양파 <br/><br/>
<input type = "checkbox" name = "mushroom"> 버섯 <br/><br/>
</fieldset>
<p>희망배송시간 :
<input type="time" id="appt" name="appt" min="09:00" max="18:00" required width = "150px">
</p>
<p>배송시 요청사항 :
<textarea rows = "2" cols = "22"></textarea>
</p>
<p>
<input type = "submit" value = "주문하기"/>
<input type = "reset" value = "다시 선택하기"/>
</p>
</form>
</body>
</html>- 실행 화면
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Product Form</title>
</head>
<body>
<form>
<fieldset style = "width:380px; height:165px;">
<legend>납품자정보</legend>
<ol>
<li>납품자명 : <input type = "text" name = "name" placeholder = "name"/></li><br/>
<li>Email : <input type = "email" name = "email" placeholder = "answer@naver.com"/></li><br/>
<li>홈페이지 : <input type = "url" name = "url" placeholder = "http://"/></li><br/>
</ol>
</fieldset><br>
<fieldset style = "width:380px; height:230px;">
<legend>납품정보</legend>
<ul>
<li>상품명 : <input type = "text" name = "pname"/></li><br/>
<li>납품수량 : <input type = "number" name = "count" min = 100 placeholder = "최소100"/></li><br/>
<li>납품등급 : <input type = "range" min = "1" max = "10" name = "level" /></li><br/>
<li>기타사항 : <textarea rows="2" cols="20"></textarea>
</ul>
</fieldset>
<p> <input type = "submit" value = "send message"/> </p>
</form>
</body>
</html>- 실행 화면
'📍HTML&CSS' 카테고리의 다른 글
| [HTML/CSS] 스크롤 기능은 살리고 스크롤바는 없애기 (7) | 2020.04.06 |
|---|
댓글