What are the new form elements added in html5-Front-end Q&A-php.cn

Table of Contents

output标签演示：

加法计算器

Home

Web Front-end

Front-end Q&A

What are the new form elements added in html5

青灯夜游

Apr 25, 2022 am 11:54 AM

html5

HTML5 adds 3 new form elements: 1. datalist element, which is used to set a drop-down list for input. The options inside are predefined and will be used as user input data; 2. keygen element. The key pair generator field used in the form can be specified; 3. The output element is used to output and display the calculation results.

What are the new form elements added in html5

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

Three new form elements have been added to HTML5: datalist, keygen, and output.

1. datalist element

## tag specifies a list of possible options for the element.

The tag is used to provide "auto-complete" features for the element. The user will see a drop-down list with predefined options that will serve as the user's input data.

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

Copy after login

Example 1:

What are the new form elements added in html5

is displayed on the page as follows:

What are the new form elements added in html5

Example 2:

What are the new form elements added in html5

is displayed on the page as follows:

What are the new form elements added in html5

If you want The input is the URL, please note that the value value must be added http://

Example 3

What are the new form elements added in html5

The datalist element here is in Firefox There is no drop-down list on the browser, so be careful!

and the option element of the child element of datalist can be written in a single label format: eg:

2. The keygen element

tag specifies the content used in the form Key pair generator field. When the form is submitted, the private key is stored locally and the public key is sent to the server.

is a new element in HTML5, used to create a key generator
When the form is submitted, the private key is stored locally , the public key is sent to the server. The main function is to provide a method for user authentication
When using it, please note that different browsers have different support levels; currently Internet Explorer and Safari do not support it
Because it involves some knowledge about the server, we only need to understand the elements in this lesson. Knowledge related to the server is not within the scope of this course.
keygen element Attributes of the element:
name/form/autofocus/disabled
challenge Property: Set the value of keygen to ask on commit.
keytype attribute: Define the key type. If set to rsa (a password algorithm), an RSA key will be generated.

Example

<!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>

Copy after login

3. The output element ## tag is displayed as the calculation result output (such as the output of executing a script).

Output tag syntax format

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

Copy after login

Description: The content in the output tag is the default display content, and it will change as the related elements change.

output tag attribute

Example

<!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>

Copy after login

Through the above examples, I believe everyone has learned how to use the output tag. It is also easy to change it into a calculator for subtraction, multiplication, division, etc. Interested friends can try it!

【Related recommendations: html video tutorial, web front-end】

The above is the detailed content of What are the new form elements added in html5. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Show More

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution
1 months ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues
3 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall
1 months ago By DDD

How to fix KB5055523 fails to install in Windows 11?
2 weeks ago By DDD

InZoi: How To Apply To School And University
3 weeks ago By DDD

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Where is the login entrance for gmail email?

7749

15

Java Tutorial

1643

14

CakePHP Tutorial

1397

52

Laravel Tutorial

1293

25

PHP Tutorial

1234

29

Show More

Related knowledge

Table Border in HTML Sep 04, 2024 pm 04:49 PM
Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.

Nested Table in HTML Sep 04, 2024 pm 04:49 PM
This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.

HTML margin-left Sep 04, 2024 pm 04:48 PM
Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.

HTML Table Layout Sep 04, 2024 pm 04:54 PM
Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.

HTML Input Placeholder Sep 04, 2024 pm 04:54 PM
Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.

HTML Ordered List Sep 04, 2024 pm 04:43 PM
Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively

Moving Text in HTML Sep 04, 2024 pm 04:45 PM
Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.

HTML onclick Button Sep 04, 2024 pm 04:49 PM
Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.

See all articles