<!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. JS中JSON对象的定义和取值

    1.JSON(JavaScript Object Notation)一种简单的数据格式,比xml更轻巧.JSON是JavaScript原生格式,这意味着在JavaScript中处理JSON数据不需要任 ...

  2. Python 学习之路3

    接下来把剩下的实验一起写上去 实验2 写一个学生类,属性有学号,姓名,成绩(三门),方法有输出,求平均成绩. 设计思路: 1．         先写一个学生类,并向里面写一个求平均值和输出信息的方法. ...

  3. c语言的内存分析

    1. 进制 1. 什么是进制 ● 是一种计数的方式,数值的表示形式  汉字:十一   十进制:11  二进制:1011  八进制:13 ● 多种进制:十进制.二进制.八进制.十六进制.也就是说,同一个 ...

  4. [阿里云部署] Ubuntu+Flask+Nginx+uWSGI+Mysql搭建阿里云Web服务器

    部署地址:123.56.7.181 Ubuntu+Flask+Nginx+uWSGI+Mysql搭建阿里云Web服务器 这个标题就比之前的"ECS服务器配置Web环境的全过程及参考资料&qu ...

  5. ESLint 的正式使用感受

    介绍ESLint ESLint 是一个代码规范和错误检查工具,有以下几个特性 所有东西都是可以插拔的.你可以调用任意的rule api或者formatter api 去打包或者定义rule or fo ...

  6. Python将纳入高考？

    最近,"Python将纳入高考"的消息,狠狠地刷了朋友圈. 尽管这则消息目前还未得到官方的确认,但人们对于Python的火热关注度,还是引来众程序员热议. 虽然小编资历尚浅,但还是 ...

  7. c++ 中 pair 的 使用方法

    原转载地址:点击打开链接 pair的类型: pair 是 一种模版类型.每个pair 可以存储两个值.这两种值无限制.也可以将自己写的struct的对象放进去.. pair<string,int ...

  8. AngularJS 控制器通信

    指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式 基于scope继承的方式 最简单的让控制器之间进行通信的方法是通过scope的继承 ...

  9. DEBUG技巧-设定合适的日志级别

    有些技能只有踩过坑的人才能够掌握,能用来避免后来的坑,很多时候是用凌晨的时间换来的,我们通常把他叫做经验. 故事 这个一个关于springmvc的坑的故事. 某天晚上本打算一个小功能分分钟搞定上线,但 ...

  10. Object-Relational Structural Patterns

    Single Table Inheritance Represents an inheritance hierarchy of classes as a single table that has c ...