HTML5 智能表單

1、表單新增屬性

 ☀ autofocus 屬性

<input type="text" autofocus/>設置 autofocus 屬性，使文本框自動獲得焦點

注意:一個頁面中最多只能有一個表單元素設置該屬性，否則功能將失效，建議對第一個input元素設置autofocus屬性。

 

☀ formaction 屬性

<input type="submit" formaction="處理邏輯"><!-- 處理邏輯可為add.jsp(添加)、update.jsp(修改)、delete.jsp(刪除)。 -->

所有提交按鈕(<input type="submit">、<input type="image">、<button type="submit">)都可以使用 formaction 屬性。

HTML5只需添加formaction屬性就可實現增加、修改和刪除3個按鈕功能，不再需要腳本的控制。

 

☀ autocomplete 屬性

若一個元素內包含有 autocomplete="off" 屬性，這意味着涉及機密信息，不應被瀏覽器保存。

若表單未定義 autocomplete，則默認設置為開啟自動完成、顯示輸入提示(記憶用戶在曾訪問網站上所輸入的內容)。

 

☀ pattern 屬性

pattern 屬性是input元素的驗證屬性，該屬性的值是一個正則表達式，通過這個表達式可以驗證輸入內容的有效性。

用戶名：<input type="text" name="username" pattern="^[a-zA-Z]\w{2,7}" title="必須以字母開頭,包含字符或數字,長度是3~8"/><br/>
密碼：<input type="text" name="password" pattern="\d{6}" title="必須輸入6個數字" /><br />

☀ placeholder 屬性，也叫占位符

占位符值可以給予用戶一個快速提示，讓他們了解該在輸入字段中輸入什么，它並不會取代標簽元素。當需要用戶輸入某一特定格式的內容時，

占位符顯得尤其有用。瀏覽器會在輸入字段顯示提示文字。當該輸入字段被聚焦(focus)激活，該提示文字則消失，失去焦點時又將自動顯示。

姓名：<input type="text" placeholder="請輸入您的真實姓名" name="username"><br />

required 屬性  定義必填項

required 是一個布爾型屬性，包含此屬性的表單元素必須被填寫。在發送時若仍為空，瀏覽器就會給予相關相應。

 

2、新增的 input 元素類型

☀ 輸入類型 tel 及 search

tel(電話輸入文本) 及 search(搜索關鍵字輸入的文本框) 類型與普通的文本沒什么不同，

唯一不同的是輸入關鍵字后search文本框右側會出現一個"X"按鈕，單擊"X"后清空輸入內容，由此帶來方便。

 

☀ 輸入類型 url 及 email

URL地址輸入框要求必須輸入一個包含訪問協議的完整的URL路徑。

URL網址：<input type="url" name="rul" title="URL應包括訪問協議">

email郵箱輸入框要求輸入正確格式，此外，還可以添加 multiple 屬性以允許同時輸入多個以逗號分隔的email。

Email：<input type="email" name="email" title="email的格式是 [e-mail] ">

☀ 輸入類型 number 及 range

number 及 range 類型與包含數值的輸入有關，並且支持浮點數表達式。不同的是range類型是用一個滑塊來進行輸入。

輸入數值的取值范圍由 min和 max兩個屬性來設置，默認是不限定；調節步長使用 step屬性，默認步長是1.

<input type="number/range" min="最小值" max="最大值" step="改變數值的步長" name="number/range">

☀ 輸入類型 color

color 類型讓 input元素生成一個顏色選擇器。<input type="color" name="color">

☀ datalist 選項列表

datalist 元素用於生成一個隱藏的下拉菜單，其相當於一個“看不見”的 select元素。為什么需要設置id值呢？

因為 datalist元素一般需要跟某個文本框結合使用，結合方式是通過將文本框的"list"屬性值設置為 datalist的 id值，這樣就將 datalist綁定到了某個文本框。用戶選中選項后datalist元素自動隱藏。記住，跟文本框一起使用並給文本框list和自身id相同的值。

    <input type="text" name="degree" form="register" list="degree">
    <datalist id="degree">
      <option label="top1" value="大專"></option>
      <option label="top2" value="本科"></option>
      <option label="top3" value="研究生"></option>
    </datalist>

 

☀ 用 datetime(日期和時間),date(日期),time(時間),month,week以及 datetime-local(本地日期時間)這幾個type類型表示日期和時間

<input type="datetime/date/time/month/week/datetime-local" name="...">

datetime包括日期以及時間信息；時間設置始終為UTC。規范允許用戶通過瀏覽器選擇不同時區，但input元素的值始終會被轉換為UTC格式。datetime屬性 字符串必須以 Z 結束以表明它是UTC格式。"YYYY-MM-DDThh:mm:ss.ssZ"這是UTC格式.目前，很多瀏覽器都不支持datetime這個類型。

在 date和 month中，時間及時區則被忽略。根據規范定義，date必須是所選月份中的一個有效日期，同時考慮到閏年。年、月、日必須用“ - ”號隔開。為了確保星期與月份不被混淆，week前面通常會加上一個字母 W 。

datetime-local 與之前描述過的 datetime 作用基本相同，唯一不同之處是不需要表明時區。

 

☀ 使用 meter 顯示度量

<meter> 標簽定義已知范圍或分數值內的標量測量。也被稱為 gauge（尺度）。例子：磁盤用量、查詢結果的相關性，等等。

注釋：<meter> 標簽雖說也可標記進度條，但並不應用於指示進度（在進度條中）。如果標記進度條，請使用 <progress> 標簽。

<meter value="3" min="0" max="10">十分之三</meter>或<meter value="0.6"></meter>

 

☀ 用 progress 顯示任務進程

progress 元素被作用於展示一個任務的完成度，典型的例子是用戶文件上傳或下載。

舉例來說，設計10個 checkbox類型的 input元素，當它們全部被激活時，進度條將顯示到100%。

    <h1>Please activate all the checkboxes</h1>
    <form method="get">
      <input type="checkbox" onchange="updateProgress()" />
      <input type="checkbox" onchange="updateProgress()" />
      <!--and 8 more-->
    <p>
    Progress:<progress value="0" max="10" id="pb"></progress></p>
    </form>

元素 progress的初始值為0，最大值為10.當 input元素被激活時，就會調用 updateProgress()函數，函數內容如下：

    <script type="text/javascript">
        function updateProgress(){
          var pb=document.getElementById("pb");
          var ip=document.getElementsByTagName("input");
          var cnt=0;
          for(var i=0;i<ip.length;i++){
            if(ip[i].checked==true){
              cnt++;
            }
          }
          pb.value=cnt;
        }
    </script>　　

變量 ip包括了一個包含所有輸入元素的節點列表(NodeList)。for循環測試每一個元素的當前狀態，若其被激

活(checked==true),計數器變量cnt將增加1.同時，progress元素值將被設成計數器值。

☀ 用 output 進行計算

output 元素用於顯示各種表單元素的內容或腳本執行結果，它的作用只是用於顯示輸出。最常用的例子是電子商務網站的

購物車。通過可選的 for屬性，你可以決定將哪些字段添加到計算機中。執行運算需要提供一個或更多的相對應輸入字段的 id。

舉例來說，3種不同商品購物車：為了在 output元素中及時更新每次數量變化，使用表單的 oninput 事件：

    <table border="1" width="369" height="169">
      <tr><th>Product</th><th>Price(US$)</th><th>Quantity</th></tr>
      <tr><td>Keyboard</td><td class="num" id="i1Price">39.50</td>
      <td><input name="i1" id="i1" type="number" min="0" value="0" max="99" /></td></tr>
      <tr><td>Mouse</td><td class="num" id="i2Price">26.30</td>
      <td><input name="i2" id="i2" type="number" min="0" value="0" max="99" /></td></tr>
      <tr><td>Monitor</td><td class="num" id="i3Price">264.50</td>
      <td><input name="i3" id="i3" type="number" min="0" value="0" max="99" /></td></tr>
    </table>
    <!-- output 元素在表格下方，相應輸入字段中商品的 ID被賦值給 for屬性。 -->
    <p>Your shopping cart contains
    <output name="sumProd" for="i1 i2 i3" id="sumProd"></output>
    items.Total price:
    <output name="sum" for="i1 i2 i3" id="sum"></output>US$</p>

    <!-- 在這段JavaScript代碼中，會遍歷計算所有的 input元素，得出總數量和總價格。 -->
    <script type="text/javascript">
        function updateSum(){
          var ips = document.getElementsByTagName("input");
          var sum = 0;
          var prods = 0;
          for (var i=0;i<ips.length;i++){
              var cnt=Number(ips[i].value);
              if (cnt>0){
                sum +=cnt*Number(document.getElementById(
                  ips[i].name+"Price").innerHTML);
                prods +=cnt;
              }
            }
            document.getElementById("sumProd").value=prods;
            document.getElementById("sum").value=sum;
        }
    </script>

我們運用JavaScript的 Number()函數將相關列的 innerHTML值轉換為數字，並根據它直接從表格中的到商品價格，input字段也用這個方法

取值(ips[i].value)。如果略過這個步驟的話，JavaScript會直接將字符串加入計算，這樣可能導致無法得到正確的結果，計算結果將被賦

值給 output 元素的 value 屬性。

暫時還沒研究出來怎么在博客里面加script代碼，以便更好的將效果展示出來，現在只能給個樣式讓你們看看：

Product	Price(US$)	Quantity
Keyboard	39.50
Mouse	26.30
Monitor	264.50

Your shopping cart contains items.Total price: US$

3、客戶端表單驗證

    ★ 自動校驗

通過對元素使用 required、pattern、min、max和 step等屬性以及新增的 input類型，可實現在表單提交時進行自動校驗。前面有介紹過，

下面僅舉一個簡單的執行自動校驗的示例。

姓名：<input type="text" name="username" required>
年齡：<input type="number" name="age" min="1" max="150" step="1">
手機號碼：<input type="text" name="phone" pattern="\d{11}" title="請輸入11位的手機號碼">

    ★ 顯式校驗：check Validity()方法進行校驗

check Validity()返回一個布爾值，為表單中所有的元素或某個元素的內容無效時，返回 false值，否則返回 true。

我們可以通過編寫JavaScript代碼調用該方法，以將校驗結果顯示出來，所以又稱該方法為“顯式校驗方法”。

    <script type="text/javascript">
      function check(){
        var psw=document.getElementById("psw");
        if(psw.checkValidity())
          alert("密碼輸入正確");
        else
          alert("密碼輸入錯誤，請再輸一次");
        return false;
      }
    </script>

    <form onsubmit="return check()">
      密碼：<input type="password" pattern="^[a-zA-Z]\w{3,6}"
      name="psw" id="psw" required /><br />
      <input type="submit" value="提交" />
    </form>

上述代碼對密碼輸入有效性進行顯式校驗，分別將校驗結果以警告對話框的形式展現。

 

    ★ 取消校驗

有時需要把表單中已填寫好的數據暫存一下，以便將來繼續填寫，即不管數據是否有效，取消表單的有效性校驗。

取消表單校驗的常用方法有兩種：一種是為<form>元素設置 novalidate屬性；另一種是對提交按鈕設置formnovalidate

屬性。第一種方式將關閉整個表單的校驗，不管提交什么按鈕都將不進行校驗。第二種方式則由指定的提交按鈕來關閉表單的輸

入校驗，只有當用戶通過指定了 fornvalidate屬性的按鈕提交表單時才會關閉表單的輸入校驗。

方法一：<form novalidate>

方法二：<input type="submit" value="保存" formaction="save.jsp" formnovalidate>

 

    ★ 自定義校驗錯誤提示信息

使用 setCustomValidity()自定義錯誤提示信息，可用於檢測兩次密碼輸入是否一致：

    <script type="text/javascript">
      function check(){
        var psw1=document.getElementById("password1");
        var psw2=document.getElementById("password2");
        if(psw1.value!=psw2.value)
          psw2.setCustomValidity("密碼和確定密碼不一致");
        return false;
      }
    </script>

    <form action="">
      密碼：<input type="password" id="password1" name="password1" /><br />
      確認密碼：<input type="password" id="password2" name="password2" /><br />
      <input type="submit" name="" id="" value="提交" onclick="check()" />
    </form>

 4、簡單介紹完HTML5 智能表單后，下面弄一個實例進行上面所有知識點的練習。

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>智能表單</title>
    <style>
        body{ line-height:25px;}
    </style>
    <script>
        //對用戶提交的表單進行校驗
        function checkInput(){
            var flag=false;
            var username=$("username").value;
            var pwd=$("pwd").value;
            var email=$("email").value;
            if(username==""){
                alert("用戶名不能為空！");
            }else if(username.length<3){
                alert("用戶名長度必須大於3！");
            }else if(pwd.length<6||pwd.length>14){
                alert("密碼長度必須在6-14之間！");
            }else if(email.indexOf("@")==-1){
                alert("郵箱格式不正確！");
            }else{
                flag=true;
            }
            return flag;
        }
 
        function check(){
            var psw1=document.getElementById("password1");
            var psw2=document.getElementById("password2");
            if(psw1.value!=psw2.value)
              psw2.setCustomValidity("密碼和確定密碼不一致");
            return false;
          }
 
        function $(id){
            return document.getElementById(id);
        }
    </script>
    <head>
    <body>
        <form action="" method="post" id="register" onsubmit="return check()">
        用戶名：<input type="text" name="username" form="register" id="username" placeholder="請輸入用戶名" pattern="u\d{4}" autocomplete="off" autofocus/>autofocus 自動獲得焦點， autocomplete="off" 屬性，這意味着涉及機密信息，不應被瀏覽器保存。<br/>
        密碼：<input type="password" id="password1" name="password1" placeholder="請輸入密碼"/>placeholder="請輸入密碼"<br />
          確認密碼：<input type="password" id="password2" name="password2" /><br />
          <input type="submit" name="" id="" value="提交" onclick="check()" /><br/>
        email：<input type="email" name="email" form="register" id="email" required />required 屬性  定義必填項<br/>
        URL：<input type="url" name="url" form="register" /><br/>
        日期和時間datetime：<input type="datetime" name="datetime" form="register" />目前，很多瀏覽器都不支持datetime這個類型。故沒效果<br/>
        本地日期和時間datetime-local：<input type="datetime-local" name="datetime-local" form="register" /><br/>
        日期date：<input type="date" name="date" form="register" /><br/>
        時間time：<input type="time" name="time" form="register" /><br/>
        月份month：<input type="month" name="month" form="register" /><br/>
        星期week：<input type="week" name="week" form="register" /><br/>
        數字number：<input type="number" name="number" min="1" max="10" step="2" form="register" /><br/>
        滾動條range：<input type="range" name="range" min="1" max="10" form="register"/><br/>
        手機tel：<input type="tel" name="phone" pattern="\d{11}" title="請輸入11位的手機號碼" form="register" />pattern="\d{11}" title="請輸入11位的手機號碼"<br/>
        搜索search：<input type="search" name="search" results="n" form="register" /><br/>
        顏色color：<input type="color" name="color" form="register"/><br/>
        學歷datalist：<input type="text" name="degree" form="register" list="degree"/><br/>
            <datalist id="degree">
                <option label="top1" value="高中"></option>
                 <option label="top2" value="大專"></option>
                 <option label="top3" value="本科"></option>
                 <option label="top4" value="研究生"></option>
                 <option label="top5" value="博士"></option>
            </datalist>
            <input type="submit" value="登陸" form="register" />
            <input type="submit" value="注冊" form="register" />
            <input type="submit" value="formaction='delete.jsp'" form="register" formaction="delete.jsp" />
        </form>
        meter 顯示度量：<meter value="3" min="0" max="10">十分之三</meter><br/>
        <p>用 progress 顯示任務進程：</p>
        <h1>Please activate all the checkboxes</h1>
        <form method="get">
          <input type="checkbox" onchange="updateProgress()" />
          <input type="checkbox" onchange="updateProgress()" />
          <!--and 8 more-->
        <p>
        Progress:<progress value="0" max="10" id="pb"></progress></p>
        </form>
        <p>用 output 進行計算：</p>
        <p>
        <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
        <input type="range" id="a" value="50">100+<input type="number" id="b" value="50">=<output name="x" for="a b"></output>
        </form>
        </p>
        <script type="text/javascript">
            function updateProgress(){
              var pb=document.getElementById("pb");
              var ip=document.getElementsByTagName("input");
              var cnt=0;
              for(var i=0;i<ip.length;i++){
                if(ip[i].checked==true){
                  cnt++;
                }
              }
              pb.value=cnt;
            }
        </script>
    </body>
    </html>

    ✪注意：具體的效果可以自己復制代碼到瀏覽器運行下即可～