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 -->
              用户名:<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>


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

    版权声明:本文为博主原创文章,未经博主允许不得转载。

  • 相关阅读:
    PAT (Advanced Level) 1086. Tree Traversals Again (25)
    PAT (Advanced Level) 1085. Perfect Sequence (25)
    PAT (Advanced Level) 1084. Broken Keyboard (20)
    PAT (Advanced Level) 1083. List Grades (25)
    PAT (Advanced Level) 1082. Read Number in Chinese (25)
    HDU 4513 吉哥系列故事――完美队形II
    POJ Oulipo KMP 模板题
    POJ 3376 Finding Palindromes
    扩展KMP
    HDU 2289 Cup
  • 原文地址:https://www.cnblogs.com/dingxiaoyue/p/4931810.html
Copyright © 2011-2022 走看看