<!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. 算法（Algorithms）第4版 练习 1.5.15

    用归纳法推导: 1.height = 0时,成立,其level 0的节点个数为C(0,0)=1. height = 1时,成立,其level 0的节点个数为C(1,0)=1,其level 1的节点个数 ...

  2. MySQL部署时Table 'mysql.plugin' doesn't exist的解决

    今天部署了免安装版的MySQL,出现了Table 'mysql.plugin' doesn't exist的问题,苦恼了好久,终于在网上找到了解决方案,现整理一下给大家分享: 系统环境:Win10 6 ...

  3. css 动画的例子

    1. [代码]   <!DOCTYPE HTML><html><head><meta charset="utf-8"><tit ...

  4. Codeforces 448C Painting Fence：分治

    题目链接:http://codeforces.com/problemset/problem/448/C 题意: 有n个木板竖着插成一排栅栏,第i块木板高度为a[i]. 你现在要将栅栏上所有地方刷上油漆 ...

  5. MySQL查询in操作 查询结果按in集合顺序显示

    偶尔看到的...或许有人会注意过,但我以前真不知道 SQL: select * from table where id IN (3,6,9,1,2,5,8,7); 这样的情况取出来后,其实,id还是按 ...

  6. SQL2005 2008配置错误，无法识别的配置节 system.serviceModel machine.config配置文件有问题

    当装上2008的时候,你以前的程序突然报出你的machine.config配置文件有问题,比如 “/” 应用程序中的服务器错误. 配置错误 说明 : 在处理向该请求提供服务所需的配置文件时出错.请检查 ...

  7. python_doc 读写docx文件

    python读写word文档有现成的库可以处理,在这里采用了 python-docx. 首先先安装 pip install python-docx #!/usr/bin/env python # -* ...

  8. HDU - 5934

    tarjan 视频讲解 /** * 题目链接:https://vjudge.net/problem/HDU-5934 * 题意:给你n个炸弹,引爆每个炸弹会有一定的花费.每个炸弹给出坐标x,y,半径r ...

  9. python中zip()函数基本用法

    zip()函数接受一系列可迭代对象作为参数,将不同对象中相对应的元素打包成一个元组(tuple),返回由这些元组组成的list列表,如果传入的参数的长度不等,则返回的list列表的长度和传入参数中 ...

  10. bzoj 2510: 弱题 概率期望dp+循环矩阵

    题目: Description 有M个球,一开始每个球均有一个初始标号,标号范围为1-N且为整数,标号为i的球有ai个,并保证Σai = M. 每次操作等概率取出一个球(即取出每个球的概率均为1/M) ...