html5의 새로운 양식 요소 유형은 무엇입니까?

HTML5의 새로운 양식 요소 유형은 다음과 같습니다. 1. 이메일 유형 3. 숫자 유형 5. 날짜 선택기 유형(날짜, 월, 주, 시간 등) , 검색 유형, 7. 색상 유형, 8. 전화 유형.

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

HTML 양식은 다양한 유형의 사용자 입력을 수집하는 데 사용됩니다. HTML 양식에서 요소는 가장 중요한 양식 요소입니다. 요소에는 다양한 유형 속성에 따라 원본 HTML 양식의 유형 유형에는 텍스트, 비밀번호, 라디오, 제출 등이 포함됩니다. 새로운 HTML5에는 여러 가지 새로운 양식 입력 유형이 있습니다. 이 새로운 기능은 더 나은 입력 제어 및 검증을 제공합니다.

이 문서에서는 다음과 같은 새로운 양식 요소 입력 유형을 소개합니다.

• email
• url
• number
• range
• 날짜 선택기(날짜, 월, 주, 시간, 날짜/시간, 날짜/시간-로컬)
• search
• color
• tel

email type

type 속성이 email로 설정되면 양식을 제출할 때 이메일 필드의 값이 이메일의 표준 형식을 준수하는지 자동으로 확인하므로 더 이상 직접 정규식을 사용해야 합니다. 이메일 형식을 확인하러 갔습니다.

Example

Email：<input type="email" name="useremail" />

url type

type 속성을 url로 설정하면 양식이 제출될 때 url 필드의 값이 url의 표준 형식을 따르는지 자동으로 확인합니다.

Example

Linkpage:<input type="url" name="link_url" />

Number type

type 속성을 number로 설정하면 입력 내용이 숫자 유형인지 자동으로 확인합니다. 입력 상자의 개수 제한도 설정할 수 있습니다.

Example

Number：<input type="number" name="user_num" min="1" max="10" />

숫자로 한정된 속성의 경우:

의 최소값

Property	Description
max	허용되는 최대값을 지정합니다
min	허용되는 항목을 지정합니다.
step	적법한 숫자 간격을 지정합니다(step="3"인 경우 법적 숫자는 -3,0,3,6 등입니다.)
value	기본값을 지정합니다
비활성화	입력 필드가 비활성화되도록 지정합니다.
maxlength	입력 필드의 최대 문자 길이를 지정합니다.
pattern	입력 필드의 유효성을 검사하는 데 사용되는 패턴을 지정합니다.
readonly	지정합니다. 입력 필드의 값을 수정할 수 없습니다
required	입력 필드의 값이 필수임을 지정합니다
size	입력 필드의 표시되는 문자를 지정합니다

범위 유형

범위 유형은 특정 범위 내의 숫자 값을 포함해야 하는 입력 필드에 사용됩니다. 범위 유형은 슬라이더로 표시됩니다. 허용되는 숫자에 대한 제한을 설정할 수도 있습니다.

Example

<input type="range" name="user_range" min="1" max="10" />

숫자를 한정하는 데 사용되는 속성은 숫자 유형의 처음 4개와 동일합니다.

날짜 선택기 날짜 선택기 유형

은 날짜와 시간을 선택하는 데 사용됩니다.

Example

Date：<input type="date" name="user_date" />

날짜 및 시간 선택 입력 유형:

• date 일, 월, 연도 선택
• month 월, 연도 선택
• week 주, 연도 선택
• time 시간(시, 분) 선택
• datetime은 시간, 일, 월, 연도(UTC 시간, 시간대)를 선택합니다.
• datetime-local은 시간, 일, 월, 연도(현지 시간)를 선택합니다.

검색 유형

은 사이트 검색 등 검색 필드에 사용됩니다. 또는 Google 검색(검색 필드는 일반 텍스트 필드처럼 작동함)

Example

Search Google:<input type="search" name="googlesearch">

color type

type 속성을 color로 설정하면 입력 내용이 컬러 형식인지 자동으로 확인합니다.

Example

Select your favorite color:<input type="color" name="favcolor">

tel type

type 속성을 tel로 설정하면 입력 내용이 전화번호 형식인지 자동으로 확인합니다.

예

Telephone:<input type="tel" name="usrtel">

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

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