文档章节

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

一个像夏天
 一个像夏天
发布于 2016/12/09 16:43
字数 1034
阅读 226
收藏 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
博文 12
码字总数 6375
作品 0
最新最全的CSS规范指南

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

ybyron
2016/09/23
0
0
最新最全的CSS规范指南

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

ybyron
2016/09/23
0
0
使用appium自动化测试混合应用app(android内嵌套h5表单界面),请问怎么准确控制表单页上滑幅度操作?

使用appium自动化测试混合应用app(android内嵌套h5表单界面),请问怎么准确控制表单页上滑幅度操作? 环境: appium的版本: 1.8.1 测试用例开发语言:java 文档上面给的上滑操作提示是采用...

streamlong
07/04
0
0
7 项 Web 开发者需要了解的新技术

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

红薯
2011/09/20
6.6K
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
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

7 个致命的 Linux 命令

导读 如果你是一个 Linux 新手,在好奇心的驱使下,可能会去尝试从各个渠道获得的命令。以下是 7 个致命的 Linux 命令,轻则使你的数据造成丢失,重则使你的系统造成瘫痪,所以,你应当竭力避...

问题终结者
昨天
0
0
设计模式:工厂方法模式(工厂模式)

工厂方法模式才是真正的工厂模式,前面讲到的静态工厂模式实际上不能说是一种真正意义上的设计模式,只是一种变成习惯。 工厂方法的类图: 这里面涉及到四个种类: 1、抽象产品: Product 2、...

京一
昨天
0
0
区块链和数据库,技术到底有何区别?

关于数据库和区块链,总会有很多的困惑。区块链其实是一种数据库,因为他是数字账本,并且在区块的数据结构上存储信息。数据库中存储信息的结构被称为表格。但是,区块链是数据库,数据库可不...

HiBlock
昨天
0
0
react native 开发碰到的问题

react-navigation v2 问题 问题: static navigationOptions = ({navigation, navigationOptions}) => ({ headerTitle: ( <Text style={{color:"#fff"}}>我的</Text> ), headerRight: ( <View......

罗培海
昨天
0
0
Mac Docker安装流程

久仰Docker大名已久,于是今天趁着有空,尝试了一下Docker 先是从docker的官网上下载下来mac版本的docker安装包,安装很简易,就直接拖图标就好了。 https://www.docker.com/products/docker...

writeademo
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部