[HTML]input에 안내문구 넣기 Placeholder속성 사용하기

개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 

리코딩 ReCoding

 

Placeholder는 HTML5에서 추가된 속성입니다. 텍스트 입력 폼에 안내문구를 넣어 데이터 입력에 도움을 줍니다. 간단한 예는 다음과 같습니다.

 

<input type="text" name="tel" placeholder="Your phone number.">

입력 폼 안에 placeholder의 속성값인 ‘Your phone number.’가 나옵니다.

Value 속성으로도 비슷한 효과를 낼 수 있습니다.

<input type="text" name="tel" value="Your phone number.">

웹브라우저로 보았을 때의 모양은 거의 비슷하지만, placeholder와 value는 다음과 같은 차이점이 있습니다.

• placeholder 속성을 사용한 폼에 마우스 클릭을 하면 폼 제일 앞에 커서가 위치합니다. 하지만 value 속성을 사용한 폼에 마우스 클릭을 하면 클릭한 위치에 커서가 생깁니다.
• placeholder 속성을 사용한 폼에 아무것도 입력하지 않고 전송하면 빈 내용이 전송됩니다. value 속성을 사용한 폼에 아무것도 입력하지 않고 전송하면 value 속성값이 전송됩니다.

즉, placeholder는 화면에만 보이는 안내문구이고, value는 초기값입니다.

 

*당연히 알아두어야 할 것. 자주 쓰게 되는 rule

 

출처 : m.blog.naver.com/PostView.nhn?blogId=doy153&logNo=90181785674&proxyReferer=https:%2F%2Fwww.google.com%2F

개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 

리코딩 ReCoding