HTML5 새로운 양식 요소

HTML5 새 양식 요소

먼저 새로운 기능에 대해 이야기하겠습니다.

HTML5에는 다음과 같은 새 양식 요소가 있습니다.

< datalist>

참고: 모든 브라우저가 새로운 HTML5 양식 요소를 지원하는 것은 아니지만 사용할 수 있습니다. 양식 속성을 지원하지 않지만 여전히 일반 양식 요소로 표시될 수 있습니다.

다음으로 하나씩 소개하겠습니다:

HTML5 <datalist> 요소

<datalist> 입력 도메인에 대한 옵션 목록입니다.

<datalist> 속성은 양식 또는 입력 필드에 자동 완성 기능이 있어야 함을 지정합니다. 사용자가 자동 완성 필드에 입력을 시작하면 브라우저는 해당 필드에 채워진 옵션을 표시해야 합니다.

<input> 요소의 목록 속성을 사용하여 <datalist> 요소를 바인딩합니다.

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>
<form action="demo-form.php" method="get">
<input list="phone" name="phone">
<datalist id="phone">
  <option value="huawei">
  <option value="oppo">
  <option value="vivo">
  <option value="iphone">
  <option value="sony">
</datalist>
<input type="submit">
</form>
<p><strong>注意:</strong> Internet Explorer 9（更早IE版本），Safari不支持 datalist 标签。</p>
</body>
</html>

HTML5 <keygen> 요소

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

<keygen> 태그는 양식에 사용할 키 쌍 생성 필드를 지정합니다.

양식을 제출하면 두 개의 키가 생성됩니다. 하나는 개인 키이고 다른 하나는 공개 키입니다.

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">  
</head>
<body>
<form action="demo_keygen.php" method="get">
  用户名: <input type="text" name="usr_name">
  加密: <keygen name="security">
  <input type="submit">
</form>
<p><strong>注意:</strong> Internet Explorer 不支持 keygen 标签。</p>
</body>
</html>

속성 값 설명

자동 초점이 비활성화되면 페이지가 로드될 때 keygen 필드에 초점이 맞춰집니다.

챌린지 챌린지를 사용하는 경우 제출 시 물어볼 키젠 값을 설정합니다. ~ ~ ol

양식 양식 이름 keygen 필드의 하나 이상의 양식을 정의합니다. ~ rsa는 RSA 키를 생성합니다.

name Fieldname은 keygen 요소의 유일한 이름을 정의합니다.

~ 이름 속성은 양식을 제출할 때 필드 값을 수집하는 데 사용됩니다.

HTML5 <output> 요소

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">  
</head>
<body>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
<p><strong>注意:</strong>  Internet Explorer 不支持 output 标签。</p>
</body>
</html>

new : HTML5의 새로운 속성입니다. 속성 하나 이상의 도메인 관련 요소.

양식 Form_id 입력 필드의 하나 이상의 양식을 정의합니다.

이름 > . (양식 제출 시 사용)

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <form action="demo-form.php" method="get"> <input list="phone" name="phone"> <datalist id="phone"> <option value="huawei"> <option value="oppo"> <option value="vivo"> <option value="iphone"> <option value="sony"> </datalist> <input type="submit"> </form> <p><strong>注意:</strong> Internet Explorer 9（更早IE版本），Safari不支持 datalist 标签。</p> </body> </html>

제출하다 코드 재설정

자동운전