<!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. ButterKnife的使用以及不能自动生成代码问题的解决

    ButterKnife的使用以及不能自动生成代码问题的解决 转载请注明出处:http://www.cnblogs.com/zhengjunfei/p/5910497.html 最近换了个工作刚入职,又 ...

  2. 【Java入门提高篇】Day2 接口

    上一篇讲完了抽象类,这一篇主要讲解比抽象类更加抽象的内容--接口. 什么是接口呢?先来看个栗子: /** * @author Frank * @create 2017/11/22 * @descrip ...

  3. configpraser模块

    configpraser配置文件,example.conf [data] #节点 username = Jason password = 123 [public] comment = stuff pu ...

  4. AES加密实现

    起因 这段时间因为要对接一个外部接口,其参数的加密方式为AES,就需要学下AES的加密写法,但网上的资料不是很全,自己记录下遇到的坑: 基本写法 String str = "hello&qu ...

  5. linux如何在日志中查找关键字、前几行、结尾几行

    如何使用命令行快速查看项目日志是每个开发人员必备技能,尤其在没有专门日志搜集系统的情况下,想要知道目前项目运行状态最好的办法就是打开log日志一瞅即明白. 复杂的到用时再查不晚,但是简单的还是有必要掌 ...

  6. kafka 集群搭建

    环境:ubuntu14.04 版本:jdk1.8,zookeeper 3.4.10,kafka 2.11 搭建步骤: 1. 搭建zookeeper集群 参考链接:zookeeper集群搭建 2. 下载 ...

  7. 《java.util.concurrent 包源码阅读》16 一种特别的BlockingQueue：SynchronousQueue

    SynchronousQueue是一种很特别的BlockingQueue,任何一个添加元素的操作都必须等到另外一个线程拿走元素才会结束.也就是SynchronousQueue本身不会存储任何元素,相当 ...

  8. haproxy1.7编译安装配置

    #haproxy1.7编译安装配置#高可用.负载均衡 使用 #haproxy1.7编译安装配置 #centos7 x86_64 #高可用.负载均衡 使用 #下载 #http://www.haproxy ...

  9. 利用阿里云Centos7建站过程

    以下可能不尽详述,如有问题欢迎指出 准备过程:1. 阿里云主机一台2.域名一个 3.github个人帐号开始: 1.以root帐号登录云主机 2.安装apache [root@192 ~]# yum ...

  10. 利用python web框架django实现py-faster-rcnn demo实例

    操作系统.编程环境及其他: window7  cpu  python2.7  pycharm5.0  django1.8x 说明:本blog是上一篇blog(http://www.cnblogs.co ...