집 > 기사 > 웹 프론트엔드 > HTML5의 양식 요소

HTML5의 양식 요소

黄舟원래의: 2016-12-22 15:23:511268검색

HTML 5의 새로운 양식 요소: HTML 5에는 양식과 관련된 여러 요소와 속성이 있습니다.

이 장에서는 datalist, keygen 및 출력과 같은 새로운 양식 요소를 소개합니다.

HTML5의 양식 요소

datalist 요소

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

데이터 목록 내 옵션 요소를 통해 목록이 생성됩니다. 데이터 목록을 입력 필드에 바인딩해야 하는 경우 입력 필드의 목록 속성을 사용하여 데이터 목록의 ID를 참조하세요. 예:

<!DOCTYPE HTML>
<html>
<body>
<form action="demo_form.php" method="get">
  <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>
  <input type="submit" />
</form>
</body>
</html>

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

keygen 요소

keygen 요소의 역할은 신뢰할 수 있는 사용자 인증 방법을 제공하는 것입니다.

keygen 요소는 키 쌍 생성기입니다. 양식이 제출되면 두 개의 키가 생성됩니다. 하나는 개인 키이고 다른 하나는 공개 키입니다. 개인 키는 클라이언트에 저장되고 공개 키는 서버로 전송됩니다. 공개 키는 나중에 사용자의 클라이언트 인증서를 확인하는 데 사용될 수 있습니다.

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

예:

<!DOCTYPE HTML>
<html>
<body>
<form action="demo_form.php" method="get">  Username:
  <input type="text" name="usr_name" />
  Encryption:
  <keygen name="security" />
  <input type="submit" />
</form>
</body>
</html>

출력 요소

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

예:

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript"> 
function resCalc() { 
numA=document.getElementById("num_a").value; 
numB=document.getElementById("num_b").value; 
document.getElementById("result").value=Number(numA)+Number(numB); 
} 
</script>
</head>
<body>
<p>使用output 元素的简易计算器：</p>
<form onsubmit="return false">
  <input id="num_a" />
  +
  <input id="num_b" />
  =
  <output id="result" onforminput="resCalc()"></output>
</form>
</body>
</html>

위 내용은 HTML5의 form 요소 내용이며, 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고하시기 바랍니다. !

성명：

이전 기사：HTML5의 이벤트 속성다음 기사：HTML5의 이벤트 속성

HTML5의 양식 요소

관련 기사