HTML 연습문제 (input 이용)
개발/웹개발2023. 3. 31. 16:15
728x90
반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>상품주문서</title>
</head>
<body>
<h1>상품 주문서</h1>
<form>
<fieldset>
<legend>
<h3>개인 정보</h3>
</legend>
<div>
<label for="">이름</label>
<input
type="text"
name="name"
id=""
placeholder="여백없이 입력"
required
/>
</div>
<div>
<label for="">연락처</label>
<input
type="tel"
name="tel"
id=""
placeholder="연락가능한 번호"
pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}"
/>
</div>
</fieldset>
</form>
<form>
<fieldset>
<legend><h3>배송지 정보</h3></legend>
<div>
<label for="">주소</label>
<input type="text" name="address" id="" />
</div>
<div>
<label for="">전화번호</label>
<input
type="tel"
name="tel2"
id=""
pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}"
/>
</div>
</fieldset>
</form>
<form action="">
주문 정보
<fieldset>
<legend><h3>주문 정보</h3></legend>
<div>
<input type="checkbox" name="product" id="" value="0" />과테말라
안티구아(100g) <input type="number" name="num1" id="" />개
</div>
<div>
<input type="checkbox" name="product" id="" value="0" />인도네시아
만델링(100g) <input type="number" name="num2" id="" />개
</div>
<input
type="checkbox"
name="product"
id=""
value="0"
/>탐라는도다(블렌딩)(100g) <input type="number" name="num3" id="" />개
</fieldset>
</form>
<form>
<input type="submit" value="주문하기" />
<input type="reset" value="취소하기" />
</form>
</body>
</html>
728x90
반응형
'개발 > 웹개발' 카테고리의 다른 글
| CSS 기본 ( text 관련 ) (0) | 2023.04.03 |
|---|---|
| HTML ( form - <select> <option> 드롭다운 목록작성) (0) | 2023.03.31 |
| HTML (input type 에 들어올 수 있는 유형) (0) | 2023.03.31 |
| HTML ( form 태그(사용자 입력) ) (0) | 2023.03.31 |
| HTML ( 이미지 태그 , <a> 태그(링크) ) (0) | 2023.03.31 |
댓글()
