2일차(4) HTML 기초 : form(2)
<form 예제3>
<!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>Step09_form3.html</title>
</head>
<body>
<h1>html5 에서 추가된 form 요소</h1>
<p>
웹브라우저의 종류와 버전별로 지원이 될수도 있고 안될수도 있다
<a href="https://caniuse.com">여기서 확인</a>
</p>
<form action="insert.jsp">
색상 선택 <input type="color" name="color">
<br>
범위 선택 <input type="range" name="range" min="0" max="100" step="10" value="30">
<br>
날짜 선택 <input type="date" name="date">
<br>
시간 선택 <input type="time" name="time">
<br>
날짜, 시간 선택 <input type="datetime-local" name="datetime">
<br>
숫자 <input type="number" name="number" min="0" max="10" step="1">
<br>
이메일 <input type="email" name="email">
<br>
<button type="submit">저장</button>
</form>
</body>
</html>- 브라우저에 따라서 UI가 다르게 나오므로 유의!!
→ https://caniuse.com 활용
- <input type="range" name="range" min="0" max="100" step="10" value="30"> : 범위 선택
- 최소값, 최대값, 변하는 기본단위, 현재 value(초기값) 등을 넣을 수 있다.
<form 예제4>
<!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>Step09_form4.html</title>
</head>
<body>
<h1>폼 요소에 기본값 설정하기</h1>
<p>
서버에서 클라이언트에게 폼을 응답할때 이미 저장된 값을
출력한 체로 응답을 해야 할때가 있다.
예를 들어 회원 가입된 정보 보기로 이동한다면
DB 에 이미 저장된 내용을 출력해 주어야 한다.
</p>
<form action="update.jsp">
이메일 <input type="email" name="email" value="aaa@naver.com">
<br>
<fieldset>
<legend>취미 정보 선택</legend>
<label>
<input type="checkbox" name="hobby" value="soccer"> 축구
</label>
<label>
<input type="checkbox" name="hobby" value="baking" checked> 베이킹
</label>
<label>
<input type="checkbox" name="hobby" value="piano" checked> 피아노
</label>
<label>
<input type="checkbox" name="hobby" value="etc"> 기타
</label>
</fieldset>
<label for="job">직업선택</label>
<select name="job" id="job">
<option value="">선택</option>
<option value="programmer">프로그래머</option>
<option value="doctor">의사</option>
<option value="pianist" selected>피아니스트</option>
<option value="etc">기타</option>
</select>
<br>
하고 싶은말
<br>
<!-- textarea 의 초기값은 textarea 의 innerText 로 출력을 해 놓아야 한다. -->
<textarea name="comment" id="comment">하나 두울
세엣
네엣
</textarea>
<br>
<button type="submit">수정하기</button>
<button type="reset">취소</button>
</form>
</body>
</html>- 폼에 저장된 값(초기값)이 출력된 상태로 보여주기
- <input type="email" name="email" value="aaa@naver.com"> : value속성의 값이 초기값으로 사용됨
- <checkbox> : checked 작성
- <select> : selected 작성
- <textarea name="comment" id="comment"> : 초기값은 없고, innertext에 작성해서 출력해야 한다.
textarea는 개행기호를 다 해석해주며, 들여쓰기, 공백 전부 인식
'국비교육(22-23)' 카테고리의 다른 글
| 2일차(6)/Javascript 기초 (0) | 2022.10.06 |
|---|---|
| 2일차(5)/HTML 기초 : <a> (0) | 2022.10.06 |
| 2일차(3)/HTML 기초: form(1) (0) | 2022.10.06 |
| 2일차(2)/HTML 기초 : table (0) | 2022.10.06 |
| 2일차(1)/HTML 기초 : ul, ol, dl (0) | 2022.10.06 |