html5에 추가된 새로운 양식 요소는 무엇입니까?
- 青灯夜游원래의
- 2022-04-25 11:54:029236검색
세 가지 새로운 양식 요소가 HTML5에 추가되었습니다. 1. datalist 요소는 입력을 위한 드롭다운 목록을 설정하는 데 사용되며 내부 옵션은 사전 정의되어 있으며 사용자의 입력 데이터로 사용됩니다. 3. 출력 요소는 계산 결과를 출력하고 표시하는 데 사용됩니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.
HTML5에는 datalist, keygen 및 출력이라는 세 가지 새로운 양식 요소가 추가되었습니다.
1. datalist 요소
这里注意datalist元素要写id，与input表单元素的 list属性创建联系
예 1:
은 페이지에 다음과 같이 표시됩니다.
예 2:
은 페이지에 다음과 같이 표시됩니다.
만약 URL입니다. 값을 추가해야 합니다. http://
예 3
여기의 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>
위의 예를 통해 모두가 출력 태그 사용법을 배웠다고 생각합니다. 뺄셈, 곱셈, 나눗셈 등의 계산기로 쉽게 변경할 수 있습니다. 관심 있는 친구들은 시도해 보세요!
【관련 추천: html 동영상 튜토리얼, 웹 프론트엔드】
위 내용은 html5에 추가된 새로운 양식 요소는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!