玩转 html5 (三) --- 智能表单 (form), 使排版更加方便

[html] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. <!DOCTYPE html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  4.     <title>form表单学习笔记</title>  
  5. </head>  
  6. <body>  
  7.     <!-- 在旧版的html中,form表单与input等元素必须嵌套使用,为了排版方便,在html中提出了新方法   
  8.          表单的多个内容不必非得放到一块,为前台美工提供了很大的方便-->  
  9.           <!-- 首先新建一个form表单,给其定义一个id -->  
  10.           <form id="regForm">     
  11.           邮箱 :<input type="email" name="user_email" autofocus="autofocus"/>  
  12.           </form>  
  13.           <!-- 然后定义一个其他标签,比如input,submit,关联这个id -->  
  14.           用户名:<input name="name" type="text" form="regForm"/>  
  15.                   <input type="submit" form="regForm"/>  
  16.           <!-- 点击按钮时,按默认方式提交,可以在地址栏看到提交信息 -->  
  17.     <!--  关于html5新增的一些input属性,在我的另一篇文章这种专门讲过,给大家个链接,在这里就不在赘述了。 -->  
  18.           http://blog.csdn.net/u012116457/article/details/24577509  
  19.     <!-- 下来讲一下新增的表单属性   -->  
  20.           1.属性:required  值:required  表单拥有该属性表示内容不能为空,为必填项  
  21.               <input name="name" type="password" required="required" form="regForm"/>      
  22.           2.属性:placeholder 值:提示文本  表单的提示信息,若存在默认值则不显示  
  23.               <!-- 讲这个属性有必要先搞明白旧版本中是怎么提示默认值的,旧版本使用的是value属性 -->  
  24.                   用户名:<input type="text" name="name" value="默认值" form="regForm"/>  
  25.               <!-- 当点击提交时,若用户不对其进行修改,会把“默认值”这三个字也传向后台,而我们往往不需要,  
  26.               html5为我们提供的这个新属性,如果用户不对默认值进行修改,其内容将不会被提交 -->  
  27.                   用户名:<input type="text" name="name" placeholder="默认值" form="regForm"/>  
  28.               <!-- 在表现形式上也有所改变,大家可以自己试试 -->  
  29.   
  30.           3.属性:autofocus 值:autofocus    自动聚焦属性,页面加载完成后光标会自动聚焦到指定表单  
  31.                   用户名:<input type="text" name="name" autofocus="autofocus" form="regForm"/>  
  32.                   刷新页面后,光标会自动聚焦到该文本框中  
  33.           4.属性:Pattern 值:正则表达式   输入的内容必须匹配到指定正则  
  34.                 <!-- 在以往的html中使用正则需要写到js等里边,html5中可以直接使用正则表达式,在html中就可以直接判断,  
  35.                 是不是省了好多事情呢? -->  
  36.                 <!-- 下面这个例子中正则的意思是只能输入8位数字,在前台页面,若不符合规则,会提示格式不对 -->  
  37.                   学号:<input type="text" name="num" Pattern="\d{8}"/>  
  38.   
  39. </body>  
  40. </html>  
  41.  
Per informazioni più dettagliate sulle ottimizzazioni basate su compilatore, vedere il nostro Avviso sull'ottimizzazione.