HTML5 양식 : 마크 업-JS 튜토리얼-php.cn

HTML5 양식 : 마크 업 키 테이크 아웃

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

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

를 볼 수 없습니다 입력 유형 = "파일" - 업로드 textarea - 더 긴 텍스트 항목 선택-드롭 다운 목록 버튼 - 입력 유형 = "제출"및 입력 유형 = "이미지"도 사용할 수 있지만 일반적으로 양식을 제출하는 데 사용됩니다.
또한:

날짜 및 컬러 피커와 같은 맞춤형 컨트롤은 코드로 개발해야했으며 클라이언트 측 유효성 검사 필수 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은 값 (즉)을 선호하고 텍스트를 회색으로 표시합니다.

HTML5 양식 : 마크 업

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