![[2021/12/15]국비지원 HTML5 코딩툴 기본학습 7-(1)-{1} form 예제](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbzUOux%2Fbtrr7pyeGYR%2F6hk0fDdxwVpmgDgyW3mlV1%2Fimg.jpg)
이 날의 과정
1. form 복습 + form 예제 이미지 마크업 해서 수업 중 과제로 제출
2. video 태그
3. audio 태그
4. 기타 요소 태그
5. 한국남부발전공사 공지사항 페이지 마크업
예제 이미지 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document<title>
</head>
<body>
<form>
<fieldset>
<legend>Step 1: 로그인 정보</legend>
<ol>
<li>
<label for="userID">아이디</label>
<input type="text" id="userID" required>
</li>
<li>
<label for="userPW">비밀번호</label>
<input type="password" id="userPW" required>
</li>
<li>
<label for="confirmPW">비밀번호 확인</label>
<input type="password" id="confirmPW" required>
</li>
<li>
<label for="userclass">회원 등급-이거 틀림</label>
<input type="text" id="userclass" list="class">
<datalist id="userclass">
<option value="정회원" label="정회원"></option>
<option value="준회원" label="준회원"></option>
<option value="비회원" label="비회원"></option>
</datalist>
</li>
</ol>
</fieldset>
<fieldset>
<legend>Step 2: 개인 정보</legend>
<ol>
<li>
<label for="name">이름</label>
<input type="text" id="name" placeholder="5자미만 공백없이">
</li>
<li>
<label for="emailaddr">메일 주소</label>
<input type="text" id="emailaddr" placeholder="abcd@domain.com">
</li>
<li>
<label for="phone">연락처</label>
<input type="tel" id="phone">
</li>
</ol>
</fieldset>
<fieldset>
<legend>Step 3: 코딩 숙련도(상,중,하)</legend>
<input type="range" min="1" max="3" value="2" step="1">
</fieldset>
<center>
<p>
<input type="submit" value="제출" formaction="/" formmethod="post">
</p>
</center>
</form>
</body>
</html>
결과물:
지금은 쓰이지 않는 구닥다리 center 태그로
제출 버튼에 정렬을 준 특이성 있음
(그냥 이거 써보면 뭔가 가운데 정렬이란 의미 아냐? 싶어서 center 썼던 기억이...)
회원등급-이거틀림 은
겉보기에는 datalist 띄우는 부분이 아닌 고로..
진짜 제출 후에 틀린 게 확인된 부분