html5中form表单新增属性以及改良的input标签元素的种类
在HTML5中，表单新增了一些属性，input标签也有了更多的type类型，有些实现了js才能实现的特效，但目前有些浏览器不能全部支持。下面是一些h5在表单和input标签上的一些改动。 <!DOCTYPE html>
<html>
<head>
<title>表单测试</title>
<meta charset="utf-8" />
<!-- 在不支持h5的浏览器中，可以用CSS样式进行改写 -->
<style>
input[type="search"] {-webkit-appearance: textfield;}
</style>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
</head>
<body>
<!-- 在html5中，input标签可以不写在form里，但要给form一个id（如：login），然后在input中加一个form="login"属性。
如果在同一表单中，做操作时，可以在input中加入formaction="1.php"属性将表单提交到不同的PHP处理文件中。
也可以增加formmethod="get"属性使不同的文本框提交的方法不同。-->
<!-- 如果要使整个表单验证失效，可以再form中加入novalidate属性；也可以在input中加入formnovalidate属性，使单个文本框失效（不可以与required一起使用） -->
<form action="demo.php"> <!-- 当文本框是text或者textarea类型时，在未输入状态下，使用placeholder属性可以显示输入提示 -->
TEXT:<input type="text" placeholder="请输入用户名" name="username"/><br/>
<!-- search类型的input用来输入搜索关键词
autofocus属性用来自动获取光标焦点，但一个页面只能有一个。
input标签中的list属性，用于给出下拉选择（类似于select），要与datalist元素一起使用，datalist设置一个id值，
input中加入list="id值即可"-->
SEARCH:<input list="listtest" type="search" autofocus name="ser"/><br/>
<datalist id="listtest">
<option>www.baidu.com</option>
<option>www.sina.com</option>
<option>www.google.com</option>
</datalist>
<!-- tel类型的input用来输入电话，title是提示信息，pattern中可以写电话的正则.
autocomplete属性用于自动完成，可以关闭-->
TEL:<input type="tel" autocomplete="off" name="num" title="只能输入11位数字！" pattern="^1[34578]\d{9}$" /><br/>
<!-- URL类型的input用来输入URL的文本框-->
URL:<input type="url" required name="url" title="请输入正确的URL"/><br/>
<!-- email类型的input用来输入邮箱的文本框，但是它并不检测email地址是否存在，而且文本框可以为空，除非加了required属性。 -->
EMAIL:<input type=email required name="email"/><br/> <!-- datetime用来输入UTC日期和时间，并且在提交时对输入的日期格式进行检测 -->
datetime:<input type="datetime" name="datetime"/><br/>
<!-- date类型：以日历的形式方便输入 -->
date: <input type="date" value="2016-07-05" name="date"/><br/>
<!-- month类型是用来输入月份的文本框，并在提交时对月份格式检查 -->
month: <input type="month" value="2016-07" name="month"/><br/>
<!-- week用来输入周号，他的格式类似于：2014-W10，代表2014年的第10周 -->
week: <input type="week" value="2016-W28" name="week"/><br/>
<!-- time用来输入时间 -->
time: <input type="time" value="18:18" name="time"/><br/>
<!-- datetime-local专门用来输入本地日期和时间的文本框 -->
datetime-local:<input type="datetime-local" value="2016-07-05T18:18" name="local"/><br/> <!-- number类型用来输入数字，提交时检测。有min、max、step（数字相差的步数）属性 -->
number:<input type="number" name="num" min="10" max="30" step="3"/><br/>
<!-- range只允许输入一段范围内数值的文本框，具有min、max、step属性，默认范围是0到100 -->
<!-- output元素定义不同类型的输出，比如计算结果或脚本输出。它必须从属于某个表单，写在表单内部，或者对他添加form属性。output和range结合如下 -->
range:<input type="range" onchange="range.value=value" min="10" max="30" step="3"/>
<output id="range">20</output><br/>
<!-- color提供了一个颜色选择器 -->
color:<input type="color" name="color"/><br/>
<!-- 文件上传文本框，multiple属性使其可以选择多个文件；accept属性限制了选择文件的种类 -->
file:<input type="file" multiple accept="image/*" id="file0" name="file"/><br/>
<img src="" id="img0">
<!-- 此段js实现了上传预览 -->
<script>
$("#file0").change(function(){
var objUrl = getObjectURL(this.files[0]) ;
console.log("objUrl = "+objUrl) ;
if (objUrl) {
$("#img0").attr("src", objUrl) ;
}
}) ;
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
</script> <input type="submit" name="dosubmit" value="提交">
</form>
</body>
</html>
html5中form表单新增属性以及改良的input标签元素的种类的更多相关文章
- HTML5的form表单属性
form:HTML4中,表单内的从属元素必须书写在<form></form>之内,但是在HTML5中,表单的从属元素可以处于页面的任何位置,然后为其添加form属性,属性值为f ...
- [html5] 学习笔记-表单新增元素与属性
本节讲的是表单元素的form,formaction属性,frommethod,formenctype属性,formtarget,autofocus属性,required,labels属性. 1.for ...
- MVC中Form表单的提交
概述 Web页面进行Form表单提交是数据提交的一种,在MVC中Form表单提交到服务器.服务端接受Form表单的方式有多种,如果一个Form有2个submit按钮,那后台如何判断是哪个按钮提交的数据 ...
- laravel中form表单，ajax传值没反应
laravel中form表单,ajax传值没反应时,可能是令牌有问题. form中添加: {{csrf_token()}} ajax中添加: data: {'page': page, '_token' ...
- html/form表单常用属性认识
1.form表单常用属性练习 <style> .form1 { margin: auto; height: 900px; width: 500px; text-align: center; ...
- HTML5 表单新增属性
1. 表单内元素的form属性 在H5中可以把form放到页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了 <form id=&quo ...
- [html5] 学习笔记-表单新增的元素与属性（续）
本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...
- django中form表单的提交：
一,关于表单: 表单在百度百科的解释: 表单在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域 ...
- html中form表单的使用方法和介绍
from表单的使用方法 一.表单赏析 二.了解表单功能:用于搜集不同类型的用户输入的内容 有了表单,网页的内容可以由用户自己创建,那么对于网页来说,我们既是网页创建都者,也是网页的消费者. 三.常用的 ...
随机推荐
- Swagger简介，轻松构造restful api的文档
Swagger 是一款RESTFUL接口的文档在线自动生成+功能测试功能软件. Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使 ...
- JAVA之抽象类与抽象方法
抽象方法:在类中没有方法体的方法,就是抽象方法.抽象类:含有抽象方法的类就叫抽象类.|||||||||抽象类不能被实例化(new)为什么要使用抽象方法?(以下是个人观点)因 为在面向对象的编程的思想中 ...
- 全栈技术经理——团队管理：每周问问你的团队这这些问题 V1.0
全栈技术经理--团队管理:每周问问你的团队这这些问题 V1.0 1.本周取得了哪些进展? 通过回答这个问题可以让员工庆祝甚至夸耀一些自己的成果,包括那些跟最高优先级不相干而被忽视的小事情.借此你也 ...
- scrapy爬虫 函数间传值简易教程
2017-03-27 有的时候我们爬取数据的时候需要在多个页面之间跳转,爬取完所有页面的数据的时候才能把所有数据一起存到数据库,这个时候我们就需要把某个函数内爬取的数据传到下一个函数当中.有人可能会说 ...
- 【重点突破】—— Easy Mock的使用及Mock.js规范
前言:在线使用Easy Mock可视化工具,可以提供快速生成“模拟数据”的持久化服务: Mock.js是一个JS插件,指定了一套规范,而Easy Mock工具就遵循这些规范. 一.Easy Mock ...
- Android Fragment 真正的完全解析
出处: 自从Fragment出现,曾经有段时间,感觉大家谈什么都能跟Fragment谈上关系,做什么都要问下Fragment能实现不~~~哈哈,是不是有点过~~~ 本篇博客力求为大家说明Fragmen ...
- Shell 同时读取多个文件
现有两个文件 1.txt 2.txt,内容分别如下: [root@SHO-XXW-- readmulti]# .txt [root@SHO-XXW-- readmulti]# .txt a b c ...
- 高速排序java语言实现
本博客不再更新,很多其它精彩内容请訪问我的独立博客 高速排序是非常重要的排序算法,可是我在学的时候发现网上没有特别好的样例所以自己动手写了一个. 自己动手丰衣足食. package sort; imp ...
- mysql热备及查询mysql操作日志
mysql热备 1 查看mysql版本,保证主库低于等于从库 2 主库配置: A 需要打开支持日志功能:log-bin=mysql-bin B 提供server-id:server-id=1 ...
- myBatis插入oracle获取主键
<insert id="insert" parameterType="com.inspur.biz.entry.SpLackApply"> < ...