HTML5表單輸入項目與驗證(二)

by vivid 26. 九月 2012 02:58

.NET Magazine國際中文電子雜誌
作 者:許薰尹
審 稿:張智凱
文章編號:N120912802
出刊日期:2012/9/26

本文延續上一期文章《HTML5表單輸入項目與驗證(一) 》的內容,介紹HTML5新增的attribute來協助設計網頁應用程式。

multiple attribute

一般的input type只能輸入單一值,在HTML5中新增一個multiple attribute,讓瀏覽器知道此input type可以輸入多個值,可以應用在送電子郵件給多個收件者,或一次上傳多個檔案的情境,multiple attribute通常搭配email input type與file input type來使用。

若email或file input type沒有設定multiple attribute,則預設表示為false,不啟用這個功能。將它設定為multiple="multiple",代表true,啟用這個功能。

email input type搭配multiple –使用HTTP POST

參考以下範例從HTML網頁傳送資料到ASP.NET網頁 default.aspx檔案,在HTML網頁中的email input type設定了multiple attribute,並將資料利用http POST送到伺服端的ASP.NET網頁 default.aspx檔案處理:

<!DOCTYPE html>
<html xmlns = http://www.w3.org/1999/xhtml >
<head>
    <title></title>
</head>
<body>
    <form name = "form1" method = "post" action= "default.aspx" >
        <input name = "txtEmail" type = "email"
            multiple = "multiple"
            placeholder = "請輸入多個收件者電子郵件地址"  /> <br />
        <input id = "Submit1" type = "submit" value = "submit"    />
    </form>
</body>
</html>

 

在Chrome瀏覽器執行時,輸入以逗號區隔的多個電子郵件位址,請參考下圖所示:

clip_image002

圖 1:Chrome瀏覽器- email input type搭配multiple。

在default.aspx之中,我們可以利用Request.Form來取得email input type輸入的電子郵件位址,因為資料是以逗點區隔,範例中透過string類別的Split方法將電子郵件地址按「,」符號切割後,將結果放到data陣列,然後顯示在Label控制項上:

 

<%@ Page Language = "C#" %>
<!DOCTYPE html>
<script runat = "server">
    protected void Page_Load ( object sender , EventArgs e )
    {
        string s = Request.Form [ "txtEmail" ];
        if ( s  !=null )
        {
            string [ ] data = s.Split( new char [ 1 ] { ',' } );
            foreach ( var item in data )
            {
                Label1.Text += item +"<br/>";
            }
        }
    }
</script>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head runat = "server" >
    <title></title>
</head>
<body>
    <form id = "form1" runat = "server">
    <div>
        <asp:Label ID = "Label1" runat = "server" Text = ""> </asp:Label>
    </div>
    </form>
</body>
</html>

 

ASPX執行的結果請參考下圖所示:

clip_image004

圖 2:在伺服端ASPX程式碼中取回表單欄位值。

email input type搭配multiple –使用HTTP GET

上個範例若想要使用HTTP Get的方式以查詢字串來傳資料,可以將form的method改為get:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head>
    <title> </title>
</head>
<body>
    <form name = "form1" method = "get" action = "default2.aspx" >
        <input name = "txtEmail" type = "email"
            multiple = "multiple"
            placeholder = "請輸入多個收件者電子郵件地址" /> <br />
        <input id = "Submit1" type = "submit" value = "submit" />
    </form>
</body>
</html>

並將ASPX修改如下,改用Request.QueryString來取得查詢字串,可以得到相同的執行結果:

<%@ Page Language = "C#" %>
<!DOCTYPE html>
<script runat = "server">
    protected void Page_Load ( object sender , EventArgs e )
    {
        string s =Request.QueryString [ "txtEmail" ];
        string [ ] data = s.Split( new char [ 1 ] { ',' } );
        foreach ( var item in data )
        {
            Label1.Text += item +"<br/>";
        }
    }
</script>
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head runat = "server">
    <title> </title>
</head>
<body>
    <form id = "form1" runat = "server">
    <div>
              <asp:Label ID = "Label1" runat = "server" Text = ""> </asp:Label>
    </div>
    </form>
</body>
</html>

file input type搭配multiple上傳多個檔案

若要設計檔案多個檔案,我們可以使用以下的file input type,透過http POST動詞,將檔案上傳到伺服器的ASP.NET default3.aspx網頁來處理:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
    <title> </title>
</head>
<body>
    <form name = "form1" method = "post"
        Enctype = "multipart/form-data"
        Action = "default3.aspx">
      請按CTRL鍵同時選取多個檔案 : <br />
    <input name = "txtFileName" type = "file" multiple = "multiple" /> <br />
    <input id = "Submit1" type = "submit" value = "submit" />
    </form>
</body>
</html>

注意,在表單中要設定enctype="multipart/form-data"。此網頁執行時,在Chrome瀏覽器進行測試,按下「選擇檔案」按鈕後,會跳出一個Open對話盒,您可以按下鍵盤CTRL鍵同時選取多個檔案,然後按網頁中的「submit」按鈕將檔案送到伺服器,請參考下圖所示:

clip_image006

圖 3:一次上傳多個檔案。

在伺服端就可以利用ASP.NET程式碼將檔案儲存在伺服器upload目錄之中,參考以下範例程式碼,利用Request.Files集合的Count屬性,取得使用者上傳的檔案個數,再利用一個for 迴圈,將上傳的檔案利用HttpPostedFile類別的SaveAs方法儲存到伺服器上網站的upload子目錄中:

<%@ Page Language = "C#" %>
<!DOCTYPE html>
<script runat = "server">
    protected void Page_Load ( object sender , EventArgs e )
    {
        Label1.Text =  "上傳的檔案個數 :" + Request.Files.Count.ToString( );
        HttpPostedFile f =null;
        for ( int i = 0 ; i < Request.Files.Count ; i++ )
        {
            f=Request.Files [ i ];
            f.SaveAs( Server.MapPath( @"upload/" + f.FileName ) );
        }
    }
</script>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head runat = "server" >
    <title> </title>
</head>
<body>
    <form id = "form1" runat = "server">
    <div>
          <asp:Label ID = "Label1" runat = "server" Text=""> </asp:Label>
    </div>
    </form>
</body>
</html>

檔案上傳注意事項

在設計檔案上傳程式時,若使用IIS 7.5伺服器,還需要適當地設定NTFS安全性,否則可能會得到拒絕存取的錯誤訊息:「Access to the path 'C:\inetpub\wwwroot\FUP\upload\c.txt' is denied.」。錯誤畫面請參考下圖所示:

clip_image008

圖 4:IIS 7.5 拒絕存取的錯誤訊息。

這時您必需適當地設定授權,首先在IIS管理工具檢視網站以哪一個應用程式集區(Application Pool)來執行,預設為FUP網站以「DefaultAppPool」來執行,請參考下圖所示:

clip_image010

圖 5:每一個網站程式都是以特定應用程式集區(Application Pool)來執行。

接著再看IIS的ApplicationPool設定,目前DefaultAppPool應用程式集區執行的身份是ApplicationPoolIdentity (注意,不同版本的IIS執行身份不同,若為IIS6,預設是使用Network Service帳號),因此你必需透過NTFS授權給ApplicationPoolIdentity帳號寫入的權限,這樣才可以正常的上傳檔案,請參考下圖所示:

clip_image012

圖 6:DefaultAppPool應用程式集區執行的身份是ApplicationPoolIdentity。

下一步是設定NTFS授權,從檔案總管,選取網站所在的目錄,以本例來說目錄名稱為「FUP」,按滑鼠右鍵,選「屬性」,打開「Security」頁,點選「Edit」按鈕,請參考下圖所示:

clip_image014

圖 7:設定NTFS授權。

再按下「Add」按鈕新增,請參考下圖所示:

clip_image016

圖 8:新增授權。

接著在文字方塊中輸入「IIS AppPool\DefaultAppPool」,注意只能手動輸入,無法使用視覺化的UI介面選取此帳號,請參考下圖所示:

clip_image018

圖 9:授權給「IIS AppPool\DefaultAppPool」。

接著在「Permissions for DefaultAppPool」清單適當地授權,請參考下圖所示:

clip_image020

圖 10:授予Full Control權限。

另一個在IIS 7.5伺服器上進行檔案上傳經常會出現的錯誤就是:檔案的內容太大。你可能會得到錯誤訊息:「HTTP Error 404.13 - Not Found The request filtering module is configured to deny a request that exceeds the request content length. 」。請參考下圖所示,檔案太大超過限制會得到HTTP 404.13號錯誤:

clip_image022

圖 11:檔案太大超過限制會得到HTTP 404.13號錯誤。

你可以利用IIS管理工具設定網站應用程式的Request Filtering,請參考下圖所示:

clip_image024

圖 12:設定網站應用程式的Request Filtering。

編輯「Maximum allowed content length(Bytes)」設定,將它的值設定為適當的值,參考下圖所示:

clip_image026

圖 13:設定「Maximum allowed content length(Bytes)」。

ASP.NET網站的Web.config組態檔案中會產生如下的組態設定:

<system.webServer>
        <security>
            <requestFiltering>
                <requestLimits maxAllowedContentLength = " 600000000 " />
            </requestFiltering>
        </security>
    </system.webServer>

不過你還可能會得到此錯誤訊息:「Maximum request length exceeded.」,參考下圖所示:

clip_image028

圖 14:「Maximum request length exceeded.」。

你需要在<system.web>標籤中設定httpRuntime 的maxRequestLength為適當的值,例如以下範例,這樣就可以解決這個問題:

<system.web>
    <compilation debug = "true" targetFramework = "4.5" />
    <httpRuntime
      maxRequestLength = "600000000" requestValidationMode = "4.5" targetFramework = "4.5" encoderType = "System.Web.Security.AntiXss.AntiXssEncoder, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />
    <pages controlRenderingCompatibilityVersion = "4.5" />
    <machineKey compatibilityMode = "Framework45" />
  </system.web>
form attribute

在以往設計HTML網頁時,如果要透過表單欄位(Form Field)搜集及提交資料,需要把用來輸入資料的Form Field項目,如text input放在Form的標籤之中,例如以下的範例HTML:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head>
    <title> </title>
</head>
<body>
    <form>
        <input id = "txtName" type = "text" placeholder = "請輸入姓名" autofocus = "autofocus" /> <br />
        <input id = "txtAddr" type = "text" placeholder = "請輸入地址"   /> <br />
        <input id = "txtMemo" type = "text" placeholder = "請輸入備註" /><br />
          <input id = "Submit1" type = "submit" value = "送出" />
    </form>
</body>
</html>

現在,在HTML5中,您可以利用form attribute來解決這個問題,這些表單欄位不一定要放在<form> </form>的標籤之中,例如將程式碼改如下,三個text input type放在<form> </form>的標籤之外,並設定form="myForm",myForm是<form<的id:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head>
    <title> </title>
</head>
<body>
    <input form = "myForm" name = "txtName" type = "text" placeholder = "請輸入姓名" autofocus = "autofocus" /> <br />
    <input form = "myForm" name = "txtAddr" type = "text" placeholder = "請輸入地址" /> <br />
    <input form = "myForm" name = "txtMemo" type = "text" placeholder = "請輸入備註" /><br />
    <form id = "myForm" action = "Default4.aspx" method = "post">
    <input id = "Submit1" type = "submit" value= "送出" />
    </form>
</body>
</html>

這樣的好處是,可以更容易設計與管理網頁的版面。在伺服端的ASP.NET程式中,可以利用Request物件的Form集合來取得HTML網頁表單內文字方塊輸入的內容:

<%@ Page Language = "C#" %>

<!DOCTYPE html>
<script runat = "server">
    protected void Page_Load ( object sender , EventArgs e )
    {
        string s = Request.Form [ "txtName" ] +","+ Request.Form [ "txtAddr" ] + "," +  Request.Form [ "txtMemo" ];
        Label1.Text = s;     
    }
</script>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head id = "Head1" runat = "server">
    <title> Default4.aspx </title>
</head>
<body>
    <form id = "form1" runat = "server">
    <div>
        <asp:Label ID = "Label1" runat = "server" Text = "" > </asp:Label>
    </div>
    </form>
</body>
</html>


formaction attribute

在HTML5一個Form可以有多個不同的action,導向不同的頁面來處理Form的資料,formaction attribute都是搭配submit input type或image按鈕來使用的。例如以下範例<menu>標籤中有兩個submit按鈕,分別利用formaction來設定導向不同的網頁:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head>
    <title> </title>
</head>
<body>
    <menu>
        <input form = "myForm" id = "Submit1" type = "submit" value = "送出" formaction = "default4.aspx" />
        <input form = "myForm2" id = "Submit2" type = "submit" value = "備註" formaction = "default5.aspx" />
    </menu>
    <form id = "myForm" method = "post">
    <input name = "txtName" type = "text"
        placeholder = "請輸入姓名" autofocus = "autofocus" /> <br />
    <input name = "txtAddr" type = "text" placeholder = "請輸入地址" /> <br />
    </form>
    <form id = "myForm2" action = "Default4.aspx" method = "post">
    <input name = "txtMemo" type = "text" placeholder = "請輸入備註" /> <br />
    </form>
</body>
</html>

若<form>標籤有設定action,則submit input type的formaction之優先權會高於<form>的action。在伺服端的ASP.NET程式中,可以利用Request物件的Form集合來取得HTML網頁表單內文字方塊輸入的內容:

<%@ Page Language="C#" %>

<!DOCTYPE html>
<script runat="server">
    protected void Page_Load ( object sender , EventArgs e )
    {
        string s = Request.Form [ "txtName" ] +","+ Request.Form [ "txtAddr" ] + "," +  Request.Form [ "txtMemo" ];

        Label1.Text = s;
    }
</script>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head id = "Head1" runat = "server">
    <title> default5.aspx </title>
</head>
<body>
    <form id = "form1" runat = "server">
    <div>
        <asp:Label ID = "Label1" runat = "server" Text = ""> </asp:Label>
    </div>
    </form>
</body>
</html>


formmethod attribute

在HTML5中一個Form可以利用action導向不同伺服端程式來處理,不僅如此,你還可以利用formmethod attribute來設定這些action要採用不同的HTTP動詞傳送資料到伺服器,例如以下範例中包含兩個Form( myForm與myForm2),<menu>標籤中有兩個submit按鈕,設定了formmethod,分別利用HTTP的get與post動詞傳送資料到伺服器:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head>
    <title> </title>
</head>
<body>
    <menu>
        <input form = "myForm" id = "Submit1" type = "submit"
            value = "送出" formaction = "default6.aspx" formmethod = "get" />
        <input form = "myForm2" id = "Submit2" type = "submit"
            value="備註" formaction="default7.aspx"  formmethod = "post"/>
    </menu>
    <form id = "myForm" method = "post">
    <input name = "txtName" type = "text"
        placeholder = "請輸入姓名" autofocus = "autofocus" /> <br />
    <input name = "txtAddr" type = "text" placeholder = "請輸入地址" /> <br />
    </form>
    <form id = "myForm2" action = "Default4.aspx" method = "post">
    <input name = "txtMemo" type = "text" placeholder = "請輸入備註" /> <br />
    </form>
</body>
</html>

若使用HTTP Get傳送資料,在伺服端的ASP.NET程式中,可以利用Request物件的QueryString集合來取得HTML網頁表單內文字方塊輸入的內容:

<%@ Page Language = "C#" %>

<!DOCTYPE html>
<script runat = "server">
    protected void Page_Load ( object sender , EventArgs e )
    {

Label1.Text = Request.QueryString [ "txtName" ] + "," +  Request.QueryString [ "txtAddr" ];

    }
</script>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head id = "Head1" runat = "server">
    <title> default6.aspx</title>
</head>
<body>
    <form id = "form1" runat = "server">
    <div>
        <asp:Label ID = "Label1" runat = "server" Text = ""> </asp:Label>
    </div>
    </form>
</body>
</html>


若使用HTTP Get傳送資料,在伺服端的ASP.NET程式中,可以利用Request物件的Form集合來取得HTML網頁表單內文字方塊輸入的內容:

<%@ Page Language = "C#" %>

<!DOCTYPE html>
<script runat="server">
    protected void Page_Load ( object sender , EventArgs e )
    {
        Label1.Text = Request.Form [ "txtMemo" ];
    }
</script>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head id = "Head1" runat = "server">
    <title> Default7.aspx</title>
</head>
<body>
    <form id = "form1" runat = "server" >
    <div>
        <asp:Label ID = "Label1" runat = "server" Text = ""> </asp:Label>
    </div>
    </form>
</body>
</html>


hidden attribute

hidden attribute可以用來隱藏HTML中的項目,這樣您就不需要再使用CSS來處理,它不僅可以用來動態展示或隱藏HTML中的項目,還有一個很大的用途:協助程式設計師控制應用程式的流程。例如將一個網頁分成不同區塊,按照實際的需求,動態呈現網頁的其它內容。

參考以下範例,id為mydiv的<div>標籤設定了「hidden="hidden"」,因此網頁執行時預設是隱藏看不到的:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head>
    <title> </title>
    <script type = "text/javascript">
        function showdiv( ) {
            document.getElementById( "mydiv" ).hidden = false;
        }
        function hidediv() {
            document.getElementById( "mydiv" ).hidden = true;
        }
    </script>
</head>
<body>
    <div id = "home" >
        <header>
            <h1> 首頁 </h1>
        </header>
        <p> 歡迎參觀我的首頁 </p>
        <button onclick = "showdiv()"> 顯示 </button>
        <button onclick = "hidediv()"> 隱藏 </button>
    </div>
    <div id = "mydiv" hidden = "hidden">
        <header>
            <h1> 註冊 </h1>
        </header>
        <input id = "txtName" type = "text" placeholder = "請輸入姓名" autofocus = "autofocus" /> <br />
        <input id = "txtAddr" type = "text" placeholder = "請輸入地址" /> <br />
        <input id = "txtMemo" type = "text" placeholder = "請輸入備註" /> <br />
    </div>
</body>
</html>

此範例在瀏覽器執行的結果請參考下圖所示:

clip_image030

圖 15:利用hidden attribute隱藏內容。

範例中利用JavaScript程式碼,動態將hidden attribute設定為true或false,來顯示與隱藏<div>的內容,當使用者按下網頁上的「顯示」按鈕,就將<div>呈現出來,請參考下圖所示利用hidden attribute顯示被隱藏內容:

clip_image032

圖 16:利用hidden attribute顯示被隱藏內容。

contenteditable attribute

contenteditable attribute 可以用來設定一個Html 項目可不可以直接在網頁上進行編輯的動作。你可以將contenteditable設定為「true」或空字串「""」來啟用編輯的動作。幾乎所有的HTML項目都可以設定contenteditable attribute,參考以下範例在HTML <p>項目上啟用了編輯的功能:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head>
    <title> </title>
    <script type = "text/javascript">
        function show( ) {
            alert( document.getElementById( "data" ).innerText );
        }
    </script>
</head>
<body>
    <p id = "data" contenteditable = "true" > 這是一個可以編輯的段落區塊 </p>
    <input id = "Button1" type = "button" value = "Get" onclick = "show()" />
</body>
</html>

 

執行時可以直接將滑鼠的游標停留在<p>項目上,再從鍵盤輸入資料,請參考下圖所示:

clip_image034

圖 17:使用contenteditable啟用編輯。

範例中也利用JavaScript來取回輸入在<p>項目上的資料,然後利用alert函式顯示編輯過的內容,請參考下圖所示:

clip_image036

圖 18:顯示編輯過的內容。

表單資料驗證

在網頁輸入資料時,常常會需要驗證使用者輸入的資料是否有效,或是驗證欄位不可以為空白,過去我們常常需要撰寫JavaScript程式碼來驗證,或是利用伺服端的技術,例如ASP.NET提供了驗證控制項來協助檢查。

HTML5新增了一些attribute,讓我們可以對表單欄位中的資料進行一些基本的檢查,不需要撰寫用戶端的JavaScript程式碼。讓我們來看看這些attribute。

require attribute

require attribute指明表單的欄位不可以為空白,一定要輸入資料才可以提交到伺服器。它可以搭配input、select與textarea項目來使用。

formnovalidate attribute

預設支援HTML5的瀏覽器在提交資料到伺服器時,就會自動進行驗證檢查。舉例來說,若網頁中有些input項目不可以空白,我們可以在input項目中,設定「required="required"」:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head>
    <title> </title>
</head>
<body>
    <input form = "myForm"  required = "required" name = "txtName" type = "text" placeholder = "請輸入姓名" autofocus = "autofocus" /> <br />
    <input form = "myForm" name = "txtAddr" type = "text" placeholder = "請輸入地址" /> <br />
    <input form = "myForm" name = "txtMemo" type = "text" placeholder = "請輸入備註" /> <br />   
    <form id = "myForm" action = "Default4.aspx" method = "post" >
    <input id = "Submit1" type = "submit" value = "送出"  />
    </form>
</body>
</html>

當網頁執行時,當使用者按下submit按鈕將資料送出時會進行驗證,若沒有填寫資料,瀏覽器會顯示錯誤訊息,並且無法提交表單。此範例在瀏覽器執行的結果請參考下圖所示:

clip_image038

圖 19:驗證資料不可空白。

若修改HTML,加上「formnovalidate="formnovalidate"」,此時再提交資料就不進行驗證的動作,資料可以提交到伺服器:

<input id = "Submit1" type = "submit" value = "送出" formnovalidate = "formnovalidate" />
novalidate attribute

有時我們可能不想要瀏覽器幫你進行資料檢查,而是希望能夠不檢查直接進行提交的動作,例如使用者在網頁輸入資料,接著放棄輸入的資料,想要離開網頁,轉向別的畫面時。我們可以在<form>標籤設定「novalidate="novalidate"」來解決這個問題。

參考下例,雖然txtName、txtAddr與txtMemo三個文字方塊都標示「required="required"」,但您還是可以直接點選submit按鈕,將資料傳送到伺服器:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head>
    <title> </title>
</head>
<body>
    <input form = "myForm"  required = "required" name = "txtName" type = "text" placeholder = "請輸入姓名" autofocus = "autofocus" /><br />
    <input form = "myForm"  required = "required" name = "txtAddr" type = "text" placeholder = "請輸入地址" /> <br />
    <input form = "myForm"  required = "required" name = "txtMemo" type = "text" placeholder = "請輸入備註" /> <br />   

    <form id = "myForm" action = "Default4.aspx" method = "post" novalidate = "novalidate" >
    <input id = "Submit1" type = "submit" value = "送出"  />
    </form>
</body>
</html>


min 與max attribute

若要檢查input type資料的最小值與最大值,可以利用min 與max attribute,當輸入的數值不在此範圍會自動顯示錯誤訊息,以下範例程式碼設定number input type的最小值為0;最大值為10。

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head>
    <title> </title>
</head>
<body> <form id = "myForm" action = "data.aspx" method = "post" >
    請輸入0~10之間的數字:
    <input name = "myMumber" type = "number" min = "0" max = "10" /> <br />
    <input id = "Submit1" type = "submit" value = "送出" />
    </form>
</body>
</html>

若執行時,使用者輸入的資料為負數,將會顯示錯誤訊息,此範例在Chrome瀏覽器執行的結果請參考下圖所示:

clip_image040

圖 20:使用者輸入的資料有誤時,顯示錯誤訊息。

注意,不同的瀏覽器顯示的錯誤訊息不相同,這決定在瀏覽器的設計。若資料大於10,執行的結果請參考下圖所示:

clip_image042

圖 21:使用者輸入的資料有誤時,顯示錯誤訊息。

time input type與min、max attribute

time input type也可以和min、max attribute搭配來使用,設定有效的時間範圍,例如以下範例設定min為「09:00」;max為「16:00」:

<!DOCTYPE html>
<html xmlns = http://www.w3.org/1999/xhtml >
<head>
    <title> </title>
</head>
<body>
    <form id = "myForm" action = "data.aspx" method = "post">
    請輸入09:00~16:00時間:
    <input name = "mydata" type = "time" min = "09:00" max = "16:00" value = "14:02" /><br />
    <input id = "Submit1" type = "submit" value = "送出" />
    </form>
</body>
</html>

此範例在Opera瀏覽器執行的結果請參考下圖所示:

clip_image044

圖 22:Opera瀏覽器執行的結果- time與min、max attribute。

maxlength attribute

maxlength attribute設定文字欄位最多可以輸入的字元數,若超過指定的數字,通常瀏覽器就不讓你輸入,使用的語法很簡單,參考以下範例:

<input name = "txtName" type = "text" placeholder = "請輸入姓名" maxlength = "10" autofocus = "autofocus" />
pattern attribute

若輸入的資料符合特殊的格式,您可以使用自行撰寫規則運算式,指定給pattern attribute,這樣就可以按照自己的需求來撰寫資料檢查的規則。參考以下範例,設定資料的規則為「\d{2}」,只能輸入2個數字:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head>
    <title> </title>
</head>
<body>
    <form id = "myForm" action = "data.aspx" method = "post" >
         符合規則運算式 \d{2}
    <input type = "text" title = "請輸入2個數字" pattern = "\d{2}" />
    <input id = "Submit1" type = "submit" value = "送出" />
    </form>
</body>
</html>

只有輸入資料的狀態才會檢查,若沒有輸入資料,就不會檢查,以下在Opera瀏覽器測試,故意輸入錯誤的資料,瀏覽器會顯示錯誤訊息,請參考下圖所示:

clip_image046

圖 23:pattern attribute。

總結

在HTML5之前,設計網頁時,通常利用HTML的文字方塊( <input type = "text" />)、核取方塊( <input type = "checkbox" />)、 圓型按鈕(<input type = "radio" />)、選單(<select><option></option></select>) …等等來建立表單,搜集使用者輸入的資料,接著程式設計師還需要撰寫一些驗證程式碼來確保收集到的資料是有效的。

HTML5為表單新增了十幾種新的HTML Input type讓我們更便於設計網頁,這些新的HTML Input type都具備了些特殊的行為,例如驗證,能夠更容易地設計出適用的網頁。

Tags:

.NET Magazine國際中文電子雜誌 | HTML | 許薰尹Vivid Hsu

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List