HTML5에서 일반적으로 사용되는 새로운 양식 요소는 무엇입니까? 첨부된 사용 예시

HTML5는 이제 점점 인기를 얻고 있습니다. 많은 사람들이 HTML5를 배우고 싶어하지만 HTML5에는 이전 버전보다 더 많은 새로운 양식 요소가 있습니다. HTML5에서 일반적으로 사용되는 새로운 양식 요소는 무엇입니까? 어떻게 사용되나요?

이 장에서는 다음과 같은 새로운 양식 요소를 소개합니다: datalist; keygen; output

datalist 요소:

datalist 요소는 입력 필드에 대한 옵션 목록을 지정합니다.

목록은 데이터 목록 내의 옵션 요소를 통해 생성됩니다.

데이터 목록을 입력 필드에 바인딩해야 하는 경우 입력 필드의 목록 속성을 사용하여 데이터 목록의 ID를 참조하세요.

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="php中文网" value="http://www.php.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

팁: 옵션 요소는 항상 값 속성을 설정해야 합니다.

keygen 요소:

keygen 요소의 목적은 사용자를 인증하는 안정적인 방법을 제공하는 것입니다.

keygen 요소는 키 쌍 ​​생성기입니다. 양식이 제출되면 두 개의 키가 생성됩니다. 하나는 개인 키이고 다른 하나는 공개 키입니다.

개인 키는 클라이언트에 저장되고, 공개 키는 서버로 전송됩니다. 공개 키는 나중에 사용자의 클라이언트 인증서를 확인하는 데 사용될 수 있습니다.

현재 이 요소에 대한 브라우저 지원은 유용한 보안 표준이 될 만큼 열악합니다.

<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

output 요소:

output 요소는 계산 또는 스크립트 출력과 같은 다양한 유형의 출력에 사용됩니다.

<output id="result" onforminput="resCalc()"></output>

입력 유형:

HTML5에는 몇 가지 새로운 양식 입력 유형이 있습니다. 이러한 새로운 기능은 더 나은 입력 제어 및 검증을 제공합니다.

1.입력 유형 - 이메일

이메일 유형은 이메일 주소를 포함해야 하는 입력 필드에 사용됩니다. 양식을 제출하면 이메일 필드의 값이 자동으로 확인됩니다.

2.입력 유형 - url

url 유형은 URL 주소를 포함해야 하는 입력 필드에 사용됩니다. 양식을 제출하면 URL 필드의 값이 자동으로 확인됩니다.

3.입력 유형 - 숫자

숫자 유형은 숫자 값을 포함해야 하는 입력 필드에 사용됩니다. 허용되는 숫자에 대한 제한을 설정할 수도 있습니다.

4.입력 유형 - 범위

범위 유형은 특정 범위 내의 숫자 값을 포함해야 하는 입력 필드에 사용됩니다.

범위 유형은 슬라이더로 표시됩니다.

허용되는 숫자에 제한을 설정할 수도 있습니다.

5.입력 유형 - 날짜 선택기

HTML5에는 날짜와 시간을 선택하기 위한 몇 가지 새로운 입력 유형이 있습니다.

date - 일, 월, 연도 선택

month - 월, 연도 선택

week - 주 및 연도 선택

time - 시간(시간 및 분) 선택

datetime - 시간, 일, 월, 연도 선택(UTC 시간)

datetime-local - 시간, 요일 선택 , 월, 연도(현지 시간)

6.입력 유형 - 검색

검색 유형은 사이트 검색이나 Google 검색 등의 검색 필드에 사용됩니다.

검색 필드가 일반 텍스트 필드로 나타납니다.

0c945a705a4b178ccb441b450b6f45aa

ff9c23ada1bcecdd1a0fb5d5a0f18437 사용자 입력 양식 정의

d5fd7aea971a85678ba271703566ebfd 입력 영역 정의

4750256ae76b6b9d804861d8f69e79d3 )

2e1cf0710519d5598b1f0f14c36ba674 컨트롤 라벨 정의

e911751791aa3ba95dc724e2fb905976 도메인 제목 정의

5b7a15bed8615d1b843806256bebea72 옵션 그룹

5a07473c87748fb1bf73f23d45547ab8드롭다운 목록에서 옵션 정의

bb9345e55eb71822850ff156dfde57c8버튼 정의

[관련 기사]

HTML 및 HTML5의 개발 역사

기본 요소 html로 HTML을 처음부터 배울 수 있습니다

위 내용은 HTML5에서 일반적으로 사용되는 새로운 양식 요소는 무엇입니까? 첨부된 사용 예시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!