文档章节

H5表单新特性 新的页面元素

一个像夏天
 一个像夏天
发布于 2016/12/09 16:43
字数 1034
阅读 218
收藏 0
点赞 0
评论 0

一、表单新属性

1.form:在form表单下面的子元素里面使用,在之前的版本里面子元素必须包括在<form></form>里面,现在可以写在任何位置。但必须保证form的值和主form的id值一样。如下

		<from id="testform"   stye="display:none">
			<label id="label" for="text-name">姓名:</label>
			<input id="text-name">
			<input type="button" id="btnValidate" value="验证" onclick="Validate()">
			
		</from>
		
		<input type="text" form="testform"/>性别

2.autocomplete:autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers, range 以及 color。当你往输入框输入内容的时候,浏览器会从你以前的同名输入框的历史记录中查找出类似的内容并列在输入框下面。on和off两个值。

<form action="www.baidu.com" autocomplete="off">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

3.formaction:表单提交方式,H5把提交方式设置的更加简单,可以实现分块提交,我们在form里面submit可以提交到不同的地方。用法比如在登录和注册的时候。不同的按钮指定不同的地址。

4.formmethod:以前是get和post属性,现在是可以使单个按钮提交都可以实现提交方式。以前是一个表单一种提交方式。

5. formentype:提交的时候编码,
            1.text/plain表单中的空格变成加号。但是不对表单中的特殊字符进行编码
            2.multipart/form-data不对表单进行字符编码,在进行文件上传的时候使用
            3.application/x-www-form-urlencoded

6.autofous:聚焦属性,我们在页面输入的时候,该被输入的地方会有蓝光出现。比如在登录时的效果。

           

7. require:<input>输入框在提交的时候,如果内容为空,会提示你输入信息。属性require="require"。

8.placeholder:输入框的提示词,如上图浅灰色的框内字,起到提示作用。

9.pattern:这个就厉害了,设置提交格式,,如果输入的东西不符合我们定义的格式,自动提交失败。

<form action="www.baidu.com">
	<input type="text" pattern="[A-Z]{3}" />
	<input type="submit"/>
</form>

效果图:                 

10.height 和 width 属性规定用于 image 类型的 <input> 标签的图像高度和宽度。就是带图片的按钮的大小选择。

11.list:list属性与 datalist元素配合使用,可以实现qq登录账号的效果。

<from>
	<input type="text " name="greeting"  list="greeting"/>
	<datalist	id="greeting" style="display: none;">
		<option value="H5学习">H5学习</option>
		<option value="Android学习">Android学习</option>
		<option value="Ios学习">Ios学习</option>
	</datalist>
</from>

效果图 :                           

二、表单新类型

类型如下:url,emil,date,time,datetime,datetime-local,month,week,number,range,search,tel,color,output。他们对用户输入的东西进行自己检查,不符合格式的不允许提交。

三、H5增强的页面元素

H5增强的页面元素:figure和figcaption,details和summary,mark

figure和figcaption:figcaption是对于figure的说明,包含在figure里面。figcaption会自己进行换行。

		<figure>
			<img src="img/img1.jpeg"/>
			<img src="img/img2.jpeg"/>
			<img src="img/img3.jpeg"/>
			<figcaption>小头像系列</figcaption>
		</figure>

             

details和summary:details被隐藏。

			<details>
				<summary>这个一个详细的说明</summary>
				我叫夏天,我是个帅哥
			</details>

mark:需要被标注的东西,想起到提醒作用的文章可以使用。

progress:工作进度描述,就是一个进度条,但是主要的效果是靠js来实现。

meter:value,min,max等等,就是一个表示占用量的条。

例如:<p>你说你有点<mark>自恋</mark></p>

ol和li:ol是对li进行排序呀什么的,li只是导航点,但是ol可以进行数字排序。

			<ol start="4" reversed="reversed">
				<li>列表1</li>
				<li>列表2</li>
				<li>列表3</li>
				<li>列表4</li>
			</ol>

dl、dd、dt、cite:

			<dl>
				<dt>我是</dt>
				<dd><cite>夏天</cite></dd>
				<dt>电话</dt>
				<dd>1234567</dd>
			</dl>

small:和big标签相对应,字体缩小,如果字体已经是最小的了,那么就没有作用了。small标签也可以嵌套使用,使字体连续缩小。

 

 

© 著作权归作者所有

共有 人打赏支持
一个像夏天
粉丝 26
博文 9
码字总数 6375
作品 0
最新最全的CSS规范指南

结构目录: 1. 重定义浏览器默认样式 2. 全局常用 CSS 样式 3. 表单及表单元素 4. 页面布局以及通用的区块样式 5. 列表样式vwmy 6. 其他特定功能块 ---------------------------------- CSS 样...

ybyron ⋅ 2016/09/23 ⋅ 0

最新最全的CSS规范指南

结构目录: 1. 重定义浏览器默认样式 2. 全局常用 CSS 样式 3. 表单及表单元素 4. 页面布局以及通用的区块样式 5. 列表样式vwmy 6. 其他特定功能块 ---------------------------------- CSS 样...

ybyron ⋅ 2016/09/23 ⋅ 0

7 项 Web 开发者需要了解的新技术

Web 开发者需要经常更新他们的知识,学习新的技术,如果他们还想继续在 Web 开发领域混并混得还不错的话。下面将为你展示 7 项新的Web开发技术,作为一个Web开发人员,你需要了解、熟悉并学会...

红薯 ⋅ 2011/09/20 ⋅ 20

ELSE 技术周刊(2017.11.06期)

业界动态 NEWS: Node.js 8 Moves into Long-Term Support and Node.js 9 Becomes the New Current Release Line Node 8成为LTS版本,当前发布版本为Node 9。Node的版本发布越来越快了。 Vers......

风清洋ELSE ⋅ 2017/11/07 ⋅ 0

HTML5你必须知道的28个新特性

HTML5有很多的新功能.新代码.非常不错.现在总结一下.仅供参考 1. 新的Doctype 尽管使用,即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元素 用 和 来语义化地表示带标题的图片 This...

ty2538402559 ⋅ 2017/07/12 ⋅ 0

JavaWeb01-HTML篇笔记(四)

1.1 案例五:网站的注册页面的显示:1.1.1 需求: 使用HTML完成注册页面的设计: 1.1.2 分析:1.1.2.1 技术分析 【HTML的表单标签(*****)】 HTML的表单标签: 常用属性: :单选按钮. :复选按...

我是小谷粒 ⋅ 04/26 ⋅ 0

javascriptO

定义: 他的存在是为了改善HTML的交互性。他是在前端完成的交互,与服务器的交互是在后端的交互。 是脚本语言,通过解释运行而非编译运行。 包含: 核心 ECMAScript 文档对象模型 DOM 浏览器...

大胡子_biu ⋅ 2017/11/08 ⋅ 0

深入剖析 HTML5

作为新一代的 HTML 标准,HTML5 不仅强化了 Web 网页的表现性能,还追加了本地数据库等 Web 应用的功能。虽然 HTML5 标准仍处于完善之中。然而,大部分新版本的浏览器已经能够支持某些 HTML...

乱世中的单纯 ⋅ 2015/02/11 ⋅ 0

什么是 HTML5

HTML5 是下一代的 HTML。 什么是 HTML5? HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。 HTML 的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。 HTML5 仍处于完善之...

华宰 ⋅ 2011/04/14 ⋅ 0

HTML5编程之旅 第4站 Forms

涉及到Web开发的,肯定要涉及到HTML表单,本节将带你走入HTML5表单的世界。 一、HTML5 Forms概述 熟悉HTML表单的开发人士,可以很容易的适应HTML5 Forms的新增功能。 XFomrs是一个以XML为核心...

倪伟伟 ⋅ 2014/02/27 ⋅ 1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

个人博客的运营模式能否学习TMALL天猫质量为上?

心情随笔|个人博客的运营模式能否学习TMALL天猫质量为上? 中国的互联网已经发展了很多年了,记得在十年前,个人博客十分流行,大量的人都在写博客,而且质量还不错,很多高质量的文章都是在...

原创小博客 ⋅ 今天 ⋅ 0

JavaScript零基础入门——(十一)JavaScript的DOM操作

JavaScript零基础入门——(十一)JavaScript的DOM操作 大家好,欢迎回到我们的JavaScript零基础入门。最近有些同学问我说,我讲的的比书上的精简不少。其实呢,我主要讲的是我在开发中经常会...

JandenMa ⋅ 今天 ⋅ 0

volatile和synchronized的区别

volatile和synchronized的区别 在讲这个之前需要先了解下JMM(Java memory Model :java内存模型):并发过程中如何处理可见性、原子性、有序性的问题--建立JMM模型 详情请看:https://baike.b...

MarinJ_Shao ⋅ 今天 ⋅ 0

深入分析Kubernetes Critical Pod(一)

Author: xidianwangtao@gmail.com 摘要:大家在部署Kubernetes集群AddOn组件的时候,经常会看到Annotation scheduler.alpha.kubernetes.io/critical-pod"="",以表示这是一个关键服务,那你知...

WaltonWang ⋅ 今天 ⋅ 0

原子性 - synchronized关键词

原子性概念 原子性提供了程序的互斥操作,同一时刻只能有一个线程能对某块代码进行操作。 原子性的实现方式 在jdk中,原子性的实现方式主要分为: synchronized:关键词,它依赖于JVM,保证了同...

dotleo ⋅ 今天 ⋅ 0

【2018.06.22学习笔记】【linux高级知识 14.4-15.3】

14.4 exportfs命令 14.5 NFS客户端问题 15.1 FTP介绍 15.2/15.3 使用vsftpd搭建ftp

lgsxp ⋅ 今天 ⋅ 0

JeeSite 4.0 功能权限管理基础(Shiro)

Shiro是Apache的一个开源框架,是一个权限管理的框架,实现用户认证、用户授权等。 只要有用户参与一般都要有权限管理,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户...

ThinkGem ⋅ 昨天 ⋅ 0

python f-string 字符串格式化

主要内容 从Python 3.6开始,f-string是格式化字符串的一种很好的新方法。与其他格式化方式相比,它们不仅更易读,更简洁,不易出错,而且速度更快! 在本文的最后,您将了解如何以及为什么今...

阿豪boy ⋅ 昨天 ⋅ 0

Python实现自动登录站点

如果我们想要实现自动登录,那么我们就需要能够驱动浏览器(比如谷歌浏览器)来实现操作,ChromeDriver 刚好能够帮助我们这一点(非谷歌浏览器的驱动有所不同)。 一、确认软件版本 首先我们...

blackfoxya ⋅ 昨天 ⋅ 0

线性回归原理和实现基本认识

一:介绍 定义:线性回归在假设特证满足线性关系,根据给定的训练数据训练一个模型,并用此模型进行预测。为了了解这个定义,我们先举个简单的例子;我们假设一个线性方程 Y=2x+1, x变量为商...

wangxuwei ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部