※ INPUT 태그의 TYPE 속성으로 아래의 값들이 추가 됨.
1. number : 숫자만 입력할 수 있는 창을 만들며 범위 제한을 둘 수 있다.
2. email : 이메일 주소 검증 창을 만든다. (유효성체크)
3. url : URL 입력 형식을 검증하는 창을 만든다. (유효성체크)
4. date : 날짜 입력창을 만든다. (달력 출력)
5. color : 색상을 선택할 수 있는 창을 만든다. (색상표 출력)
6. range : 슬라이드 컨트롤을 만든다.
7. search : 검색창을 만든다. text 속성과 동일하다.
ex : <input type="number" ..
※ FROM 또는 하위 태그에 아래의 속성이 추가 됨.
8. autocomplete="on" (또는 off)
- 사용자가 한번 입력했던 정보를 기억하여 자동완성 시켜주는 기능
- 테스트로는 정보입력 / 전송 후 뒤로가기 브라우저 버튼을 클릭했을 때 정보가 남아있는지를 체크
- form에 세팅을 하여 폼 전체 적용이 가능하고 입력태그 마다 개별 적용도 가능하다.
( ex : form 에 autocomplete="on" 적용하고 암호는 개별(off)적용한다. )
9. placeholder="메시지"
- INPUT 태그에 적용할 수 있는 속성으로 화면출력 시 (휘발성)안내 메세지를 입력 상자에 세팅한다.
( ex : <input type="text" name="id" placeholder="아이디를 입력해 주세요."> ) 사용자 클릭 시 사라짐
10. autofocus
- 화면 출력 시의 초기 커서 위치 세팅
( ex : <input type="text" name="id" autofocus> ) 화면 출력 시 id 입력 상자에 (초기) 커서가 위치한다.
예제1)
<h3>[ 사원정보 입력하기 ]</h3>
<form name="frm" method="post" action="save.jsp">
아이디 <input type="text" name="id"> <br>
이메일 <input type="email" name="email"> <br>
개인홈페이지 <input type="url" name="url"> <br>
생일 <input type="date" name="birthday"> <br>
좋아하는색상 <input type="color" name="color"> <br>
핸드폰(-없이입력) <input type="number" name="cellphone"> <br>
<input type="submit" value="전송">
</form>
예제2) RANGE
- 자바스크립을 같이 사용해야 효용이 있음
<script>
function rangeSet(value) {
document.frm.pay.value = value;
}
</script>
<form name="frm">
홍길동 급여 (월) : <input type = "text" name = "pay"> 만원 <br>
세팅 : <input type="range" value="0" min="0" max="9000" step="5" xxonchange="rangeSet(this.value)"> <br>
</form>
예제3) search
- 검색 사이트의 주소를 세팅하여 사용법 대로 세팅을 하면 입력 상자에 입력한 문자가 검색 사이트에 직접 적용되어 검색을 한다.
- method는 구글과 네이버 모두 get으로 세팅을 해야한다.
<form name="frm1" method="get" action="https://www.google.com/search">
검색 <input type="search" name="q">
<input type="submit" value="검색">
<form name="frm1" method="get" action="https://search.naver.com/search.naver">
검색 <input type="search" name="query">
<input type="submit" value="검색">
예제4) autocomplete
- autocomplete / autofocus
<form name="frm" method="post" action="save.jsp" autocomplete=on">
<input type="text" name="userid" placeholder="id를 입력해주세요." autofocus> <br>
<input type="password" name="pass" autocomplete="off" placeholder="비밀번호는 8~20자 사이로 세팅합니다." > <br>
<input type="text" name="name" placeholder="이름을 입력해주세요." >
:
</form>