<!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. 详谈JavaScript原型链

    目录 创建对象有几种方法 原型.构造函数.实例.原型链 instanceof的原理 new运算符 创建对象的方法 在了解原型链之前,首先先了解一下创建对象的几种方式,介绍以下三种. 代码: <s ...

  2. 关于laravel 用paginate()取值取不到的问题

    前几天在写api的时候,出现了一个比较奇怪的问题,用paginate()方法取值取不到的问题,我奇怪的是,我用paginate()方法取值是直接复制粘贴之前自己写过的api中的代码的,怎么突然取不到了 ...

  3. MYSQL无法使用索引的场景

    设计优化–无法使用索引的场景 •通过索引扫描的记录数超过30%,变成全表扫描 •联合索引中,第一个索引列使用范围查询--只能用到部分索引 •联合索引中,第一个查询条件不是最左索引列 •模糊查询条件列最 ...

  4. RFID电动自行车与共享单车之物联网比较

    目前比较热门的RFID电动自行车管理和共享单车,都是属于物联网范畴.它们之间有什么不同呢? 1.RFID电动自行车管理系统原理 RFID电动自行车管理,利用了有源RFID技术,使用基站SR8读取安装在 ...

  5. 【ASP.NET Core】运行原理之启动WebHost

    ASP.NET Core运行原理之启动WebHost 本节将分析WebHost.CreateDefaultBuilder(args).UseStartup<Startup>().Build ...

  6. 在cmd中运行android.bat报出空指针异常

    因启动SDK manager和启动AVD manager 都发生闪退现象,网上很多方法都无法解决 又在cmd 中执行运行 D:\Program Files\Android_SDK\sdk\tools& ...

  7. mysql事务使用 超简单

    MySQL的事务支持不是绑定在MySQL服务器本身,而是与存储引擎相关1.MyISAM:不支持事务,用于只读程序提高性能 2.InnoDB:支持ACID事务.行级锁.并发 3.Berkeley DB: ...

  8. Web前端学习——HTML

    HTML其实还是蛮容易学习的,无非就是一些标签.格式的填写,大学的时候也做过网站设计,所以这里主要记录一些常用的HTML标签.属性以及书写方法等. 一.常见HTML格式 主要包含文件type,html ...

  9. Dubbo源码学习--服务发布（DubboProtocol、Exporter）

    在Dubbo服务发布的整体流程一文中,只是分析了服务发布的整体流程,具体的细节还没有进一步分析.本节将继续分析服务暴露的过程.在ServiceConfig中通过一句话即可暴露服务,如下: Export ...

  10. 毕达哥拉斯树(pythagorasTree)原理解析及canvas动画实现

    以前就看到了这个东西,由于太忙了最近才有时间来实现这个; 该文章适合有一定 canvas 基础的人阅读; 首先说说他的原理: The construction of the Pythagoras tr ...