<!DOCTYPE html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>form表单学习笔记</title>

</head>

<body>

    <!-- 在旧版的html中，form表单与input等元素必须嵌套使用，为了排版方便，在html中提出了新方法

         表单的多个内容不必非得放到一块，为前台美工提供了很大的方便-->

          <!-- 首先新建一个form表单，给其定义一个id -->

          <form id="regForm">

          邮箱 :<input type="email" name="user_email" autofocus="autofocus"/>

          </form>

          <!-- 然后定义一个其他标签，比如input，submit，关联这个id -->

          用户名：<input name="name" type="text" form="regForm"/>

                  <input type="submit" form="regForm"/>

          <!-- 点击按钮时，按默认方式提交，可以在地址栏看到提交信息 -->

    <!--  关于html5新增的一些input属性，在我的另一篇文章这种专门讲过，给大家个链接，在这里就不在赘述了。 -->

          http://blog.csdn.net/u012116457/article/details/24577509

    <!-- 下来讲一下新增的表单属性   -->

          1.属性：required  值：required  表单拥有该属性表示内容不能为空，为必填项

              <input name="name" type="password" required="required" form="regForm"/>

          2.属性：placeholder 值：提示文本  表单的提示信息，若存在默认值则不显示

              <!-- 讲这个属性有必要先搞明白旧版本中是怎么提示默认值的，旧版本使用的是value属性 -->

                  用户名：<input type="text" name="name" value="默认值" form="regForm"/>

              <!-- 当点击提交时，若用户不对其进行修改，会把“默认值”这三个字也传向后台，而我们往往不需要，

              html5为我们提供的这个新属性，如果用户不对默认值进行修改，其内容将不会被提交 -->

                  用户名：<input type="text" name="name" placeholder="默认值" form="regForm"/>

              <!-- 在表现形式上也有所改变，大家可以自己试试 -->

          3.属性：autofocus 值：autofocus    自动聚焦属性，页面加载完成后光标会自动聚焦到指定表单

                  用户名：<input type="text" name="name" autofocus="autofocus" form="regForm"/>

                  刷新页面后，光标会自动聚焦到该文本框中

          4.属性：Pattern 值：正则表达式   输入的内容必须匹配到指定正则

                <!-- 在以往的html中使用正则需要写到js等里边，html5中可以直接使用正则表达式，在html中就可以直接判断，

                是不是省了好多事情呢？ -->

                <!-- 下面这个例子中正则的意思是只能输入8位数字，在前台页面，若不符合规则，会提示格式不对 -->

                  学号：<input type="text" name="num" Pattern="\d{8}"/>

</body>

</html>

玩转html5(三)---智能表单（form），使排版更加方便的更多相关文章

  1. 第86天：HTML5应用程序标签和智能表单

    一.HTML5应用程序标签 1.datalist需要数据载体 input list属性指向数据源 2.progress进度条 -webkit-appearance: none;   /*如果要改默认样 ...

  2. HTML5 智能表单

    HTML5 智能表单 1.表单新增属性  ☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文 ...

  3. HTML5智能表单

    HTML5 智能表单 1.表单新增属性  ☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文 ...

  4. BootStrap 智能表单系列 三 分块表单配置的介绍

    相信广大博友肯定碰到过一个编辑页面分了很多块的情况,智能表单插件已经为您支持了这种情况, 代码如下(链接地址:https://github.com/xiexingen/Bootstrap-SmartF ...

  5. form的智能表单

    1.智能表单的介绍 其中,(1)中的使用格式使得form不会太臃肿. 2.使用规范 3.新属性 4.举例 二.程序 1.关于邮件的问题 <!DOCTYPE html> <head&g ...

  6. HTML5_智能表单

    1.HTML5中为了方便排版,可以使from中的表单标签脱离from的嵌套.方法:from指定ID,所有表单标签均添加from=id属性. <form action="http://l ...

  7. BootStrap 智能表单系列 首页 (持续更新中...)

    背景:本码农.NET后端工程师,在项目开发中发现写了很多重复的代码, 于是自己整了一套根据配置来生成form表单的插件,针对表单的改动仅需要修改配置的json即可 使用中发现还是蛮实用的,于是开源出来 ...

  8. BootStrap 智能表单系列 四 表单布局介绍

    表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是 ...

  9. BootStrap 智能表单系列 二 BootStrap支持的类型简介

    代码如下(链接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form1-basic.html): <! ...

随机推荐

  1. 数据结构——bitmap

    近期在看<编程珠玑>这本书. 第1章中引入了bitmap(位图)的数据结构. 曾经没有接触过, 抽出时间研究了一下,记录下来. 书中描写叙述的情景: 1. 最多1000万个7位数电话号码( ...

  2. STL的一些泛型算法

    源地址:http://blog.csdn.net/byijie/article/details/8142859 从福州大学资料里摘下来的我现在能理解的泛型算法 algorithm min(a,b) 返 ...

  3. kobox ： key_wq.c -v1 如何使用工作队列 workqueue

    kobox: key_wq.c - v1 说明: TQ2440主要驱动因素,四个按键驱动的处理 key_wq.c和key.c类别似,与key.c之间的差异的主要驱动力: key.c使用计时器,在中断发 ...

  4. Java_并发线程_CompletionService

    1.CompletionService源代码分析 CompletionService内部实现还是维护了一个可堵塞的队列,通过代理设计模式.从而操作队列. /** * Creates an Execut ...

  5. atitit.高级编程语言的特性 and 未来趋势与进化.doc

    atitit.高级编程语言的特性 and 未来趋势与进化.doc 1 编程语言的发展历程 1 1.1 编程语言的进化,起始发现背后的思想 :不论什么两个系统之间的复杂性,都能够通过加入一个抽象层要屏蔽 ...

  6. C#基础总结之Attribute

    Attribute是什么 Attribute的中文姓名 为什么我要拿一段文字来说Attribute的中文姓名呢?答案是:因为这很重要.正所谓“名”不正,则言不顺:另外重构手法中有一种很重要的方法叫重命 ...

  7. 【Java探索道路安全系列：Java可扩展的安全架构】一间：Java可扩展的安全体系结构开始

    笔者:郭嘉 邮箱:allenwells@163.com 博客:http://blog.csdn.net/allenwells github:https://github.com/AllenWell [ ...

  8. POJ3050 Hopscotch 【DFS】

    Hopscotch Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2113   Accepted: 1514 Descrip ...

  9. PHP实现冒泡排序、双向冒泡排序算法

    冒泡排序(Bubble Sort),是一种较简单的.稳定的排序算法.冒泡排序算法步骤:比较相邻的元素,如果第一个比第二个大,就交换他们两个的位置:对每对相邻的元素执行同样的操作,这样一趟下来,最后的元 ...

  10. poj 3172 Scales 搜索

    其实这个题目要是注意到了题目的一点关键性的描述就会变得很简单,题意是给出的砝码是至少是前两个的和的,有了这一点,那么砝码的数量应该就在几十左右,这样的话适当剪枝的搜索是应该可以过的. #include ...