placeholder

무엇을 입력해야 하는지 안내하는 문구를 넣고 싶다면 placeholder를
사용합니다.


예를 들어 '네이버' 같은 포털 사이트의 로그인 창에서도 따로 '아이디'나
'비밀번호' 같은 제목을 붙이지 않고 입력 필드 안에 '아이디' 나 '비밀번호'를
표시해 놓아 사용자가 알아 볼수 있습니다.

이 기능은 <input> 태그의 placeholder 속성으로 만들 수
있는데요. '아이디' 필드를 마우스 오른쪽 버튼으로 클릭한 후 [ 검사 ] 를 선택해
개발자 도구 창을 열어 보면 <input> 태그 안에 placeholder
속성이 사용 된 것을 볼 수 있습니다.


 

예제1

placeholder 속성에 문자열을 입력하면 화면 상에는 그 문자열이 보이지만, submit
버튼을 클릭했을 때 아무 값도 전송되지 않습니다.

<form>
  <p><input type="text" name="name" placeholder="Input Name"></p>
  <p><input type="submit" value="Submit"></p>
</form>

<form>
  <p><input type="text" name="name" value="기본값"></p>
  <p><input type="submit" value="Submit"></p>
</form>

<form>
  <p><input type="text" name="name" placeholder="Input Name"></p>
  <textarea placeholder="Say something!"></textarea>
  <p><input type="submit" value="Submit"></p>
</form>