>  기사  >  웹 프론트엔드  >  HTML5 양식의 새로운 기능은 무엇입니까?

HTML5 양식의 새로운 기능은 무엇입니까?

青灯夜游
青灯夜游원래의
2021-12-17 14:01:523022검색

HTML5 양식의 새로운 기능은 다음과 같습니다. 1. 새로운 입력 유형 값(이메일, URL, 번호, 전화번호, 색상, 날짜 등) 2. 새로운 양식 요소 속성(자리 표시자, 자동 초점, 양식, 최소값, 최대, 패턴) 잠깐).

HTML5 양식의 새로운 기능은 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.

H5의 새로운 양식 기능은 크게 두 가지 범주로 나눌 수 있습니다.

1. 10개의 입력 값을 입력하세요

1. 이메일: 이메일 입력 필드로, 양식 제출 시 간단한 이메일 형식 확인 기능을 제공하며 프롬프트 창이 나타납니다.

2. url: 주소 입력 필드로, 간단한 URL 주소 형식 확인 기능을 제공하며 양식 제출 시 프롬프트 창이 나타납니다.

3. 숫자: 숫자 입력 필드입니다. (최소, 최대, 단계 설정 가능)

4. tel: 전화번호 입력란, 모바일 브라우저에 숫자 입력란이 뜹니다.

5. 검색: 검색 입력란, 모바일 브라우저 오른쪽 하단에 검색 버튼이 나타납니다.

6. 범위: 범위 선택 제어.

7. 색상: 색상 선택 제어.

8. 날짜/월/주: 시간 선택 제어.

2. 양식 요소의 11가지 새로운 속성

1. 자동 완성: 다음 입력 제안을 위해 이전에 제출된 데이터를 자동으로 기록할지 여부.

2. 자리 표시자: 입력 상자에 정보 텍스트를 표시하는 데 사용됩니다. 값과 달리 제출할 수 없습니다.

3. 자동 초점: 입력 초점을 자동으로 얻습니다.

4. 다중: 다중 입력 값 허용 여부. 이 속성을 선언하면 입력 상자에 쉼표로 구분된 다중 값을 입력할 수 있습니다.

5. 양식: 값은 양식의 ID입니다. 설정하면 입력 필드를 양식 외부에 배치할 수 있습니다.

6. 필수: 양식이 제출되면 입력이 있는지 확인합니다. 그렇지 않은 경우 프롬프트 메시지가 나타납니다.

7. maxlength: 최대 길이를 제한합니다. 입력이 있을 때만 유용합니다. 중국어와 영어를 구분하지 않습니다.

7.5, minlength: 최소 길이를 제한하지만 H5 표준 속성이 아니며 일부 브라우저에서만 지원됩니다.

8. min: 입력 숫자의 최소값을 제한합니다.

9.max: 입력 개수의 최대값을 제한합니다.

10. step: min과 함께 사용되는 입력 숫자의 단계 크기를 제한합니다.

11. 패턴: 정규식을 지정하여 입력을 확인합니다. (정규식의 경우 기본적으로 ^$를 시작과 끝 부분에 추가하세요)

관련 추천: "html 비디오 튜토리얼"

위 내용은 HTML5 양식의 새로운 기능은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.