니플
30k
2019-03-13 16:12:44
0
986

[펌] HTML5 입력 양식: 어디쯤 왔을까?


https://webactually.com/2019/03/html5-입력-양식-어디쯤-왔을까/


HTML5는 새로운 입력 양식 13종을 선보이면서 웹 디자이너와 개발자가 양식에 추가할 수 있는 필드의 수를 크게 늘렸다. 새로운 유형 모두는 브라우저에서 지원해야 하며, 아직은 사용자층이 더디게 늘고 있다. 2019년 현재 필드 유형의 상황은 어떨까? 사용할 만한 것이 있을까? 아니면 여전히 피해야 할까?

HTML5의 눈에 띄는 표제 중 하나는 많은 디자이너와 개발자가 사용할 수 있는 새로운 입력 양식을 여러 가지 추가한 것이다. 우리는 수년 동안 한 줄 텍스트 입력(type="text")을 사용하도록 제한받았고 자바스크립트와 사용자 지침을 통해 정교하지 않은 필드에서 다른 형식의 유효한 데이터를 정확하게 얻고자 했다.

HTML5는 필드를 통해 얻어내야 하는 데이터의 종류를 더 구체적으로 지정할 수 있는 type 속성에 새로운 값을 도입했고 이때 브라우저는 사용자가 필드를 정확하게 완료하는 데 필요한 인터페이스와 유효성 검증을 제공하기로 약속했다.

URL에서 전자메일, 검색 필드에서 날짜에 이르기까지 번거롭게 자바스크립트를 작성해 필드 유효성을 검사하지 않고 브라우저가 이런 고된 작업을 처리하게 만드는 것이 희망이었다. 한술 더 떠서 사용자의 기기 종류, 상호작용 유형, 시간대 등과 같은 콘텍스트에 관해 아는 것을 추가함으로써 브라우저가 페이지 작성자가 하는 것처럼 사용자의 요구에 부합하도록 해당 인터페이스를 더 잘 조정할 수 있을 것이다.


추천 기사: UX와 HTML5: 사용자의 모바일 양식 작성 돕기

명세에 새로운 항목이 들어갔다 해도 사용하는 브라우저가 이러한 기능을 지원하지 않는다면 그건 별 의미가 없다. type 속성의 새로운 값은 브라우저가 지원하지 않으면 type="text"로 대체하는 커다란 이점을 주지만, 브라우저 제조사가 제품에 새로운 종류를 구현할 때 자체 기능을 제거하는 비용이 들 수도 있다.

2019년에 들어섰지만 HTML5는 지금도 HTML 최신 버전이다. 새로운 필드 중에서 구현된 것과 사용할 수 있는 것, 피해야 할 것은 어떤 것일까?


1. 검색 필드

2. 전화번호 필드

3. URL 필드

4. 전자메일 필드

5. 숫자 필드

6. 범위 필드

7. 컬러 필드

8. 날짜 필드


관심있는 분은 참고바랍니다.

4
2
  • 댓글 0

  • 로그인을 하시면 댓글을 등록할 수 있습니다.