반응형
전공서적 구매하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>주문하기</title>
</head>
<body>
<h1>전공서적 구매하기</h1>
<div id="container">
<form>
<fieldset>
<legend>상품 선택</legend>
<p><b>주문할 상품을 선택해 주세요.</b></p>
<ul >
<li>
<label><input type="checkbox" value="s_3">자바 기초</label>
<input type="number" min="0" max="5" value="1"> 개 (최대 5개)
</li>
<li>
<label><input type="checkbox" value="s_5">자바 심화</label>
<input type="number" min="0" max="3" value="0"> 개 (최대 3개)
</li>
<li>
<label><input type="checkbox" value="f_3">DB 기초</label>
<input type="number" min="0" max="5" value="0"> 개 (최대 5개)
</li>
<li>
<label><input type="checkbox" value="f_5">HTML / CSS</label>
<input type="number" min="0" max="3" value="0"> 개 (최대 3개)
</li>
</ul>
<p><b>주문 선택</b></p>
<ul>
<li><label><input type="radio" name="gift" value="yes">택배</label></li>
<li><label><input type="radio" name="gift" value="no">직접 수령</label></li>
</ul>
</fieldset>
<fieldset>
<legend>배송 정보</legend>
<ul id="shipping">
<li>
<label for="user-name">이름 </label>
<input type="text" id="user-name">
</li>
<li>
<label for="addr">배송 주소</label>
<input type="text" id="addr">
</li>
<li>
<label for="mail">이메일</label>
<input type="email" id="mail">
</li>
<li>
<label for="phone">연락처</label>
<input type="tel" id="phone">
</li>
<li>
<label for="d-day">배송 지정</label>
<input type="date" id="d-day"> <small>(주문일로부터 최소 3일 이후)</small>
</li>
<li>
<label for="memo">메모</label>
<textarea id="memo" cols="40" rows="4"></textarea>
</li>
</ul>
</fieldset>
<div>
<input type="submit" value="주문하기">
<input type="reset" value="취소하기">
</div>
</form>
</div>
</body>
</html>반응형
'HTML&CSS' 카테고리의 다른 글
| [CSS] 로그인 화면 만들기_0407 8교시 (0) | 2023.04.07 |
|---|---|
| [HTML&CSS] 포스터 만들기 (0) | 2023.04.06 |
| [HTML] INPUT (0) | 2023.04.05 |
| HTML 테이블 생성 (0) | 2023.04.04 |
| HTML 태그 종류 (1) | 2023.04.04 |