html5 input 필드에 기본 텍스트 표시 후 클릭시 사라지게 하기

최근 대부분 인터넷 포털의 로그인 아이디 패스워드 입력 박스에는 아래와 같이 "아이디"  "비밀번호" 등

입력안내 문구가 기본값으로 세팅되어 있습니다.

 

 

 

 

 

과거 html 버전에서는 입력 값을 설정한 후 이벤트 에 대한 스크립트 처리를 통해서 keyin 이나 click 이벤트 발생시 펑션구현을

이용해서 기본 세팅값을 클리어해주는 역할을 해줬죠..

 

구현된 예시는 아래링크 참고

 

:: [jQuery plugin] 기본값이 있는 inputbox 만들기

 

html5에서는 구현할 필요없이 자체 기능으로 제공합니다.

 

inpit  타입에 placeholder 라는 속성값을 추가해주기만 하면 끝나네요..

 

<input type="text" id="loginid" palceholder="아이디"> <input type="text" id="pwd" palceholder="패스워드">

 

두 줄이면 이미지와 같은 형태로의 구현이 가능합니다.