简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > H5 튜토리얼 > 본문

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

寻∝梦
풀어 주다： 2018-08-13 19:00:09
원래의
5607명이 탐색했습니다.

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 검색 등의 검색 필드에 사용됩니다.

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

사용자 입력 양식 정의

입력 영역 정의