HTML5 새로운 양식 요소

HTML5 새 양식 요소

<datalist>
< ;
<output>

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

<datalist> 요소

<datalist> .

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

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

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="" method="get">
    <input list="fruits" name="fruit">
    <datalist id="fruits">
        <option value="苹果">
        <option value="香蕉">
        <option value="柚子">
        <option value="橙子">
        <option value="梨子">
    </datalist>
    <input type="submit">
</form>
</body>
</html>

프로그램을 실행하고 사용해 보세요

<keygen> 요소

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

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

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

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

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

프로그램을 편집기에 넣고 로컬에서 프로그램을 실행해 보세요

<output> Elements

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

의 예는 <에 계산 결과를 표시합니다. ; 출력> 요소:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</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>
</body>
</html>

프로그램을 실행하고 사용해 보세요

HTML5 새 양식 요소

<테이블 너비= "-642 ">

标签	描述
<datalist>	<input>标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<keygen>	<keygen> 标签规定用于表单的密钥对生成器字段。
<output>	<output> 标签定义不同类型的输出，比如脚本的输出。

태그

설명

<🎜><🎜> <🎜><🎜> <datalist><🎜><input> 태그는 옵션 목록을 정의합니다. 이 요소를 입력 요소와 함께 사용하여 가능한 입력 값을 정의합니다. < keygen><keygen> 양식의 키 쌍 생성기 필드입니다. < 출력><output> 스크립트 출력과 같은 출력 유형이 다릅니다. <🎜><🎜><🎜><🎜><🎜><🎜>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> </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> </body> </html>

제출하다 코드 재설정

자동운전