<!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. C++中的右结合性

    看到网上的说是,右结合 但是还是从左往右算 // 以下说法是从网上看的,不知道对不 a ? b : c ? d : e 如何进行呢? 它的结合律是从右向左,所以它等效于 a ? b : ( c ? d ...

  2. python-socket1

    如何理解socket编程 就是两个进程,跨计算机,他俩需要通讯的话,需要通过网络对接起来.这就是 socket 的作用.打个比方吧,两个进程在两个计算机上,需要有一个进程做被动方,叫做服务器.另一个做 ...

  3. Git之Eclipse提交项目到Github并实现多人协作

    一.Eclipece提交项目到Github 见  eclipse提交项目到github 二.利用github组织实现多人协作 1.新建组织: New organization

  4. Skype SILK codec overview

    最近简单看了一下Skype SILK codec 算法, 基本原理和流程大体明白了, 以后有时间再仔细研究一下细节,今天就简单说说. SILK Codec是一个语音和音频编解码算法, 对于音频带宽.网 ...

  5. 【原创】C++实现获取本机机器名及外网IP代码

    上代码: #include "stdafx.h" #include <WINSOCK2.H> #include <urlmon.h> #pragma com ...

  6. 【Facebook】等差子序列个数

    题目: 给定一整数数列,问数列有多少个子序列是等差数列. 即对于包含N个数的数列A,A(0),A(1),……,A(N-1),有多少组(P(0),P(1),……,P(k))满足0<=P(0)< ...

  7. 霍夫变换Hough

    http://blog.csdn.net/sudohello/article/details/51335237 霍夫变换Hough 霍夫变换(Hough)是一个非常重要的检测间断点边界形状的方法.它通 ...

  8. 无密码登录Linux服务器

    1.使用windows上的SecureCRT生成密钥对. Tools->Create Public Key..->RSA->Passphrase(最好输入,也可为空)->长度默 ...

  9. 问题5：如何快速找到多个字典中的公共键(key)

    方法一:for in循环 from random import randint, sample a1 = {k; randint(1, 4) for k in 'abcdefg'} a2 = {k; ...

  10. tomcat部署虚拟主机-搭建两个应用以及httpd和Nginx的反向代理

    实验环境:CentOS7 前提:已经安装好tomcat,未安装请查看http://www.cnblogs.com/wzhuo/p/7111135.html: 目的:基于主机名访问两个应用: [root ...