[HTML5] placehorder 와 required 속성 에 대해 알아보자

placehorder 속성

 

아이디나 패스워드를 입력하려고 보면  흐릿한 글씨로 "입력하세요"로 나와 있는 경우가 있습니다.

이때 사용하는것이 placehorder 입니다.

 

form 형식에서 placehorder="아이디를 입력하세요" 을 사용했을 경우

사용자가 뭔가를 입력 하기 전까지 입력이라는 글이 나오게 됩니다.

<input type="text" placeholder="아이디를 입력하세요">
<input type="password" placeholder="비밀번호를 입력하세요">

placehorder의 예시

 

 

 

required 속성

회원 가입시 사용자의 이름 비밀번호등을 입력 받는데 이는 꼭 입력해야 합니다.

이를 required 속성을 이용해서 빈칸이 되는것을 방지할수 있습니다.

 

또한 required 는 조건에 맞지 않으면 제출이 안되게 할수도 있습니다.

예시로 나이가 18세 이상 60세 미만 일 경우만 작성하게 하고 이보다 작거나 클경우는 입력이 막히게 됩니다.

<label for="age">나이:</label>
<input type="number" id="age" name="age" min="18" max="60" required>

18 이하로 더 안내려 갑니다.