HTML5 새로운 양식 요소

이 장에서는 다음과 같은 새로운 양식 요소를 소개합니다.

•datalist
•keygen
•output

브라우저 지원


입력 유형 IE Firefox Opera Chrome Safari


datalist No 9.5 No

keygen 10.5 3.0 No

output No 9.5 No No


datalist 요소
datalist 요소는 입력 필드에 대한 옵션 목록을 지정합니다.
목록은 datalist 내의 옵션 요소를 통해 생성됩니다.
데이터 목록을 입력 필드에 바인딩해야 하는 경우 입력 필드의 목록 속성을 사용하여 데이터 목록의 ID를 참조하세요.
코드는 다음과 같습니다.

웹페이지: <input type="url" list="url_list" name="link" />
<datalist id="url_list"> option label="W3School" value="http ://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" /> ;
<option label=" Microsoft" value="http://www.microsoft.com" />
</datalist>

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


keygen 요소 keygen 요소의 역할은 신뢰할 수 있는 사용자 인증 방법을 제공하는 것입니다. keygen 요소는 키 쌍 ​​생성기입니다. 양식이 제출되면 두 개의 키가 생성됩니다. 하나는 개인 키이고 다른 하나는 공개 키입니다. 개인 키는 클라이언트에 저장되고, 공개 키는 서버로 전송됩니다. 공개 키는 나중에 사용자의 클라이언트 인증서를 확인하는 데 사용될 수 있습니다. 현재 이 요소에 대한 브라우저 지원은 유용한 보안 표준이 될 만큼 열악합니다.
코드는 다음과 같습니다.


<form action="demo_form.asp" method="get">
사용자 이름: <input type="text" name="usr_name" />암호화: < ;keygen name="security" />
<input type="submit" />
</form>

출력 요소

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


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


예:

rrreerrree

지속적인 학습
||
<!doctype html> <html> <head>  <meta charset="utf-8">  <title>php.cn</title>  </head> <body> <p>浏览器版本:<input list="words"></p> <datalist id="words"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> <option value="Sogou"> <option value="Maxthon"> </datalist> </body> </html>
  • 코스 추천
  • 코스웨어 다운로드
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~