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>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
예제 2
<input> 태그에 value 를 이용해서 기본값을 만들 수 있습니다.
이 상태에서 submit 버튼을 클릭하면 기본값이 전송됩니다.
<form>
<p><input type="text" name="name" value="기본값"></p>
<p><input type="submit" value="Submit"></p>
</form>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
예제 3
<textarea>
에도 사용할 수 있습니다.
<form>
<p><input type="text" name="name" placeholder="Input Name"></p>
<textarea placeholder="Say something!"></textarea>
<p><input type="submit" value="Submit"></p>
</form>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.