required 속성

required 논리속성은 해당 필드가 제대로 채워졌을 때만 폼을 전송하도록 브라우저에게 아려준다. 물론 이 속성은 필드가 빈 채로 남겨져서는 안된다는 것을 의미하지만, 이것은 또한 어느 속성이나 필드의 타입에 따라 특정 종류의 값만 허용된다는 의미이기도 하다. 

필수 필드가 비어 있거나 유효하지 않다면 그 폼은 전송되지 않으며, 유효하지 않은 첫번째 요소로 포커스가 옮겨간다. 오페라, 파폭, 크롬에서는 사용자에게 오류 메시지를 제공한다. 

required속성은 일반적으로 디폴트 값이 지정된 button, range, color, hidden을 제외한 어떤 input타입에서도 설정할 수 있다.

<input type"text" id="regi-name" name="name" required aria-required="true"> 

접근성을 향상시키고자 required속성이 포함될때마다 aria속성 aria-required="true"를 추가한다. 많은 스크린 리더가 새로운 html5 속성에 대한 지원이 부족한 반면 wai-aria 기능은 지원하고 있다. 그러므로 이 기능을 추가함으로써 사용자에게 해당 필드가 필수라는 사실을 알릴 수 있는 가능성이 높아진다.

** 스타일적용

:required - 필수 폼요소일 경우

:valid - 유효한 필드

:invalid - 유효하지않은 필드

input:required {background-image:url(...);}
input:focus:valid {background-image:url(...);}
input:focus:invalid {background-image:url(...);}

* 파폭 4.0에서는유효하지않은요소에 자체적으로 스타일을 적용하니 미리 다음처럼 리셋을 해놓자 :invalid {box-shadow:none;}

* 하위버전에서는 input:required대신 input[required] 속성선택기를 이용하여 적용하면 됨

- 출처 : HTML5&CSS3 실전에서는 이렇게 쓴다!