首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

html5表单及新增的改良元素详解

Posted in HTML / CSS onJune 07, 2016
XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>    
  2. <html>    
  3.     <head>    
  4.         <meta charset="UTF-8">    
  5.         <title></title>    
  6.     </head>    
  7.     <body>    
  8.         <!--表单内元素的form属性：为元素指定一个form属性，属性值为该表单的id-->  
  9.         <form id="testform">    
  10.             <input type="submit" />    
  11.         </form>    
  12.         <textarea form="testform"></textarea> <br /><hr />    
  13.         <!--表单内元素的formaction属性：可以提交到不同页面-->  
  14.         <form id="form1" action="test.aspx">    
  15.             <input type="submit" name="s1" value="内部提交到test2" formaction="test2.aspx" />    
  16.             <input type="submit"  />    
  17.         </form>    
  18.         <!--formmethod:可以为每个表单元素指定不同的提交方法-->  
  19.         <form id="form2" action="test.aspx">    
  20.             name:<input type="text" name="name" /><br />    
  21.             <input type="submit" value="post方式提交"  formmethod="post"/>    
  22.             <input type="submit" value="get方式提交"  formmethod="get"/>    
  23.         </form><br/><hr />    
  24.         <!--formenctype:可以指定不同的编码方式-->  
  25.         <form action="test2.aspx" method="post">    
  26.             <input type="text" name="name" id="name" value="test" />    
  27.             文件:<input type="file" name="files" />    
  28.             <input type="submit"  value="上传" formaction="test.aspx"  formenctype="multipart/form-data"/>    
  29.             <input type="submit" value="提交" />    
  30.         </form><br /><hr />    
  31.         <!--formtarget:提交后再何处打开页面-->  
  32.         <form action="test.aspx">    
  33.             <input type="submit" name="s1"  value="s1本页打开" formaction="test2.aspx"  formtarget="_self"/>提交到test2    
  34.             <input type="submit" name="s"  value="s新页打开" formaction="test.aspx"  formtarget="_blank"/>提交到test    
  35.         </form><hr />    
  36.         <!--autofocus:自动获得光标焦点-->  
  37.         <input type="text" autofocus /><br />    
  38.         <!--control:通过该属性来访问该表单元素-->  
  39.         <form >    
  40.             <label id="label">    
  41.             邮编：<input id="txtzip" maxlength="6" /><small>请输入6位数字</small>    
  42.             </label>    
  43.             <input type="button" value="设置默认值" onclick="setValue()" />    
  44.         </form>    
  45.         <!--placeholder:未输入状态的输入提示-->  
  46.         <input type="text" placeholder="请输入内容" /><br />    
  47.         <!--list:单行文本框的list属性，属性值为datalist的id。    autocomplete：自动完成-->  
  48.         list属性：<input type="text" list="mylist" autocomplete="on"/>    
  49.         <datalist id="mylist" >    
  50.             <option value="第一">第一</option>    
  51.             <option value="第二">第二</option>    
  52.             <option value="第三">三</option>    
  53.         </datalist><br />    
  54.         <!--pattern：设置正则表达式验证-->  
  55.         <form>    
  56.         输入一个字母与三个大写字母：<input type="text" pattern="[0-9][A-Z]{3}"  required=""/>    
  57.         <input type="submit" />    
  58.         </form><br />    
  59.         <!--indeterminate:说明复选框处于尚未明确是否选取状态-->  
  60.         <input type="checkbox" indeterminate id="cb" />indeterminate<br />    
  61.         <!--image的height和width设置图片高宽-->  
  62.         设置图片宽高:<input type="image" src="img/webp.jpg" alt="编辑" width="23" height="23" /><br />    
  63.         <!--textarea:maxlength和wrap属性：hard换行也要指定cols，soft不换行-->  
  64.         <form action="test.aspx" method="post">    
  65.             <textarea name="name" maxlength="10" rows="5" cols="5" wrap="hard"></textarea>    
  66.             <input type="submit" value="提交" />    
  67.         </form><br />    
  68.      <!--url类型：只能提交url地址格式-->  
  69.         url:<input type="url" name="url"  required=""/><input type="submit" /><br />    
  70.         email:<input type="email" name="email" required=""/><input type="submit" /><br />    
  71.         date(谷歌浏览器)：<input type="date" name="date"  /><br />    
  72.         time(谷歌浏览器):<input type="time" name="time" /><br />    
  73.         datetime-local:<input type="datetime-local" name="datetime"  value="2016-05-26T22:31:30"/><br />    
  74.         <!--日期时间类型的step属性：单击调整时对选择值多大限定-->  
  75.         step：<input type="date" step="3" /><br /><hr />    
  76.         number:<input type="number"  value="25" min="10" min="20" max="30" step="2"  /><br />    
  77.         range：<input type="range" value="25" min="10" max="100" step="5" /><br />    
  78.         search:<input type="search"/><br />    
  79.         tel:<input type="tel"  /><br />    
  80.         color:<input type="color" /><br />    
  81.         <hr />    
  82.         output元素的追加：    
  83.         <form id="testform">    
  84.             请选择一个值:<input type="range" id="range" min="5" max="100" step="5" value="10" onchange="out();"/>    
  85.             <output id="out">10</output>    
  86.         </form>    
  87.     </body>    
  88. </html>    
  89. <script type="text/javascript">    
  90.     function setValue(){    
  91.         var lable=document.getElementById("label");    
  92.         var txtbox=lable.control;//通过control该属性来访问该表单元素    
  93.         txtbox.value="213001";    
  94.     }    
  95.     //indeterminate测试设置为true    
  96.     var cb=document.getElementById("cb");    
  97.     cb.indeterminate=true;    
  98.     //选择的值output输出    
  99.     function out(){    
  100.         Debug;    
  101.         var number=document.getElementById("range").value;    
  102.         document.getElementById("out").value=number;    
  103.     }    
  104. </script>  

念念不忘，必有回响。技术成就梦想！

以上这篇html5表单及新增的改良元素详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

原文地址：http://www.cnblogs.com/qinyi173/archive/2016/06/06/5565163.html

html5表单及新增的改良元素详解

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
利用CSS3的flexbox实现水平垂直居中与三列等高布局
Sep 12 HTML / CSS
通过css3动画和opacity透明度实现呼吸灯效果
Aug 09 HTML / CSS
CSS3的Flexbox布局的简明入门指南
Apr 08 HTML / CSS
css3如何绘制一个圆圆的loading转圈动画
Jan 09 HTML / CSS
CSS3改变浏览器滚动条样式
Jan 04 HTML / CSS
css3 中translate和transition的使用方法
Mar 26 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
Jun 03 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
html5 offlline 缓存使用示例
Jun 24 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
May 07 HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
10个最常见的HTML5面试题 附答案
Jun 06 #HTML / CSS
12个不为大家熟知的HTML5设计小技巧
Jun 02 #HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 #HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
Jun 01 #HTML / CSS
h5调用摄像头的实现方法
Jun 01 #HTML / CSS
HTML5拖拽的简单实例
May 30 #HTML / CSS
HTML5对比HTML4的主要改变和改进总结
May 27 #HTML / CSS
证明书(326) 感谢信(72) 制度(225) 评语(336) 保证书(97) 答谢词(97) 倡议书(159) 接收函(23) 计划书(118) 寄语(276)
You might like
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
js函数setTimeout延迟执行的简单介绍
2013/07/17 Javascript
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
2015/10/28 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
解决pandas使用read_csv()读取文件遇到的问题
2018/06/15 Python
python实现列表中由数值查到索引的方法
2018/06/27 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
前端实现打印图像功能
2019/08/27 HTML / CSS
Nike荷兰官方网站：Nike.com (NL)
2018/04/19 全球购物
美国最大的半成品净菜电商：Blue Apron（蓝围裙）
2018/04/27 全球购物
意大利咖啡、浓缩咖啡和浓缩咖啡机：illy caffe
2019/03/20 全球购物
曼城官方网上商店：Manchester City
2019/09/10 全球购物
Shop Apotheke瑞士：您的健康与美容网上商店
2019/10/09 全球购物
高三自我鉴定
2013/10/23 职场文书
生物专业个人自荐信范文
2013/11/29 职场文书
党风廉设责任书
2014/04/16 职场文书
优秀纪检干部材料
2014/08/27 职场文书
家庭贫困证明范本（经典版）
2014/09/22 职场文书
三严三实民主生活会发言稿
2014/10/13 职场文书
简单的辞职信模板
2015/05/12 职场文书
入党申请书怎么写?
2019/06/11 职场文书
浅谈Python数学建模之线性规划
2021/06/23 Python
全新239军机修复记
2022/04/05 无线电