html5 form 예제

사용자의 데이터, 클라이언트 측의 유효성을 검사하는 기능 양식을 만드는 방법을 살펴보겠습니다. 이 작업을 완료, 우리는 CSS를 사용하여 그것을 예쁘게 커버 할 것이다, 일부 CSS3포함! 당신이 물어 전에, 누군가가 항상 않습니다, 이러한 예는 현재 다음과 같은 브라우저에서 작동합니다: 사파리 5, 크롬 6, 오페라 9, 파이어 폭스 4 베타와 아이폰 / 아이 패드. 또한 각 브라우저는 약간 다른 기본 동작을 가지고 있습니다. 필수 특성이 있는 경우 양식제출전에 필드에 값이 포함되어야 합니다. 예를 들어 이전 예제에서 부품 번호를 필요하게 하려면 필수 특성을 추가하기만 하면 됩니다. 이러한 아이디어를 실천하고 약간 더 관련이 있는 양식 구조인 지불 양식을 만들어 보겠습니다. 이 양식에는 아직 이해하지 못하는 여러 위젯 유형이 포함됩니다. 다음 기사(네이티브 양식 위젯)에서 어떻게 작동하는지 확인할 수 있습니다. 지금은 아래 지침을 따라 설명을 주의 깊게 읽고 양식을 구성하는 데 사용하는 래퍼 요소와 그 이유에 대한 감사를 형성하기 시작합니다. 누구든지 유효한 이메일 또는 URL 형식을 테스트하기 위해 보다 철저한 표현식을 제공하려면 위의 피드백 옵션을 사용하여 자유롭게 게시하십시오. 현재 새로운 양식 및 입력 요소에 대 한 지원은 현대 브라우저에 광범위 한, 비록 종종 일부 선택 기 바탕 화면에 표시 되는 방식에 약간의 차이가 있다. 모바일 브라우저는 선택한 입력 유형에 따라 올바른 키보드를 표시하는 데 비교적 일관성이 있습니다. 최신 정보는 CanIUse.com HTML5 양식 피처의 상태 또는 Wufoo의 HTML5 양식의 현재 상태를 확인하십시오.

모형에서 볼 수 있듯이 „이메일” 및 „웹 사이트” 필드에 대한 서식 힌트가 있습니다. 따라서 필요한 경우 입력 필드 아래에 힌트를 추가하고 나중에 스타일을 지정할 수 있도록 클래스를 제공합니다. 유효성 검사는 사용자가 입력할 때 즉시 발생하며 입력하는 동안 잘못된 스타일이 표시될 수 있습니다. 이를 방지하기 위해 아래 예제와 같이 스타일을 다른 것으로 설정할 수 있습니다. FormData를 사용하여 제출하기 전에 기존 양식에 추가 데이터를 추가할 수도 있습니다. 다시 말하지만, 다른 브라우저는 이것을 다르게 구현합니다. 오페라에서 입력을 받아 들일 수 있도록 *@*만 입력하는 것으로 충분합니다. 사파리, 크롬, 파이어 폭스에서 당신은 적어도 입력해야합니다 *@-.-. 물론 두 예제 모두 매우 제한적인 것은 아니지만 전화 번호, 여러 개의 `@`s 또는 공백이 있는 문자열과 같이 완전히 잘못된 값을 입력하는 것을 방지할 수 있습니다. 무엇보다도 코드작성에 편안하고 접근이 용이하고 사용 가능한 양식이 있는 스타일을 찾는 것은 사용자에게 달려 있습니다.

동일한 스타일을 textarea 요소로 확장할 수 있지만 확인란, 요소 선택 등에는 작동하지 않습니다. 요소와 함께 유효/무효 마커를 배치하거나 테두리, 배경 색 등을 사용하여 입력 요소 자체의 서식을 지정할 수 있습니다. 보조 기술에 대한 영향력 때문에

요소는 접근 가능한 양식을 구축하기위한 핵심 요소 중 하나입니다. 가능하면 폼을 작성할 때마다 화면 판독기가 양식을 해석하는 방법을 들어보십시오.