HTML5（六）表单合集
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 域显示为常规的文本域。
HTML5（六）表单合集的更多相关文章
- Bootstrap<基础六> 表单
Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...
- hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...
- Bootstrap 表单和图片 （内联表单，表单合组，水平排列，复选框和单选框，下拉列表，校验状态，添加额外的图标，控制尺寸，图片）
一．表单 基本格式 注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式. 支持的输入框控件 包括:text.password.datetime.datetime-local.date.m ...
- HTML5 智能表单
HTML5 智能表单 1.表单新增属性 ☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文 ...
- HTML5智能表单
HTML5 智能表单 1.表单新增属性 ☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文 ...
- 精美的HTML5/CSS3表单 带小图标
今天我们要来分享一款非常精美的HTML5/CSS3表单,准备地说,这是一款经过美化的input输入表单,每一个输入表单都可以定义其两侧的小图标,非常华丽.另外,这款表单应用还采用了3种不同的风格主题, ...
- HTML5新表单新功能解析
HTML5新增了很多属性功能.但是有兼容性问题,因为这些表单功能新增的.我这里做了一个简单的练习,方便参考.如果完全兼容的话,那我们写表单的时候就省了很多代码以及各种判断. <!DOCTYPE ...
- HTML5的表单input元素的新属性
知识点 <HTML5的表单input元素的新属性>,留待学习分享... <!-- HTML5的表单input元素的新属性 Autocomplete:自动完成功能 Autofocus: ...
- 学习HTML5之表单
HTML5 的标准已经定了,应该火了,或者已经火了.那么是不是可以学习一下呢? 目前h5的主场还是在手机端,pc还是受困于浏览器的兼容,主要是IE在拖后腿.所以这里侧重的是手机里面的表现. 先来看看表 ...
随机推荐
- Java实现 蓝桥杯 历届试题 错误票据
问题描述 某涉密单位下发了某种票据,并要在年终全部收回. 每张票据有唯一的ID号.全年所有票据的ID号是连续的,但ID的开始数码是随机选定的. 因为工作人员疏忽,在录入ID号的时候发生了一处错误,造成 ...
- tcpdump 基于mac地址抓取数据包
1.刚刚接触tcpdump时,常用tcpdump -i eth1 host 192.168.1.1 这个命令基于ip地址抓取数据包信息. tcpdump -i eth1(接口名称) host 192. ...
- 内存管理，goto的使用，内存的申请和释放，mmap，ioremap
1.内存管理 (将物理内存映射到内核空间(3G~4G)并使用) 深入内核: 伙伴系统 1.1基本概念 1)linux内核管理内存是以物理内存页为单位 一个物理内存页通常为4KB ...
- 停电后，在UPS电源下服务器自动关机脚本
一年总有那么几次莫明停电,公司的服务器经不起这样的折腾 写了一个断电后UPS备用电源自动关机的脚本 原理就是检测路由器网关是否能ping通,长时间持续ping不通视为停电了 路由器不要接到ups上 用 ...
- 短短1天我学会了如何修改Butterfly的配置文件
目录 一.修改默认语言 二.创建标签.分类.关于和留言版页面 三.添加搜索框 四.飘带背景 五.使用Valine添加评论功能并支持邮箱提醒 六.收录谷歌.百度 一.修改默认语言 说明:安装Butter ...
- Hexo博客框架攻略
前言 前天无意在b站看到up主CodeSheep上传的博客搭建教程,引起了我这个有需求但苦于没学过什么博客框架的小白的兴趣.于是花了两天时间终于终于把自己的博客搭建好了,踩了无数的坑,走偏了无数的路, ...
- 使用python,pytorch求海森Hessian矩阵
考虑一个函数$y=f(\textbf{x}) (R^n\rightarrow R)$,y的Hessian矩阵定义如下: 考虑一个函数:$$f(x)=b^Tx+\frac{1}{2}x^{T}Ax\\其 ...
- PageHelper支持GreenPlum
greenplum是pivotal在postgresql的基础上修改的一个数据库,语法和postgresql通用.使用PageHelper做分页插件的时候,发现目前没有针对greenplum做支持,但 ...
- 关于单向循环链表的约瑟夫问题（Java实现）
关于单向循环链表的约瑟夫问题(Java实现) 最近在学习链表时,遇到单向循环链表中的约瑟夫问题.在构建循环链表的代码上,我有一点很不理解,遂记录下来. Josephu问题为: 设编号为1, 2,.. ...
- 入门大数据---Spark_Streaming基本操作
一.案例引入 这里先引入一个基本的案例来演示流的创建:获取指定端口上的数据并进行词频统计.项目依赖和代码实现如下: <dependency> <groupId>org.apac ...