html5에 추가된 새로운 양식 요소는 무엇입니까?-프런트엔드 Q&A-php.cn

output标签演示：

加法计算器

집

웹 프론트엔드

프런트엔드 Q&A

html5에 추가된 새로운 양식 요소는 무엇입니까?

青灯夜游

Apr 25, 2022 am 11:54 AM

html5

세 가지 새로운 양식 요소가 HTML5에 추가되었습니다. 1. datalist 요소는 입력을 위한 드롭다운 목록을 설정하는 데 사용되며 내부 옵션은 사전 정의되어 있으며 사용자의 입력 데이터로 사용됩니다. 3. 출력 요소는 계산 결과를 출력하고 표시하는 데 사용됩니다.

html5에 추가된 새로운 양식 요소는 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.

HTML5에는 datalist, keygen 및 출력이라는 세 가지 새로운 양식 요소가 추가되었습니다.

1. datalist 요소

태그는 요소에 가능한 옵션 목록을 지정합니다.

태그는 요소에 "자동 완성" 기능을 제공하는 데 사용됩니다. 사용자는 사용자의 입력 데이터 역할을 할 사전 정의된 옵션이 포함된 드롭다운 목록을 보게 됩니다.

这里注意datalist元素要写id，与input表单元素的 list属性创建联系

로그인 후 복사

예 1:

html5에 추가된 새로운 양식 요소는 무엇입니까?

은 페이지에 다음과 같이 표시됩니다.

html5에 추가된 새로운 양식 요소는 무엇입니까?

예 2:

html5에 추가된 새로운 양식 요소는 무엇입니까?

은 페이지에 다음과 같이 표시됩니다.

html5에 추가된 새로운 양식 요소는 무엇입니까?

만약 URL입니다. 값을 추가해야 합니다. http://

예 3

html5에 추가된 새로운 양식 요소는 무엇입니까?

여기의 datalist 요소에는 Firefox 브라우저의 드롭다운 목록이 없습니다. 결제하세요. 주목!

및 datalist 하위 요소의 옵션 요소는 단일 태그 형식으로 작성될 수 있습니다. 예: <option value="“英语”" label="“棒”/"></option>

2. keygen 요소

양식 생성기 필드에 사용되는 키 쌍입니다. 양식이 제출되면 개인 키는 로컬에 저장되고 공개 키는 서버로 전송됩니다.

은 HTML5의 새로운 요소로, 키 생성기를 생성하는 데 사용됩니다.
양식이 제출되면 개인 키는 로컬에 저장되고 공개 키는 서버로 전송됩니다. 주요 기능은 사용자가 자신의 신원을 확인할 수 있는 방법을 제공하는 것입니다
이를 사용할 때 브라우저마다 지원 수준이 다르므로 현재 Internet Explorer와 Safari는 지원하지 않습니다.
일부 지식이 필요하기 때문입니다. 이번 강의에서는 이 요소만 이해하고 서버 관련 지식은 이 과정의 범위에 포함되지 않습니다.
keygen 요소 요소 속성:
name/form/autofocus/disabled
challenge 속성: 제출 시 요청할 keygen 값을 설정합니다.
keytype 속성: 키 유형을 정의합니다. rsa(암호화 알고리즘)로 설정하면 RSA 키가 생성됩니다.

Instance

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
    <p style="color:#FF0000">
        掌握fieldset/legend元素的用法（和figure和figcaption很像，只不过是作用于表单）
    </p>
    <form action="L3_01.html" method="get" >
        <fieldset>
        <legend>用户注册</legend>
            用户名：<input type="text" name="name"><br>
            密码：<input type="password" name="password">
            <br><input type="submit" value="确定">
        </fieldset><br>

        keygen元素用法：<br>
        加密：<keygen name="mykey"><br>
        <br><input type="submit" value="确定">
    </form>
<body>
</body>
</html>

로그인 후 복사

3. 출력 요소

스크립트 출력).

출력 태그 구문 형식

<output name="名称" for="element_id">默认内容</output>

로그인 후 복사

설명: 출력 태그의 내용은 기본 표시 내용이며 관련 요소가 변경되면 변경됩니다.

output 태그 속성

for: 출력 도메인과 관련된 하나 이상의 요소를 공백으로 구분하여 정의합니다.
form: 입력 필드가 속하는 하나 이상의 양식을 공백으로 구분하여 정의합니다.
name: 개체의 고유 이름을 정의합니다(양식을 제출할 때 사용됨).

인스턴스

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>html中output标签详细介绍</title>
</head>
 
<body style="background-color: bisque;">
    <h4 id="output标签演示">output标签演示：</h4>
    <h5 id="加法计算器">加法计算器</h5>
    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
        <input type="number" id="a" value="0"> +
        <input type="number" id="b" value="0"> =
        <output name="x" for="a b">0</output>
    </form>
</body>
</html>

로그인 후 복사

html5에 추가된 새로운 양식 요소는 무엇입니까?