<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>readonly와 required 속성 사용하기 </title>
</head>
<body>
<form>
<fieldset>
<legend> 배송정보</legend>
<ul id="shipping">
<li>
<label for="prod">주문상품</label>
<input type="text" id="prod" value="상품용 3kg" readonly>
</li>
<li>
<label for="user-name"> 이름</label>
<input type="text" id="user-name" autofocus required>
</li>
<li>
<label for="addr">배송주소</label>
<input type="text" id="addr" required>
</li>
<li>
<label for="umail">이메일</label>
<input type="email" id="umail" required>
</li>
<li>
<label for="phone">연락처</label>
<input type="tel" id="phone"placeholder="하이픈 빼고 입력해 주세요" required>
</li>
<li>
<label for="d-day">배송지정</label>
<input type="date" id="d-day"><small>주문일로부터 최소 3일 이후 </small>
</li>
</ul>
</fieldset>
<div>
<input type="submit" value="주문하기">
<input type="reset" value="취소하기">
</div>
</form>
</body>
</html>
'html' 카테고리의 다른 글
| 5장 마무리 문제 1 (0) | 2023.03.23 |
|---|---|
| 5장 실습 2 - 회원 가입 신청서에 속성 지정하기 (0) | 2023.03.23 |
| 5장 예제 - 전송과 리셋 버튼 추가하기 (0) | 2023.03.23 |
| 5장 실습 - 회원 가입 신청서 만들기 (0) | 2023.03.23 |
| 4장 마무리 문제 2 (0) | 2023.03.22 |