<!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

 </head>

 <body>

     <details open="">

         <summary>summary是配合details用的元素，给details设置标题</summary>

         这是details元素演示！

         <br>这是detail演示。

     </details>

     <form action="">

         用户名：<input type="text" name="username">学号<input type="text" name="sno" pattern="[0-9]{4,5}">

         密钥： <keygen name="keygen"><!--kengen是单标签，开发工具有bug，会自动补齐成双标签。-->

         <input type="submit" name="">

     </form>

     <form>

         <fieldset><legend>请登录：</legend>

             <input type="text" name="">

             <input type="password" name="">

             <input type="submit" name="">

         </fieldset>

         <br>

         <input type="text" name="">

         <input type="password" name="">

         <input type="submit" name="">

     </form>

     <hr>

     <form oninput="number.value=parseInt(number1.value)+parseInt(number2.value)">

         <input type="number" id="number1">+<input type="number" id="number2">=<output name="number" for="number1 number2" style="background: green"></output>

     </form>

     <br><hr>

     <form action="">

         <textarea name="textarea" cols="20" rows="6" placeholder="这是默认文本框内容" style="background: #E0FFFF" ></textarea>

         <button type="submit" style="background: #F0E68C;border-radius: 10px;padding: 10px" formaction="http://www.sogou.com">提交<img src="img/花1.jpg" width="10" height="10"></button> <button type="reset">重置</button><button type="button">普通按钮</button>

     </form>

     <form>

         <select>

             <optgroup label="前端">

                 <option>HTML5</option>

                 <option>CSS3.0</option>

                 <option>javascript</option>

             </optgroup>

             <optgroup label="后端">

                 <option label="javaEE">java</option><!--option元素中的label属性是高优先级，此时显示javaEE而不显示java了。-->

                 <option>Linux</option>

                 <option>MySQL</option>

             </optgroup>

         </select>

     </form>

     <form action="" id="form1" novalidate="">

         <br><hr>

         <input type="checkbox" name="" id="checkbox1"><label for="checkbox1">标签</label><!--和checkbox1关联，当点击标签时也会触发checkbox1动作-->

         <label><input type="radio" name="radio">男</label><label><input type="radio" name="radio">女</label><!--此法要去掉Label的for属性-->

         邮箱<input type="email" name="email1">

         <select name="myselect"><!--若想在提交时将此作为参数一并提交则需要加name属性。可用属性size="2" multiple-->

             <optgroup>

                 <option value="北京">北京</option>

                 <option value="上海">上海</option>

                 <option value="广州">广州</option>

                 <option value="深圳">深圳</option>

             </optgroup>

             <!--

             <optgroup>

                 <option value="北京">北京</option>

                 <option value="上海">上海</option>

                 <option value="广州">广州</option>

                 <option value="深圳">深圳</option>

             </optgroup>

             -->

         </select>

         <input type="submit">

     </form>

     <input type="text" list="datalist1" form="form1" name="input1"><!--form=form1的作用是form1表单的提交动作可以把input1也作为参数提交。-->

         <datalist id="datalist1">

             <option>合肥</option>

             <option>芜湖</option>

             <option>马鞍山</option>

         </datalist>        <br>

     meter元素<meter min="0" max="100" value="10" low="30" high="70" optimum="50"></meter><br>

     meter元素<meter min="0" max="100" value="30" low="30" high="70" optimum="50"></meter><br>

     meter元素<meter min="0" max="100" value="50" low="30" high="70" optimum="50"></meter><br>

     meter元素<meter min="0" max="100" value="70" low="30" high="70" optimum="50"></meter><br>

     meter元素<meter min="0" max="100" value="90" low="30" high="70" optimum="50"></meter><br>

     proress元素<progress value="1" max="10"><!--可设置小数value="0.1" max="1"-->

     <br>

 </body>

 </html>

一个实例：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <style type="text/css">

         body{background: #DCDCDC}

         form{width: 30%;background: #228b22;padding: 9px;margin-left: 450px;margin-top: 100px}

         button{background: #FFFACD;padding: 4px;border-radius: 8px}

         input{padding: 5px;}

         input:focus{background: #7FFF00}

         button:hover{padding: 9px;background: #FFFF00}

     </style>

 </head>

 <body>

     <form>

         <fieldset width="200" height="150"><legend>新用户注册</legend>

             <label for="username">用户名：</label><input type="text" id="username" placeholder="用户名" required="" autofocus=""><br><br>

             <label>密 码：<input type="password" name="" placeholder="密码"></label>

             <p><label>手    机：<input type="text" name="" pattern="1[0-9]{10}" placeholder="手机号码"></label></p>

             <label>邮    箱：<input type="email" name="" placeholder="电子邮箱"><br></label>

             <button>注册</button>

         </fieldset>

     </form>

 </body>

 </html>

【HTML5】增强的表单的更多相关文章

  1. HTML5增强的表单

    form元素a.用来定义一个表单,是建立表单的基础元素(就类似定义表格的table)b.表单的其他元素包含在form元素中,其主要子元素有:input/button/select......form元 ...

  2. HTML5跨浏览器表单及HTML5表单的渐进增强

    HTML5跨浏览器表单 http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-f ...

  3. HTML5的form表单属性

    form:HTML4中,表单内的从属元素必须书写在<form></form>之内,但是在HTML5中,表单的从属元素可以处于页面的任何位置,然后为其添加form属性,属性值为f ...

  4. HTML5 学习笔记 表单属性

    HTML5新的表单属性 HTML5 的form和input 标签添加了几个新的属性 <form>新属性 autocomplete novalidate input 新属性 autocomp ...

  5. [H5表单]html5自带表单验证体验优化及提示气泡修改

    慕课网之前录制的视频,js/jquery各种宽高的理解和应用,最近终于上线了.还有一个html5左侧导航没有上线!最近慕课网系列课程让我录制一个html5表单验证的课程.今天就稍微说一下表单验证!另外 ...

  6. html5中form表单新增属性以及改良的input标签元素的种类

    在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...

  7. HTML5新增的表单验证功能

    一.HTML5表单的特点: HTML5 表单增加了许多内置的控件和控件属性 XHTML 中需要放在 form 之中的诸如 input/button/select/textarea 等标签元素,在 HT ...

  8. html5 localStorage实现表单本地存储

    随笔开头,我不得不吐槽,为什么我的随笔每次发布之后,都会在分分钟之内移出首页.好气啊!! 进入正题了,项目中有许多表单输入框要填写,还有一些单选复选框之类的.用户可能在填写了大量的信息之后,不小心刷新 ...

  9. HTML5 web Form表单验证实例

    HTML5 web Form 的开发实例! index.html <!DOCTYPE html> <html> <head> <meta charset=&q ...

随机推荐

  1. 基于vue，打印机打印暂且处理

    基于vue单页面应用.暂且没找到合适的方案,什么vue-print  .jquery.print.js.jqprint.js..canvas生成图片啊 大多不能保证页面样式保持原样. 所以,选择了最土 ...

  2. angular2.x指令

    1.指令 *ngIf: 判断 isActive 为true时 <user-detail> 生效展示 <user-detail *ngIf="isActive"&g ...

  3. 【微软大法好】VS Tools for AI全攻略（3）

    接着上文,现在我们需要一种穷人的方法来搭建好Azure虚拟机. 思路很简单,因为AI组件的原理其实是传送了script文件和命令上去,那么我们这个虚拟机只要做好了所有的配置,那么我们就可以将它当作深度 ...

  4. azure上连续部署web

    连续部署web   连续部署web,可以在第一次部署完web应用后,方便修改和自动提交代码部署新版本的web应用.其中自动提交使用github中的webhook,使代码在master上提交修改后可以自 ...

  5. 【javaFX学习】（一） 建一个简单的界面

    转载注明出处:http://www.cnblogs.com/lensener/p/7976953.html 用过swing都知道有多蛋疼,界面有多丑.自从用了javaFX,腰也不酸了,腿也不疼了. 废 ...

  6. OC中只有重写没有重载

    一.类的继承 Objective-c中类的继承与C++类似,不同的是Objective-c不支持多重继承,一个类只能有一个父类,单继承使Objective-c的继承关系很简单,易于管理程序. 二.方法 ...

  7. 外观模式（Facade）

    外观模式(Facade) 外观模式是为了解决类与类之家的依赖关系的,像spring一样,可以将类和类之间的关系配置到配置文件中,而外观模式就是将他们的关系放在一个Facade类中,降低了类类之间的耦合 ...

  8. eclipse修改内存大小

    一般安装完eclipse之后,在安装目录下你应该可以看到有一个 eclipse.ini 文件,对了,就是在这个文件里面修改,我打开同事机器上这个文件,里面的内容是: -vmargs-Dosgi.spl ...

  9. Webpack3.0入门指南

    前言 本文是基于我厂基友的Webpack学习系列(一)初学者使用教程 这篇文章做构建.可能基友的文章是基于Mac环境,我是windows环境,在学习时遇到了很多坑,询问基友,他让我搞个基于window ...

  10. oracle概念

    .DDL 数据定义语言 create alter drop truncate .DML 数据操作语言 insert delete update select .TCL 事务控制语言 commit ro ...