(HTML코딩일기) 유용한 인풋 태그 속성

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

아래의 예시와 같은 구글 로그인 화면에 있는 "이메일 또는 휴대전화" 같은 것을 "플레이스 홀더"라고 부릅니다.

이러한 값을 추가하려면 placeholde라는 속성을 쓰면 됩니다.

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

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

input::placeholder {
  color: #dddddd;
}

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

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

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

3. 자동완성 autocomplete

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

 

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

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

만약 이메일을 채워 넣게 하고 싶다면 email이라는 값을 쓸 수 있고, 전화번호를 채워 넣고 싶다면 tel이라는 값을 쓸 수 있습니다. 이러한 값은 스마트폰으로 사이트를 접속했을 때 유용합니다.

<input name="email" type="email" autocomplete="email">
<input name="telephone" autocomplete="tel">