HTML5 폼
기존에는 자바스크립트를 이용해야만 했던 반면 이제는 브라우저가 기능을 직접 지원한다
HTMl5를 이용하면 개발자들이 폼 작성을 쉽게 할 수 있을 뿐더러
다양한 사이트에 걸쳐 일관성이 확보될 것이며 불필요한 자바스크립트 없이 빠르게 로드될 것이다.
HTML5 폼 속성
1. required 속성
해당 필드가 제대로 채워졌을 때만 폼을 전송하도록 브라우저에게 알려준다.
필드의 타입에 따라 특정 종류의 값만 허용된다는 의미이기도 하다.
필수 필드가 비어 있거나 유효하지 않으면 그 폼은 전송되지 않으며 유요하지 않은 첫번째 요소로 포커스 이동
<label for="register-name">제 이름은 :</label>
<input type="text" id="register-name" name="name" required aria-required="true">
접근성을 향상시키고자 required 속성이 포함될 때마다 ARIA 속성 aria-required="ture"를 추가한다.
기능을 추가함으로써 사용자에게 해당 필드가 필수라는 사실을 알릴 수 있는 가능성이 높아진다.
:required 가상 클래스를 이용하면 필수 폼 요소의 스타일을 저정할 수 있다.
input:required { backgrouind-image:url(../images/required.png"); }
2. placeholder 속성
어떤 데이터가 필드에 입력돼야 하는지 알려주는 짧은 힌트를 표시해준다.
<input type="text" id="url" name="url" placehoder="http://http://exmaple.com">
하지만 placeholder 속성은 아직까지 최신 버전의 브라우저에서만 한정적으로 지원된다.
현재는 사파리, 크롬, 오페라, 파이어폭스4에서 지원된다.
3. 자바스크립트를 이용한 폴리필링 지원
약간의 자바스크립트 마법을 이용하면 이전 이용버전의 브라우저에서도 사용할 수 있다.(p/67 참조)
4. pattern 속성
사용자가 입력한 내용이 유효한 값이 되기 위해 반드시 일치해야 하는 정규 표현식을 지정할 수 있다.
<input type="password" id="password" name="password" required pattern="\s{6,}">
\s는 비공백 문자를 의미
{6,}는 최소 6번 이상을 의미한다.
길이도 지정하고 싶다면 \s{6,10}과 같이 나타낼 수 있다.
required 속성과 마찬가지로 pattern 속성도 패턴이 일치하지 않으면 폼이 전송되지 않고 오류 메시지를 표시한다.
5. disbled 속성
모든 필드가 정확하게 채워지기 전까지 전송 버튼이 비활성화돼 있게 하는데 자주 쓰인다.
css에서는 :disabled 가성 클래스를 이용해 비활성화된 홈 컨트롤의 스타일을 지정할 수 있다.
6. readonly 속성
disabled와 달리 이 필드는 포커스를 받을 수 있고, 해당 값이 폼과 함께 전송된다.
데이터가 수집되지만 데이터를 수정할 수는 없다는 사실을 알려준다.
<input type="text" name="about" readonle>
7. multiple 속성
폼 컨트롤에 값을 여러 개 넣을 수 있다.
이전 버전의 HTML에서도 오직 select 요소에만 적용할 수 있었다.
HTML5에서 이 속성은 email과 file 입력 타입에도 추가할 수 있다.
이 속성이 지정돼 있으면 사용자는 하나 이상의 파일을 선택하거나 콤마로 여려 개의 이메일을 입력할 수 있다.
8. autocomplete 속성
대부분의 폼 필드에서는 타이핑을 시작하면 나타나는 드롭다운을 의미한다.
비밀번호 필드에서는 브라우저가 비밀번호를 저장하게 하는 기능을 나타낸다.
기본적으로 자동완성 기능은 켜져 있다.
자동완성 기능을 끄려면 autocomplete="off" 사용
9. datalist 요소와 list 속성
데이터리스트는 현재 파이어폭스와 오페라에서만 지원되지만 정말 근사한 기능이다.
이 기능이 지원되는 브라우저에서는 단순한 텍스트 필드가 표시
이 텍스트 필드가 포커스를 얻으면 추천 답변 목록이 드롭다운 형태로 나타난다.
<datalist id="colors">
<option value="blue">
<opotion value="green">
<option value="red">
</datalist>
10. autofocus 속성
페이지가 로드되자마다 포커스를 가져야 한다는 것을 명시한다.
해당 페이지에서는 오직 하나의 폼 요소만이 autofocus를 가질 수 있다.
HTML5의 새로운 폼 입력 타입
1. search
text 상태와 search 상태의 차이는 주로 외형적인 부분에 있다.
많은 브라우저에서 검색 박스와 같은 형태로 표시된다.
텍스트가 입력되면 플드에 x 아이콘을 표시
현재 크롬과 사파리에서만 필드를 지우는 버튼을 제공한다.
새로운 검색 타입은 사용자에게 시각적인 힌트를 주며 익숙한 인터페이시를 제공한다.
지원되지 않는 브라우저에서는 일반 텍스트 바긋로 표시되므로 항상 이용해도 해가 될 일은 없다.
2. 이메일 주소
이 타입에 multiple 논리 속성을 지정하면 콤마로 구분된 여러개의 이메일 주소를 입력할 수 있다.
<input type="email" ie="email" name="email">
text에서 email로 변경했더라도 사용자 인터페이스에는 시각적으로 차이거 없다.
모바일에선 이메일 입력에 최적화된 키보드를 표시한다.
파폭, 크롭, 오페라에는 오류 메시지도 제공한다.
3. URL
웹 주소를 입력하는 데 이용한다.
키보드는 사선과 .com등을 비롯해 웹주소를 입력하는 데 최적화된 형태로 표시된다.
<input type="url" id="url" name="url">
좀 더 구체적인 형식에 맞게 하고 싶다면 pattern 속성을 이용해 그 갑싱 맞는지 확인한다.
4. 전화번호
tel 입력 타입을 이용한다.
전 세계의 여러 국가에 번호 표시가 다르기 때문에 표준화 되지 못한다.
5. 숫자
number 숫자 입력을 위한 컨트롤을 제공한다.
최소값과 최대값을 명시하는 min max 속성이 있다.
6. 범위
슬라이더 컨트롤을 표시한다.
min, max 속성을 사용할 수 있다.
number와 range의 차이점은 range에서는 숫자의 정확한 값이 중요하지 않다는 점이다.
명확한 숫자를 입력해야 하는 곳에 안성맞춤이다.
<input type="range" main="1" max="10" name="rating">
7. 색상
색상 선택기를 제공한다.
8. 날짜와 시간
<input type="date" min="2012-12-12" max="2012-12-24">
결론
HTML 입력 요소와 속성에 대한 지원이 늘어나면서 점차 클라이언트 측 유효성 검사와 사용자 인터페이스의 개선을
위한 자바스크립트는 줄어드는 반면, 브라우저가 대부분의 힘든 일을 처리하게 될 것이다.
[인터넷에서 퍼옴 - URL 확인 불가]
