<!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. db2中left()函数和right()函数对应oracle中的substr()函数

     DB2 LEFT.RIGHT函数 语法:LEFT(ARG,LENGTH).RIGHT(ARG,LENGTH) LEFT.RIGHT函数返回ARG最左边.右边的LENGTH个字符串,ARG可以是CHA ...

  2. 截断上传 CTF

    题目:上传绕过 介绍:http://teamxlc.sinaapp.com/web5/21232f297a57a5a743894a0e4a801fc3/index.html 1,我们打开链接,是个上传 ...

  3. c#使用PortableDeviceApiLib读取便携式设备(WPD:Windows Portable Devices)信息

    相关名词解释: WPD( Windows Portable Devices) 译作Windows 便携设备 (WPD) 是一种驱动程序技术,可支持广泛的可移动设备,比如移动电话.数码相机和便携媒体播放 ...

  4. Dynamics 365创建电子邮箱字段包含值的联系人同时更改负责人的方法。

    摘要: 本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复267或者20171129可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyon ...

  5. Java第一季

    1.Java常量的应用 语法:final 常量名 = 值: final String LOVE = "IMOOC"; final double PI = 3.14 举一个简单的例子 ...

  6. 【转】Cmder--Windows下命令行利器

    原文链接:https://www.cnblogs.com/zqzjs/archive/2016/12/19/6188605.html cmder cmder是一个增强型命令行工具,不仅可以使用wind ...

  7. Failed to load the JNI shared lib...

    启动eclipse报错:Failed to load the JNI shared lib... 解决办法如下:保证JDK与eclipse相匹配 在同一台计算机中,如果JDK是32位的,那么eclip ...

  8. openstack windows 2008镜像 制作

    openstack windows 2008镜像 制作 openstack centos6 centos7 kvm 镜像制作 http://www.cnblogs.com/elvi/p/7922421 ...

  9. 使用SpringBoot开发REST服务

    本文介绍如何基于Spring Boot搭建一个简易的REST服务框架,以及如何通过自定义注解实现Rest服务鉴权 搭建框架 pom.xml 首先,引入相关依赖,数据库使用mongodb,同时使用red ...

  10. nefu 115 循环节

    斐波那契的整除 Problem:115 Time Limit:1000ms Memory Limit:65536K Description 已知斐波那契数列有如下递归定义,f(1)=1,f(2)=1, ...