Detailed explanation of HTML5 new form attributes
New formAttributes
The most complete form attributes can be obtained by checking the w3cschool-h5 form attributes. Here we only explain the common attributes
autocomplete(Autocomplete)
can record the user’s input and give prompts. This is the role of
autocomplete
##Value:
- on: turn on
- off: turn off
Applicability:
Sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" >
<input type="text" autocomplete="on" name="userName">
<input type="submit">
</form>
</body>
</html>Usage Note:
- The tag needs to add the
name
attribute - The prompt will only appear after submitting once
When a page has many elements for input, the user needs to use the mouse to click on the elements for input. In order to improve the user experience , we can specify the default selected elements in the page through theautofocus
attribute
Usage method:
- Which
form element is needed
To get the focus, just add the attribute - No need to assign a value, just add the attribute Please see the sample code
Sample code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="" > 姓名:<input type="text" name="userName"> <br/> 年龄<input type="number" name="telNum" autofocus> <input type="submit"> </form> </body> </html>
Copy after loginUsage Note:
- Before this attribute was available, you could use
JavaScript<a href="http://www.php.cn/wiki/48.html" target="_blank"></a> to specify the element - If multiple elements in the page have this attribute set, the last one will get focus
When we want to When you want to submit data, you need to put theform element
in the correspondingformtag. The appearance of this attribute makes the placement of theform elementno longer affected byConstraint
Usage method:
- Want a certain
The
element outside the form is connected to theform. You only need to add the attributeform="form id"to the element and set it to theform id## you want to establish a relationship with. #That’s it - input
tags and id is
userFormform to establish contact
- Let the form enter your favorite
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" id="userForm" >
姓名:<input type="text" name="userName">
<br/>
年龄:<input type="number" name="telNum" autofocus>
<br/>
<input type="submit">
</form>
<br/>
爱好:<input type="text" name="habbit" form="userForm">
</body>
</html>- Usage Note:
- Although this attribute can make the placement of elements no longer a restriction, it is still recommended when coding to place elements in the corresponding form. In addition to compatibility issues, it is also to improve the readability and readability of the code. Maintainability
inputtag value, you can use this attribute
- Applicable situations:
file
<a href="http://www.php.cn/wiki/1313.html" target="_blank"></a>- ctrl ##placeholder(placeholder prompt)
- This attribute can be used in type is
- select When working with multiple files, you need to hold down the
Some prompt information is displayed by default in the input element, which disappears automatically after the user inputs. We need to use
JavaScriptto achieve this effect until theplaceholder
attribute appears
- Usage:
- Function
##placeholder.png
显示效果如下
- JavaScript
<input type="text"placeholder="输入用户名">
新的表单元素
除了在input标签中增加了一些新的
type属性以外,H5也推出了一些新的表单元素,由于浏览器的兼容问题,使用频率并不广,了解即可 w3cSchool_新表单元素
datalist
该元素规定了输入区域的选项列表,可以让用户有一些选项
测试代码:
注:测试代码只是
body内部的代码
网址:<input type="url" list="url_list" name="link"/>
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn"/>
<option label="Google" value="http://www.google.com"/>
<option label="Microsoft" value="http://www.microsoft.com"/>
</datalist>
电话: <input type="tel" list="tel_list">
<datalist id="tel_list">
<option value="186xxx" label="移动">移动</option>
<option value="187xxx" label="联通">联通</option>
<option value="135xxx" label="天翼">天翼</option>
</datalist>datalist:
id:id属性,想要使用该
datalist的元素需要通过list=id的方式来指定option:
value:指定具体的值
label:提示信息
注意:
如果input的type为
url,option中对应的value需要使用http://开始
keygen
keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate），即实现非对称加密
目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。
使用频率:
低
output
属于新的语义标签:用来放置输出的内容,但是不能自动的计算结果,依旧需要通过js的方式来动态修改结果,只是相比于其他的标签,
语义性更强。
使用频率:
低
【相关推荐】
1. 免费h5在线视频教程
2. HTML5 完整版手册
The above is the detailed content of Detailed explanation of HTML5 new form attributes. For more information, please follow other related articles on the PHP Chinese website!
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!
Hot Article
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)
Hot Topics
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.
