<!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. IE Firefox css 差别

    1.单位问题 问题:任何距离的数值ie可以不加单位,ff必须要求写单位(0除外) 解决:写全单位如padding:0px; 2.水平居中 问题:div里的内容,ie默认为center,而ff默认lef ...

  2. TortoiseGit做push时提示Disconnected: No supported authentication methods available (server sent: publickey)错误

    通过Git从远程服务器上获得到自己的项目,但是通过TortoiseGit做push时提示Disconnected: No supported authentication methods availa ...

  3. jQuery学习（3）

    可以在select中设置size属性的属性值,从而让下拉列表中的选项都显示出来. <!DOCTYPE html> <html> <head> <title&g ...

  4. 智课雅思词汇---十四、ante,anti不仅是词根还是前缀

    智课雅思词汇---十四.ante,anti不仅是词根还是前缀 一.总结 一句话总结:来源于拉丁语 ante 前.词根ant 为 anti 的变体.ante,anti不仅是词根还是前缀. 词根:ante ...

  5. python生成excel格式座位表

    脚本分两个文件: 1.生成二维随机列表:GenerateLocaltion.py 2.将列表导入excel文件:CreateExcel.py 先上GenerateLocaltion.py: impor ...

  6. the referenced script on this behaviour is missing!

    1.看看你脚本上挂的某个组件是不是发生了变动,比如被删除了什么的 2.最有可能的是你创建完脚本后,中途改过脚本的名字,致使脚本名字和内部的名字不统一.

  7. 启用Linux云平台oracle数据库实口令复杂性函数：PASSWORD_VERIFY_FUNCTION=NULL

    第一步:采用putty.exe登录数据库服务器. 输入IP后点击“Open”按钮: 第二步:登录对应的数据库实例. 执行:# su – oracle 查找:$ps -ef | grep pmon 找到 ...

  8. BestCoder Round #93 比赛记录

    机房又迎来了一次BC.大家都沸腾了... BC开场,大家全都瞬间开始 啪啦啪啦啪啦啪啦 都要赶紧水过第一题. 第一题明显直接贪心就好了,用map去重. 本人荣幸地第一个写完,提交 Wa. (崩溃的内心 ...

  9. bzoj 2002: 弹飞绵羊 Link-Cut-Tree

    题目: Description 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏一开始,Lostmonkey在地上沿着一条直线摆上n个装置, ...

  10. poj2420 A Star not a Tree? 模拟退火

    题目大意: 给定n个点,求一个点,使其到这n个点的距离最小.(\(n \leq 100\)) 题解 模拟退火上 #include <cmath> #include <cstdio&g ...