[HTML] <input> 태그 속성 placeholder, required, autocomplete

1. 값이 비어있을 때 보여주는 값 placeholder

아래 구글 로그인 화면에 있는 "이메일 또는 휴대전화" 같은 건데요. 이런 걸 "플레이스홀더"라고 부릅니다.

이런 값을 추가하려면 placeholder라는 속성을 쓰면 됩니다.

<input name="username" placeholder="이메일 또는 휴대전화">

 

이때 placeholder 의 디자인을 바꾸려면 CSS 선택자로 ::placeholder 를 활용하면 됩니다.

input::placeholder {
  color: #dddddd;
}

 

2.반드시 입력해야 하는 값 required

폼에서 반드시 입력해야 하는 값이 있다면 required 속성을 써주면 됩니다. 만약 required인 인풋의 값이 비어있다면, 전송 버튼을 눌러도 전송되지 않습니다.

<input name="email" type="email" required>

 

3.자동 완성 autocomplete

이 속성을 지정해 두면 폼이 전송될 때마다 입력한 값을 웹 브라우저에 저장해 두고, 나중에 인풋에 값을 입력할 때 추천해 줍니다.

참고로 required와 달리 on이라는 값을 지정해 주어야 동작합니다. 

<input name="search" type="text" autocomplete="on">

<input name="email" type="email" autocomplete="email"> <!--이메일형식-->
<input name="telephone" autocomplete="tel">  <!--전화번호형식-->