<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	</head>

	<body>

	    <!--表单内元素的form属性：为元素指定一个form属性，属性值为该表单的id-->

	    <form id="testform">

	    	<input type="submit" />

	    </form>

	    <textarea form="testform"></textarea> <br /><hr />

	    <!--表单内元素的formaction属性：可以提交到不同页面-->

	    <form id="form1" action="test.aspx">

	    	<input type="submit" name="s1" value="内部提交到test2" formaction="test2.aspx" />

	    	<input type="submit"  />

	    </form>

	    <!--formmethod:可以为每个表单元素指定不同的提交方法-->

	    <form id="form2" action="test.aspx">

	    	name:<input type="text" name="name" /><br />

	    	<input type="submit" value="post方式提交"  formmethod="post"/>

	    	<input type="submit" value="get方式提交"  formmethod="get"/>

	    </form><br/><hr />

	    <!--formenctype:可以指定不同的编码方式-->

	    <form action="test2.aspx" method="post">

	    	<input type="text" name="name" id="name" value="test" />

	    	文件:<input type="file" name="files" />

	    	<input type="submit"  value="上传" formaction="test.aspx"  formenctype="multipart/form-data"/>

	    	<input type="submit" value="提交" />

	    </form><br /><hr />

	    <!--formtarget:提交后再何处打开页面-->

	    <form action="test.aspx">

	    	<input type="submit" name="s1"  value="s1本页打开" formaction="test2.aspx"  formtarget="_self"/>提交到test2

	    	<input type="submit" name="s"  value="s新页打开" formaction="test.aspx"  formtarget="_blank"/>提交到test

	    </form><hr />

	    <!--autofocus:自动获得光标焦点-->

	    <input type="text" autofocus /><br />

	    <!--control:通过该属性来访问该表单元素-->

	    <form >

	    	<label id="label">

	    	邮编：<input id="txtzip" maxlength="6" /><small>请输入6位数字</small>

	    	</label>

	    	<input type="button" value="设置默认值" onclick="setValue()" />

	    </form>

	    <!--placeholder:未输入状态的输入提示-->

	    <input type="text" placeholder="请输入内容" /><br />

	    <!--list:单行文本框的list属性，属性值为datalist的id。    autocomplete：自动完成-->

	    list属性：<input type="text" list="mylist" autocomplete="on"/>

	    <datalist id="mylist" >

	    	<option value="第一">第一</option>

	    	<option value="第二">第二</option>

	    	<option value="第三">三</option>

	    </datalist><br />

	    <!--pattern：设置正则表达式验证-->

	    <form>

	    输入一个字母与三个大写字母：<input type="text" pattern="[0-9][A-Z]{3}"  required=""/>

	    <input type="submit" />

	    </form><br />

	    <!--indeterminate:说明复选框处于尚未明确是否选取状态-->

	    <input type="checkbox" indeterminate id="cb" />indeterminate<br />

	    <!--image的height和width设置图片高宽-->

	    设置图片宽高:<input type="image" src="img/webp.jpg" alt="编辑" width="23" height="23" /><br />

	    <!--textarea:maxlength和wrap属性：hard换行也要指定cols，soft不换行-->

	    <form action="test.aspx" method="post">

	    	<textarea name="name" maxlength="10" rows="5" cols="5" wrap="hard"></textarea>

	    	<input type="submit" value="提交" />

	    </form><br />

	 <!--url类型：只能提交url地址格式-->

		url:<input type="url" name="url"  required=""/><input type="submit" /><br />

		email:<input type="email" name="email" required=""/><input type="submit" /><br />

		date(谷歌浏览器)：<input type="date" name="date"  /><br />

		time(谷歌浏览器):<input type="time" name="time" /><br />

		datetime-local:<input type="datetime-local" name="datetime"  value="2016-05-26T22:31:30"/><br />

		<!--日期时间类型的step属性：单击调整时对选择值多大限定-->

		step：<input type="date" step="3" /><br /><hr />

		number:<input type="number"  value="25" min="10" min="20" max="30" step="2"  /><br />

		range：<input type="range" value="25" min="10" max="100" step="5" /><br />

		search:<input type="search"/><br />

		tel:<input type="tel"  /><br />

		color:<input type="color" /><br />

	    <hr />

	    output元素的追加：

	    <form id="testform">

	    	请选择一个值:<input type="range" id="range" min="5" max="100" step="5" value="10" onchange="out();"/>

	    	<output id="out">10</output>

	    </form>

	</body>

</html>

<script type="text/javascript">

	function setValue(){

		var lable=document.getElementById("label");

		var txtbox=lable.control;//通过control该属性来访问该表单元素

		txtbox.value="213001";

	}

	//indeterminate测试设置为true

	var cb=document.getElementById("cb");

	cb.indeterminate=true;

	//选择的值output输出

	function out(){

		Debug;

		var number=document.getElementById("range").value;

		document.getElementById("out").value=number;

	}

</script>

　　

html5表单及新增的改良元素的更多相关文章

  1. HTML5 表单元素和属性

    HTML5 表单元素和属性学习 版权声明:未经博主授权,内容严禁转载 ! 表单元素简介 无论实现提交功能还是展示页面功能,表单在HTML中的作用都十分重要. 在其他版本的HTML中,表单能够包含的元素 ...

  2. html5-5 HTML5表单元素和内嵌框架

    html5-5   HTML5表单元素和内嵌框架 一.总结 一句话总结:单选框和多选框选的时候外面加label就可以实现选后面文字也可以选中了 1.html5如何实现文件上传? 必须加上enctype ...

  3. HTML5: HTML5 表单元素

    ylbtech-HTML5: HTML5 表单元素 1.返回顶部 1. HTML5 表单元素 HTML5 新的表单元素 HTML5 有以下新的表单元素: <datalist> <ke ...

  4. HTML5学习笔记五：html5表单

    表单是页面上非常重要的一块内容,用户可输入的大部分内容都是在表单元素中完成的,与后台的交互大多数也是通过点击表单中的按钮. 一.新增的元素和属性 1.新增属性: 1.1 form属性:页面中的任何元素 ...

  5. HTML5表单及其验证

    随笔- 15 文章- 1 评论- 115 HTML5表单及其验证   HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其A ...

  6. jQuery html5Validate基于HTML5表单验证插件

    更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...

  7. html5表单重写

    html5表单重写 一.总结 一句话总结: 表单重写用于在提交按钮上指定表单提交的各种信息,比如action <input type="submit" value=" ...

  8. 实现跨浏览器html5表单验证

    div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: ...

  9. HTML5学习总结-05 HTML5表单

    一 HTML5 新的类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. email url number range Date pickers (date, month ...

随机推荐

  1. UVA 1664 Conquer a New Region （并查集+贪心）

    并查集的一道比较考想法的题 题意:给你n个点,接着给你n-1条边形成一颗生成树,每条边都有一个权值.求的是以一个点作为特殊点,并求出从此点出发到其他每个点的条件边权的总和最大,条件边权就是:起点到终点 ...

  2. App开发流程之iOS开发证书拾遗

    很久没有总结,回头看了一下过期的账号,记录的内容少之又少.最近有一些时间,想好好总结记录一下. 由于很久没有记录,想写的东西很多又很杂,想了一下,一篇一篇罗列知识点和经验,还不如写一个系列,记录一个应 ...

  3. JavaScript 练习，变量，数组，函数，对象, with for 语句

    JavaScript 基于对象 和 事件驱动!!! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  4. C#统计目录中文件MD5值

    1. [代码]统计目录中文件MD5值 using System.IO;using System.Security.Cryptography;using System.Collections;using ...

  5. jquery插件之jquery.extend和jquery.fn.extend的区别

    jquery.extend jquery.extend(),是拓展jquery这个类,即可以看作是jquery这个类本身的静态方法,例如: <!DOCTYPE html> <html ...

  6. 分享知识-快乐自己：mybatis 主键回调

    以下两种方式实现 主键回掉方式. <!--添加用户信息:主键回调--> <insert id="insertUser" useGeneratedKeys=&quo ...

  7. linux-常用指令2

    命令链接符                                                                                               ...

  8. 唐诗掠影：基于词移距离（Word Mover's Distance）的唐诗诗句匹配实践

    词移距离(Word Mover's Distance)是在词向量的基础上发展而来的用来衡量文档相似性的度量.   词移距离的具体介绍参考http://blog.csdn.net/qrlhl/artic ...

  9. 优秀开源项目之一：视频监控系统iSpy

    iSpy是一个开源的视频监控软件,目前已经支持中文.自己用了一下,感觉还是很好用的.翻译了一下它的介绍. iSpy将PC变成一个完整的安全和监控系统 iSpy使用您的摄像头和麦克风来检测和记录声音或运 ...

  10. 「LOJ#10050」「一本通 2.3 例 2」The XOR Largest Pair （Trie

    题目描述 在给定的 $N$ 个整数 $A_1,A_2,A_3...A_n$ 中选出两个进行异或运算,得到的结果最大是多少? 输入格式 第一行一个整数$N$. 第二行$N$个整数$A_i$. 输出格式 ...