>  기사  >  웹 프론트엔드  >  html5에 추가된 새로운 양식 요소는 무엇입니까?

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

青灯夜游
青灯夜游원래의
2022-04-25 11:54:029381검색

세 가지 새로운 양식 요소가 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>output标签演示:</h4>
    <h5>加法计算器</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에 추가된 새로운 양식 요소는 무엇입니까?

위의 예를 통해 모두가 출력 태그 사용법을 배웠다고 생각합니다. 뺄셈, 곱셈, 나눗셈 등의 계산기로 쉽게 변경할 수 있습니다. 관심 있는 친구들은 시도해 보세요!

【관련 추천: html 동영상 튜토리얼, 웹 프론트엔드

위 내용은 html5에 추가된 새로운 양식 요소는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.