zoukankan      html  css  js  c++  java
  • 玩转html5(三)---智能表单(form),使排版更加方便

    <!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 -->
              username:<input name="name" type="text" form="regForm"/>
                      <input type="submit" form="regForm"/>
              <!-- 点击button时,按默认方式提交,能够在地址栏看到提交信息 -->
        <!--  关于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属性 -->
                      username:<input type="text" name="name" value="默认值" form="regForm"/>
                  <!-- 当点击提交时,若用户不正确其进行改动,会把“默认值”这三个字也传向后台,而我们往往不须要,
                  html5为我们提供的这个新属性,假设用户不正确默认值进行改动,其内容将不会被提交 -->
                      username:<input type="text" name="name" placeholder="默认值" form="regForm"/>
                  <!-- 在表现形式上也有所改变,大家能够自己试试 -->
    
              3.属性:autofocus 值:autofocus    自己主动聚焦属性,页面载入完毕后光标会自己主动聚焦到指定表单
                      username:<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>


    请珍惜小编劳动成果,该文章为小编原创,转载请注明出处。

  • 相关阅读:
    postgresql允许远程访问的配置修改
    Oracle常用监控sql语句
    Python Twisted 学习系列22(转载stulife最棒的Twisted入门教程)
    Python Twisted 学习系列21(转载stulife最棒的Twisted入门教程)
    有趣的题目
    入学测试题详解
    完成这个例子,说出java中针对异常的处理机制。
    遍历Map key-value的两种方法
    java中的 FileWriter类 和 FileReader类
    Java中Split函数的用法技巧
  • 原文地址:https://www.cnblogs.com/gcczhongduan/p/3991415.html
Copyright © 2011-2022 走看看