HTML5 양식 : 마크 업

키 테이크 아웃

html5는 이메일, 전화, URL, 검색, 번호, 범위, 날짜, DateTime, DateTime-Local, Month, Week, Time 및 Color를 포함하여 양식에 대한 다양한 새로운 입력 유형 및 속성을 소개합니다. JavaScript 코드가없는 지원 및 유효성 검사 html5는 출력 (계산 또는 사용자 조치 결과), 진행 상황 (진행률 막대) 및 미터 (속성에 대한 값에 따라 색상간에 변경 될 수있는 척도)를 포함한 읽기 전용 출력 옵션을 제공합니다. . 또한 입력 ID를 나타내는 특성으로 입력 자체 또는 옆에 레이블 요소를 사용할 수 있습니다. HTML5 입력 유형이 미래이지만 요청하는 데이터의 올바른 입력 유형을 항상 사용하고 서버 측에서 사용자 데이터를 검증하는 것이 중요합니다. 클라이언트 측 유효성 검사는 서버 측 유효성 검사를 대체 할 수 없으며 결코 없습니다.

이것은 HTML5 웹 양식에 관한 3 부 시리즈 중 첫 번째입니다. 스타일링 및 클라이언트 측 JavaScript 유효성 검사 API로 진행하기 전에이 기사의 기본 마크 업을 다룰 것입니다. 이미 양식에 익숙하더라도 이것을 읽는 것이 좋습니다. 많은 새로운 속성과 Gotchas가 있습니다! HTML 양식은 평범 할 수 있지만 대부분의 웹 사이트 및 앱에 필수적입니다. HTML4에서 입력 필드는 다음으로 제한되었습니다.

입력 유형 = "텍스트" 입력 유형 = "checkbox" 입력 유형 = "Radio" 입력 유형 = "비밀번호" 입력 유형 = "hidden" - 데이터의 경우 사용자가
• 를 볼 수 없습니다 입력 유형 = "파일" - 업로드 textarea - 더 긴 텍스트 항목 선택-드롭 다운 목록 버튼 - 입력 유형 = "제출"및 입력 유형 = "이미지"도 사용할 수 있지만 일반적으로 양식을 제출하는 데 사용됩니다.
• 또한:
CSS 스타일 가능성은 제한적이었다 날짜 및 컬러 피커와 같은 맞춤형 컨트롤은 코드로 개발해야했으며 클라이언트 측 유효성 검사 필수 JavaScript

추가 html5 입력 유형

새로운 입력 유형의 대홍수가 도입되었습니다. 이들은 JavaScript 코드없이 기본 입력 지원 및 검증을 제공합니다…

타입 설명 이메일 이메일 주소를 입력하십시오 텔 전화 번호 입력 - 엄격한 구문이 시행되지 않지만 라인 브레이크가 제거됩니다. URL URL을 입력하십시오 찾다 라인이 나오는 검색 필드가 자동으로 제거되었습니다 숫자 부동 소수점 번호 범위 일반적으로 슬라이더로 표시되는 대략적인 값을 입력하기위한 컨트롤 날짜 요일, 월 및 연도를 입력하십시오 DateTime 현재 UTC 타임 존을 기준으로 요일, 월, 연도, 시간, 분, 두 번째 및 마이크로 초를 입력하십시오. DateTime-local 시간대없이 날짜와 시간을 입력하십시오 월 시간대없이 달과 연도를 입력하십시오 주 시간대없이 일주일 번호를 입력하십시오 시간 시간대없이 시간을 입력하십시오 색상 색상을 지정하십시오 입력 속성 달리 명시되지 않는 한, 입력 필드는 다음 형식 별 속성을 가질 수 있습니다. 몇몇은 부울 속성, 즉 값이 필요하지 않습니다 (예 : 더 엄격한 XHTML 유사 구문을 선호하는 경우 추가 할 수 있지만 (예 :

<span><span><span><input</span> type<span>="email"</span> name<span>="email"</span> required /></span></span>

속성
설명

<span><span><span><input</span> type<span>="email"</span> name<span>="email"</span> required<span>="required"</span> /></span></span>

이름 입력 필드 이름 값 초기 값 확인 확인란 또는 무선 입력을 확인합니다 최대 길이 입력 된 문자열의 최대 길이. 이것은 HTML5의 Textarea Fields에도 적용될 수 있습니다. 미세한 길이 입력 된 문자열의 최소 길이. 이것은 문서화되어 있지만, 쓰기 시점에는 브라우저 지원이 좋지 않으며 속성으로 인해 HTML 유효성 검사기가 오류가 발생합니다. 대체 옵션은 Pattern = "입니다. {3,}입니다."적어도 세 문자를 시행 할 것입니다. 자리 표시 자 입력 상자에 표시된 미묘한 텍스트 힌트 자동 초점 페이지가로드 될 때이 (숨겨진) 필드에 초점을 맞추십시오. 필수의 값을 입력해야 함을 나타냅니다 무늬 값이 정규 표현식을 준수합니다 분 허용되는 최소값 (숫자 및 날짜 유형) 맥스 허용되는 최대 값 (숫자 및 날짜 유형) 단계 가치 세분성. 예를 들어, 입력 유형 = "숫자"min = "10"max = "19"step = "2"는 값 10, 12, 14, 16 또는 18 만 허용합니다. 자동 완성 브라우저에 자동 완성에 대한 힌트를 제공합니다 (예 : "청구 이메일"또는 "on"또는 "Off"로 설정하여 그에 따라 활성화하고 비활성화 할 수 있습니다. 입력 모드 입력 메커니즘을 지정합니다. 가장 유용한 옵션 :

verbatim-사용자 이름 와 같은 비 가용 컨텐츠 라틴 - 검색 필드와 같은 라틴어 스크립트 라틴 이름-이름, 즉 초기 편지 대문자 라틴어-메시지, 트윗 등과 같은 산문 내용 숫자 - 숫자 또는 범위가 적합하지 않은 숫자 입력 (예 : 신용 카드 번호

크기 텍스트 또는 비밀번호 입력 또는 이메일, 전화, URL 또는 검색 입력의 픽셀 크기. 스타일 필드에 CSS를 사용해야하므로 피하는 것이 가장 좋습니다. 줄 텍스트 행 수 (Textarea 만 해당) 콜스 텍스트 열 수 (Textarea 만 해당) 목록 정해진 데이터리스트 옵션을 가리 킵니다 맞춤법 검사 맞춤법 검사를 활성화하거나 비활성화하려면 true 또는 false로 설정 형태 이 입력이 속하는 형식의 ID. 일반적으로 입력은 양식 내부에 중첩되어야하지만이 속성은 입력을 페이지의 어느 곳에서나 정의 할 수 있습니다. 형성 제출시 양식 조치를 무시할 URI를 지정합니다 (버튼/이미지 제출 만 제출) 형태 메드 제출시 양식 메소드를 재정의하려면 GET 또는 POST를 지정합니다 (버튼/이미지 제출 만 제출) formenctype 제출시 콘텐츠 유형을 지정합니다 (텍스트/일반, 멀티 파트/양식 데이터 또는 응용 프로그램/x-www-form-urlencoded 제출 버튼/이미지 전용). Formtarget 제출할 때 양식 대상을 무시할 대상 창/프레임을 지정합니다 (버튼/이미지 제출 만 제출) 준비 적 입력 값은 검증 및 제출 되더라도 변경할 수 없습니다. 장애가 있는 입력 비활성화 - 유효성 검사가 발생하지 않으며 데이터가 제출되지 않습니다.
날짜 필드는 항상 value, min 및 max에 yyyy-mm-dd를 사용해야합니다. 속성.
다음 예제는 @mysite.com으로 끝나는 필수 이메일을 요청하며 페이지가로드 될 때 초점을 맞 춥니 다.

<span><span><span><input</span> type<span>="email"</span> name<span>="email"</span> required /></span></span>

Datalists

Datalist에는 모든 유형의 입력에 적합한 옵션 세트가 포함되어 있습니다 (예 :

<span><span><span><input</span> type<span>="email"</span> name<span>="email"</span> required<span>="required"</span> /></span></span>

Datalist가 지원되면 브라우저는 입력을 시작할 때 자동 완성 옵션을 제공합니다. 컨트롤을 두 번 클릭하거나 아래쪽 화살표를 클릭하면 전체 목록이 표시됩니다 (표시된 경우). 표준 선택 드롭 다운과 달리 사용자는 이러한 선택을 무시하고 자체 값을 입력 할 수 있습니다. 표준 선택 옵션과 같은 값과 텍스트를 설정할 수 있습니다 (예 :

<span><span><span><input</span>
</span></span><span>  <span>type<span>="email"</span>
</span></span><span>  <span>name<span>="login"</span>
</span></span><span>  <span>pattern<span>="@mysite\.com$"</span>
</span></span><span>  <span>autocomplete<span>="email"</span>
</span></span><span>  <span>autofocus
</span></span><span>  <span>required /></span></span>

그러나 구현이 다르다는 점에 유의하십시오. 예를 들어, Firefox는 텍스트 자체 (Internet Explorer)에 자동 완성되는 반면 Chrome은 값 (즉)을 선호하고 텍스트를 회색으로 표시합니다.

AJAX를 통해 옵션을 검색하려면 데이터리스트가 JavaScript로 채워질 수 있습니다. 유효성 검사 비활성화
양식 요소에 novalidate 속성을 설정하여 전체 양식에 대한 유효성 검사를 비활성화 할 수 있습니다. 또는 양식의 제출 버튼/이미지에 formNovalidate 속성을 설정할 수 있습니다. 입력의 비활성화 속성을 설정하면 해당 필드의 유효성 검사를 방지합니다. 출력 필드 우리는 주로 입력 유형에 대해 논의하고 있지만 HTML5는 읽기 전용 출력 옵션도 제공합니다.

출력 - 계산 또는 사용자 조치 결과 진행 - 진행률 표시 줄 (값 및 최대 속성은 상태를 정의합니다) meter - 속성 값, 최소, 최대, 높음, 높고 최적 및 최적 의 값에 따라 녹색, 호박 및 빨간색으로 변경 될 수있는 스케일

입력 분리 및 라벨링 Whatwg.org 양식 사양은 다음과 같습니다. 형식의 각 부분은 단락으로 간주되며 일반적으로

요소 를 사용하여 다른 부분과 분리됩니다. 흥미로운. 나는 의미 론적 관점에서 중요하다고 의심하지만 나는 일반적으로 div를 사용합니다. 마진을 수정하기 위해 클래스를 적용해야하지만 P 태그는 짧습니다. 더 중요한 것은 입력의 ID를 명시하는 특성과 함께 입력 자체 또는 옆에 레이블 요소를 사용해야한다는 것입니다.

표준 컨트롤 없음 브라우저 공급 업체가 따라야 할 특정 인터페이스 지침이 없습니다. 이는 의도적입니다. 일반적인 데스크톱 마우스 제어 날짜 선택기는 모바일 장치에서 너무 작아서 공급 업체가 터치 기반 대안을 구현할 수 있습니다. 브라우저 지원 모든 입력 유형과 속성이 모든 브라우저에서 지원되는 것은 아닙니다. 일반적으로 IE10의 대부분의 최신 브라우저에는 이메일 및 번호와 같은 기본 사항이 포함됩니다. 그러나 날짜 유형은 작성 당시 WebKit 및 Blink 브라우저에서만 지원됩니다. 브라우저는 특정 유형이있을 때 표준 텍스트 입력으로 되돌리고 해당 값이 지원되지 않을 때 속성을 무시합니다. 항상 올바른 유형을 사용하십시오! 요청하는 데이터의 올바른 입력 유형을 사용하는 것이 중요합니다. 그것은 분명해 보일지 모르지만 표준 텍스트 입력을 사용하려는 유혹을받을 때 상황을 만나게됩니다. 날짜를 고려하십시오. 지원은 고르고 구현 문제로 이어집니다.

표준 날짜 입력은 날짜 선택기가 로케일에 표시되는 방법에 관계없이 항상 yyyy-mm-dd 형식으로 날짜를 반환합니다.

즉, Firefox는 표준 텍스트 입력으로 돌아가지만 사용자는 US MM-DD-Yyyy 또는 European DD-MM-Yyyy 형식에 값을 입력 할 것으로 예상 할 수 있습니다.
jQuery UI의 One과 같은 JavaScript 날짜 선택기는 사용자 정의 형식을 정의 할 수 있습니다. 쉬운 해결책은 HTML5 날짜 입력을 포기하고 텍스트로 되돌리고 자신의 날짜 제어를 구현하는 것입니다. 하지 않다. 모든 화면 해상도에서 모든 장치에서 작동하고 키보드, 마우스 및 터치 입력을 지원하며 JavaScript가 비활성화 될 때 계속 작동하는 사용자 정의 날짜 선택기를 만들지 않습니다. 특히, 모바일 브라우저는 종종 데스크탑 사촌보다 앞서 있으며 우수한 터치 스크린 컨트롤을 구현합니다. HTML5 입력 유형이 미래입니다. 그것들을 사용하고 필요한 경우 좋은 크로스 브라우저 지원이 필요한 상황에서 JavaScript Polyfills를 추가하십시오. 하지만 잊지 말아야합니다. 서버 측 를 확인하십시오 브라우저 검증은 보장되지 않습니다. 모든 사람이 최신 버전의 Chrome을 사용하여 액세스하도록 강요하더라도 다음을 방지 할 수 없습니다.

브라우저 버그 또는 JavaScript 실패로 유효하지 않은 데이터가 허용됩니다 브라우저 도구를 사용하여 HTML 또는 스크립트를 변경하는 사용자 컨트롤 이외의 시스템에서 제출 또는 브라우저와 서버 간의 데이터 차단 (확실히 HTTP를 통해).

클라이언트 측 유효성 검사에는 서버 측 유효성 검사를 대체 할 수 없습니다. 서버에서 사용자 데이터를 확인하는 것이 필수적입니다. 클라이언트에서는
• 좋은 입니다. 마지막으로, 날짜는 yyyy-mm-dd 또는 사용자에게 지정한 형식 (mm-dd-yyyy, dd-mm-yyyy 등)에서 수신 될 수 있습니다. 처음 네 문자의 숫자를 확인하거나 모국어를 사용하십시오. 필요한 경우 프레임 워크 날짜 구문 분석 방법. 우리는이 기사에서 많이 다루었습니다. 다음 부분에서는 양식 관련 CSS 속성을 살펴 봅니다. html5에 대한 자주 묻는 질문 (FAQS)은 입니다 폼 마크 업에서 html5를 사용하는 것의 중요성은 무엇입니까?
html5는 폼 필링에 더 나은 사용자 경험을 제공하는 다양한 새로운 입력 유형과 속성을 소개합니다. 이 새로운 기능을 사용하면 이메일, 날짜 및 시간과 같은보다 구체적인 입력 유형을 허용하여 브라우저 자체에서 검증 할 수있어 추가 자바 스크립트가 필요합니다. 이로 인해 더 깨끗하고 효율적인 코드와 더 부드러운 사용자 경험이 생깁니다.
• HTML5는 양식 마크 업의 접근성을 어떻게 향상 시키는가?
• HTML5는 접근성을 향상시키는 몇 가지 기능을 제공합니다. 예를 들어, "필수"속성을 사용하여 필수 필드가 채워질 수 있습니다. "자리 표시 자"속성은 필드에서 예상되는 정보 유형에 대해 사용자에게 힌트를 제공 할 수 있습니다. 또한 "자동 초점"속성은 페이지가로드 될 때 특정 입력 필드에 커서를 자동으로 초점을 맞출 수 있으며, 사용자와 양식과의 상호 작용을 안내합니다. 폼 마크 업에 html5를 사용할 때 피해야 할 몇 가지 일반적인 실수는 무엇입니까?

  한 가지 일반적인 실수는 html5에 도입 된 새로운 입력 유형과 속성을 사용하는 것이 올바르게 사용되지 않는 것입니다. 예를 들어, 잘못된 입력 유형을 사용하면 잘못된 데이터가 제출 될 수 있습니다. 또 다른 실수는 HTML5를 지원하지 않는 이전 브라우저에 적절한 폴백을 제공하지 않습니다. 이로 인해 구형 기술을 사용하는 사람들에게는 사용자 경험이 좋지 않을 수 있습니다.

  html5를 사용하여 더 많은 대화식 양식을 만들 수 있습니까?

  HTML5는 더 많은 새로운 양식 요소를 소개합니다. 대화식 형태. 예를 들어, "Datalist"요소는 입력 필드에 대한 드롭 다운 옵션 목록을 작성하는 데 사용할 수 있으며 "진행"및 "미터"요소는 작업의 진행 상황 또는 현재 값을 시각적으로 나타내는 데 사용될 수 있습니다. 각각 알려진 범위.
  html5 양식 검증을 어떻게 처리합니까?

  html5는 특정 속성을 사용하여 내장 양식 검증을 도입합니다. 예를 들어, "필수"속성은 필드가 비어 있지 않도록하는 데 사용될 수 있으며, "패턴"속성을 사용하여 입력 필드의 값이 일치 해야하는 정규 표현식을 지정할 수 있습니다. 입력이 이러한 기준을 충족하지 않으면 양식이 제출되지 않으며 사용자는 입력을 수정하라는 메시지가 표시됩니다.

  HTML5에서 시맨틱 요소를 사용하면 어떤 이점이 있습니까? HTML5의 요소는 그 내부에 포함 된 컨텐츠 유형에 대한 명확한 표시를 제공하므로 개발자와 기계 (검색 엔진과 같은) 모두가 웹 페이지. 검색 엔진 최적화 및 접근성을 향상시킬 수 있습니다.

  HTML5 양식이 이전 브라우저와 호환되는 방법은 무엇입니까?

  HTML5는 최신 브라우저에서 널리 지원되지만 이전에 낙하산을 제공하는 것이 중요합니다. 모든 HTML5 기능을 지원하지 않는 브라우저. 이 작업은 JavaScript를 사용하여 브라우저가 특정 기능을 지원하는지 여부를 감지하고 그렇지 않은 경우 대체 구현을 제공하여 수행 할 수 있습니다.

  HTML5를 사용하여 내 양식의 모바일 경험을 향상시키는 방법?

  HTML5는 모바일 형태의 모바일 경험을 향상시킬 수있는 몇 가지 기능을 소개합니다. 예를 들어, "자동 초점"속성은 페이지가로드 될 때 특정 입력 필드에 커서를 자동으로 초점을 맞추는 데 사용하여 사용자가 수동으로 필드를 탭해야합니다. 또한 "이메일"및 "전화"와 같은 새로운 입력 유형은 모바일 장치에서 특수 키보드를 가져 오므로 사용자가 올바른 유형의 데이터를 쉽게 입력 할 수 있습니다. html5에서 웹 양식을 구성하기위한 몇 가지 모범 사례는 무엇입니까?

  html5에서 웹 양식을 구성하기위한 일부 모범 사례에는“Fieldset”요소를 사용하여 관련 양식 컨트롤을 그룹화하여 모든 양식에 대한 설명 레이블을 제공합니다. "레이블"요소를 사용하고 "범례"요소를 사용하여 각 "필드 셋"에 대한 캡션을 제공합니다. 또한 데이터의 유효성을 보장하고 사용자 경험을 향상시키기 위해 적절한 입력 유형과 속성을 사용하는 것이 중요합니다.

  CSS를 사용하여 HTML5 양식을 스타일링하는 방법은 무엇입니까?

  CSS는 스타일에 사용될 수 있습니다. HTML5는 다양한 방식으로 형성됩니다. 예를 들어 CSS를 사용하여 양식 요소의 색상, 크기 및 글꼴을 변경하고 경계 및 배경을 추가하고 호버 효과를 적용 할 수 있습니다. 또한 CSS는 양식 컨트롤 및 레이블 정렬 및 다중 열 양식 생성과 같은 형태 요소의 레이아웃을 제어하는 ​​데 사용될 수 있습니다.

위 내용은 HTML5 양식 : 마크 업의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!