HTML5의 양식-H5 튜토리얼-php.cn

HTML4에 비해 HTML5의 요소와 기능은 더 높은 수준의 의미적 마크업을 제공하고 스크립트와 스타일로 인해 HTML4에 존재하는 중복 요소를 많이 제거합니다. HTML5 양식 기능은 다양한 웹사이트에서 양식이 보다 일관되게 작동하도록 하고 사용자 입력 데이터에 적시에 응답함으로써 사용자에게 더 나은 경험을 제공합니다. 이러한 경험은 브라우저 스크립팅을 비활성화한 사용자에게도 적용됩니다.

이 항목에서는 Gecko/Firefox4 이상에서 지원되는 몇 가지 새로운 기능이나 변경 사항에 대해 설명합니다.

요소의 유형 속성에는 더 많은 값이 있습니다.

search: 이 요소는 검색 상자를 렌더링합니다. 개행 문자는 입력 값에서 제거되지만 다른 구문 개선 사항은 없습니다.

tel: 이 요소는 전화번호 편집을 위한 입력 컨트롤로 사용할 수 있습니다. 전화번호 국제화 차이가 매우 명백하기 때문에 입력 값에서 개행 문자가 제거되고 기타 구문 개선이 이루어지지 않습니다. 패턴, 최대 길이 등의 속성을 사용하여 컨트롤에 입력되는 값을 제한할 수 있습니다.

url: 이 요소는 URL 편집을 위한 입력 컨트롤을 렌더링합니다. 줄 바꿈과 선행 및 후행 공백은 자동으로 제거됩니다.

email: 이 요소는 이메일 주소를 렌더링합니다. 줄바꿈은 자동으로 제거됩니다. 잘못된 이메일 주소 설정이 가능하지만, 입력 상자의 제약 조건을 충족하는 경우 ABNF(Extended Backus Normal Form)의 사양을 준수해야 합니다: 1( atext / "." ) "@" ldh-str 1( "." ldh-str ) 여기서 atext는 RFC 5322 섹션 3.2.3에 정의되어 있고 ldh-str은 RFC 1034 섹션 3.5에 정의되어 있습니다. .

참고: 다중 속성이 설정된 경우 영역에 여러 개의 이메일을 쉼표로 구분하여 입력할 수 있지만 Firefox에서는 이를 지원하지 않습니다. .

list: 요소의 ID, 요소의 내용,

패턴: 컨트롤의 값을 확인하는 데 사용되는 정규식으로, 유형 값이 text, tel, search, url, email인 입력 요소에 적용할 수 있습니다.

form: 이 입력이 속한

요소를 나타내는 문자열입니다. 입력은 하나의 형식으로만 존재할 수 있습니다.

formmethod: 양식이 제출될 때 사용할 HTTP 메소드(GET 또는 POST)를 나타내는 문자열입니다. 정의된 경우 요소의 메소드 속성을 재정의할 수 있습니다. formmethod는 유형 값이 image 또는 submit이고 form 속성이 설정된 경우에만 적용됩니다.

x-moz-errormessage: 양식 필드 유효성 검사가 실패할 때 오류 메시지를 표시하는 문자열입니다. 이 값은 Mozilla 확장이며 표준이 아닙니다.

요소에는

novalidate라는 새로운 기능이 있습니다. 이 기능을 설정하면 양식이 제출되기 전에 유효성이 검사되지 않습니다.

요소는 필드를 채울 때

요소의 목록 속성을 사용하여 특정 입력을 특정 요소와 연결할 수 있습니다.

요소

요소는 계산 결과를 나타냅니다.

for 속성을 사용하여 요소를 작업에 영향을 미치는 문서의 다른 요소(예: 입력 또는 매개변수)와 연결할 수 있습니다. for 속성의 값은 공백으로 구분된 다른 요소의 ID 목록입니다.

Gecko 2.0(다른 브라우저의 경우는 해당되지 않음)은 요소에 대한 유효성 제약 조건 및 오류 메시지 사용자 정의를 지원합니다: :invalid, :valid, :-moz. -ui-invalid 및 :-moz-ui-valid. 이는 계산 결과가 비즈니스 규칙을 위반하지만 특정 입력 값의 오류로 인한 것이 아닌 경우에 유용할 수 있습니다(예: "총 백분율이 100을 초과할 수 없습니다").

placeholder 속성

placeholder 속성은 및 요소에서 작동하며 이 필드에 입력할 수 있는 콘텐츠를 사용자에게 알려줍니다. 자리 표시자의 텍스트에는 캐리지 리턴 및 줄 바꿈을 포함할 수 없습니다. </p> <p>autofocus 속성 </p> <p>autofocus 속성을 사용하면 사용자가 다른 컨트롤에 값을 입력하는 등의 방법으로 재정의하지 않는 한 페이지가 로드될 때 자동으로 포커스를 받는 양식 컨트롤을 지정할 수 있습니다. 문서 내에서 하나의 양식만 부울 값인 autofocus 속성을 가질 수 있습니다. 이 속성은 <input>, <button>, <select> 및 <textarea> 요소에 적용됩니다. 예외적으로 자동 초점 요소의 유형 속성 값이 숨김으로 설정된 경우 자동 초점이 적용되지 않습니다. 즉, 숨겨진 컨트롤이 자동으로 초점을 얻도록 할 수 없습니다.

label.control DOM 속성

HTMLLabelElement DOM 인터페이스는 요소에 해당하는 속성 외에 추가 속성을 제공합니다. 컨트롤 속성은 for 속성(정의된 경우) 또는 첫 번째 하위 요소 컨트롤에 의해 결정된 대로 레이블이 적용되는 컨트롤인 레이블이 지정된 컨트롤을 반환합니다.

제약조건 유효성 검사

HTML5는 클라이언트측 양식 유효성 검사를 위한 구문과 API를 제공합니다. 물론 이러한 기능은 보안 및 데이터 무결성을 위해 여전히 필요한 서버 측 유효성 검사를 대체할 수는 없지만 클라이언트 측 유효성 검사는 입력 데이터에 대한 즉각적인 피드백을 통해 좋은 사용자 경험을 제공할 수 있습니다.

제목 속성으로 요소를 설정한 경우 유효성 검사에 실패하면 프롬프트 메시지에 속성 값이 표시됩니다. 제목이 빈 문자열로 설정된 경우 프롬프트 메시지가 표시되지 않습니다. title 속성이 설정되지 않은 경우 표준 유효성 검사 정보(예: x-moz-errormessage 속성을 통해 지정되거나 setCustomValidity() 메서드 호출 등)가 대신 표시됩니다.

참고: 제약 조건 유효성 검사는 양식의