HTML5 새로운 속성, 입력 값 체크

새로운 속성들

autocomplete 를 설정해 on으로 설정해 놓으면 자동완성 기능이 작동합니다.

form 태그에 autocomplete를 on으로 설정해 놓으면 form 안에 있는 태그들은 모두 autocomplete가 동작합니다.

여기서 특정 태그에서는 autocomplete를 사용하고 싶지 않으면 해당 태그에서 autocomplete를 off로 설정하면 됩니다.

<form action="login.php" autocomplete="on">

<input type="text" name="id">

<input type="password" name="password" autocomplete="off">

<input type="submit">

</form>

autofocus 기능을 사용하면 페이지에 접근했을 때 해당 타입으로 포커스가 맞춰집니다.

<input type="text" name="id" autofocus>

입력 값 체크

필수적으로 입력해야 되는 부분은 required를 추가해줍니다.

<input type="text" name="id" required>

사용자의 입력을 패턴으로 강제하고 싶을때는 pattern을 추가해줍니다.

정규표현식에서 . 은 어떠한 문자도 상관 없다는 것입니다.

<input type="text" name="password" pattern="[a-zA-Z]." >

입력 예시 : a (x)

입력 예시 : a1 (o)

입력 예시 : a11 (x)

정규표현식에서 .+은 하나 이상 와야된다는 뜻입니다.  

<input type="text" name="password" pattern="[a-zA-Z].+">

입력 예시 : a (x) 

입력 예시 : a1 (x)

입력 예시 : a11 (o)

하지만 마지막에는 숫자로 끝나야 한다고 넣고 싶으면?

<input pattern="[a-zA-Z].+[0-9]">

입력 예시 : ab (x)

입력 예시 : A8 (o)

입력 예시 : Aa8(o)