HTML5(六)表单合集
2024-09-01 15:10:37
HTML5 表单元素
HTML5 新的表单元素
HTML5 有以下新的表单元素:
- datalist
- keygen
- output
HTML5 datalist 元素
<datalist> 元素规定输入域的选项列表。
<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:
使用 <input> 元素的列表属性与 <datalist> 元素绑定.
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Datalist</title>
</head>
<body>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Chrome1">
<option value="Chrome2">
<option value="Opera">
<option value="Safari">
</datalist>
</body>
</html>
HTML5 keygen 元素
<keygen> 元素的作用是提供一种验证用户的可靠方法。
<keygen>标签规定用于表单的密钥对生成器字段。
当提交表单时,会生成两个键,一个是私钥,一个公钥。
私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>keygen</title>
</head>
<body>
<form action="" method="get">
用户名: <input type="text" name="usr_name"/>
加密: <keygen name="security"/>
<input type="submit" />
</form>
</body>
</html>
HTML5 output 元素
<output> 元素用于不同类型的输出,比如计算或脚本输出:
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>output</title>
</head>
<body>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
</body>
</html>
HTML5 新的表单属性
HTML5 的 form 和 input 标签添加了几个新属性.
form标签的新属性
属性 | 描述 |
---|---|
autocomplete | 规定 form 域应该拥有自动完成功能。 |
novalidate | 规定在提交表单时不应该验证 form域。 |
input标签的新属性
属性 | 描述 |
---|---|
autocomplete | 规定 form 域应该拥有自动完成功能。 |
autofocus | 规定在页面加载时,域自动地获得焦点。 |
form | 规定输入域所属的一个或多个表单。 |
formaction | 用于描述表单提交的URL地址,覆盖 元素中的action属性. |
formenctype | 描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单) |
formmethod | 定义了表单提交的方式,覆盖了 元素的 method 属性。 |
formnovalidate | 描述了 input 元素在表单提交时无需被验证,覆盖 元素的novalidate属性。 |
formtarget | 指定一个名称或一个关键字来指明表单提交数据接收后的展示。 |
list | 规定输入域的 datalist。datalist 是输入域的选项列表。 |
pattern | 描述了一个正则表达式用于验证 input 元素的值。 |
placeholder | 提供一种提示(hint),描述输入域所期待的值。 |
required | 规定必须在提交之前填写输入域(不能为空)。 |
step | 为输入域规定合法的数字间隔。 |
input标签的新类型
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
类型 | 描述 |
---|---|
用于应该包含 e-mail 地址的输入域。 | |
url | 用于应该包含 URL 地址的输入域。 |
number | 用于应该包含数值的输入域。 |
range | 用于应该包含一定范围内数字值的输入域。显示为滑动条。 |
Date Pickers | 可供选取日期和时间的新输入类型:date, month, week, time, datetime, datetime-local |
search | 用于搜索域,比如站点搜索或 Google 搜索。 |
color | 用于创建一个允许用户使用颜色选择器。 |
Input 类型 - email
email 类型用于应该包含 e-mail 地址的输入域。
在提交表单时,会自动验证 email 域的值。
实例
E-mail: <input type="email" name="user_email" />
Input 类型 - url
url 类型用于应该包含 URL 地址的输入域。
在提交表单时,会自动验证 url 域的值。
实例
Homepage: <input type="url" name="user_url" />
Input 类型 - number
number 类型用于应该包含数值的输入域。
您还能够设定对所接受的数字的限定:
实例
Points: <input type="number" name="points" min="1" max="10" />
Input 类型 - range
range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
您还能够设定对所接受的数字的限定:
实例
<input type="range" name="points" min="1" max="10" />
Input 类型 - Date Pickers(日期选择器)
HTML5 拥有多个可供选取日期和时间的新输入类型:
- date - 选取日、月、年
- month - 选取月、年
- week - 选取周和年
- time - 选取时间(小时和分钟)
- datetime - 选取时间、日、月、年(UTC 时间)
- datetime-local - 选取时间、日、月、年(本地时间)
下面的例子允许您从日历中选取一个日期:
实例
Date: <input type="date" name="user_date" />
Input 类型 - search
search 类型用于搜索域,比如站点搜索或 Google 搜索。
search 域显示为常规的文本域。
最新文章
- “不给力啊,老湿!”:RSA加密与破解
- Nginx搭建https服务器
- 10位IT领袖给大学生的忠告
- Lc.exe已退出,代码为-1
- 【原创】Capture CIS利用Access数据库建立封装库说明
- WWW压缩解压缩
- [PY]进制转换
- Html.ActionLink
- [设计模式] 15 解释器模式 Interpreter
- 转:Java图形化界面设计——布局管理器之FlowLayout(流式布局)其他请参考转载出处网址
- C++读写CSV文件
- 下载PHPDroid: 基于WebView和PHP内置HTTP服务器开发Android应用
- Net FLow Template
- JavaScript面向对象深入理解原型
- HDFS的7个设计特点
- 配置SSH(GNS3)
- scala spark-streaming整合kafka (spark 2.3 kafka 0.10)
- linux中tomcat修改错误日志路径
- centos7 增加虚拟网卡
- &;lt;&;lt;Python基础教程&;gt;&;gt;学习笔记 | 第10章 | 充电时刻