레스토랑 예약하기
<!doctype html>
<html>
<head>
<title>web02.2.4</title>
<meta charset="utf-8">
</head>
<body>
<h1>레스토랑 예약하기</h1>
<fieldset name="info">
<legend>예약자 정보</legend>
예약자 : <input type="text" name="name" required/><br>
연락처 : <input type="tel" placeholder="000-0000-0000" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}"/><br>
예약인원 :
<select name="grade" size>1>
<option value="2">2명</option>
<option value="3">3명</option>
<option value="4">4명</option>
<option value="5">5명 이상</option>
</select>
</fieldset>
<br>
<fieldset name="time">
<legend>예약 시간 선택</legend>
<input type="date"/> <input type="time"/>
</fieldset>
<br>
<fieldset name="menu">
<legend>메뉴 선택</legend>
<input type="radio" name="course" value="a" checked/>코스 A
<input type="radio" name="course" value="b" />코스 B
<input type="radio" name="course" value="c" />코스 C
<input type="radio" name="course" value="d" />코스 D
<br>
요청사항:<br>
<textarea cols="50" rows="5"></textarea>
</fieldset>
<br>
<input type="button" value="확인"/>
<input type="reset" value="취소"/>
</body>
</html>
* <input type="text" name="name" required/>
required 속성을 붙여 꼭 입력되어 하는 부분임을 표시한다. >> 마우스를 입력란에 두면 "이 입력란을 작성하세요."라는 메시지가 표시된다.
* <input type="tel" placeholder="000-0000-0000" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}"/>
placeholder로 지정한 부분의 내용이 바탕에 표시된다. 패턴속성으로 지정한 형식에 어긋나게 입력했을 경우 "요청한 형식과 일치시키세요" 라는 메시지가 표시된다.
SMALL
'Web > Web Programming' 카테고리의 다른 글
| [CSS] WEB2.1 - WEB2.9 (0) | 2020.07.29 |
|---|---|
| WEB 02.1.1 유튜브 영상 공유 (0) | 2020.07.22 |
| WEB 02.2.3 설문조사 폼 양식 (0) | 2020.07.22 |
| WEB 02.2.1 ~ WEB 02.2.2 (0) | 2020.07.21 |
| WEB02.1.4 이미지 삽입 및 이동 (0) | 2020.07.21 |