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

by Vivid 12. 九月 2012 02:44

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

HTML5新增許多新的輸入型別(Input Types),以方便我們設計網站應用程式,由其是經常需要輸入的電子郵件、URL、電話、生日…等等欄位,在HTML5中這些常用的項目都有新的標籤可以使用,這些新項目有些提供了一些自動驗證的功能,讓我們可以減少一些時間,不用再花時間再自行撰寫程式碼,如JavaScript來進行資料驗證的動作。本文將介紹HTML5新增的表單輸入項目與驗證項目。

不過,因為有些新的瀏覽器才支援這些新功能,在不支援這些新HTML input type的舊瀏覽器上檢視時,看起來就像一般的文字方塊,因此在設計上要稍加注意瀏覽器支援度的問題。

使用日期選擇器(Date Picker)

在網頁輸入資料少不了日期選擇器,舉凡生日、到職日、出貨日、訂購日等等資料都需要輸入日期,可見得日期選擇器的重要性。過去您可能會考慮使用一些JavaScript函式庫來幫助日期欄位的輸入,或者使用像ASP.NET這種伺服器端的技術來處理日期,但這一些在網頁設計上都需要「額外」進行一些處理,不夠簡單、直覺。而HTML5提供一組日期選擇器(Date Picker),讓我們更方便地輸入日期欄位,也讓JavaScript的需求度變低。以下讓我們來介紹這些新增的日期、時間相關的選擇器。

date input type

date input type可以讓使用者輸入日期。例如以下範例,將input的type設定為「date」,並在value設一個預設值「2012-07-15」,注意年、月、日要以「-」符號來區隔:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
</head>
<body>
    <form>
    <input type = "date" name = "OrderDate" value = "2012-07-15" />
    <input id = "Submit1" type = "submit" value = "submit" />
    </form>
</body>
</html>

 

 

在Chrome 19瀏覽器上執行時,從畫面上可以看到有一個下拉的箭頭,點選箭頭之後,便會顯示一個月曆,這個月曆的長像依據瀏覽器的不同而略有差異,這是決定在瀏覽器怎麼設計,請參考圖1所示:

clip_image002[4]

圖 1:Input Type為date。

但在Firefox 13版本中,看到的只是個一般的文字方塊,請參考圖2所示,這是因為目前的版本並不支援date input type的緣故:

clip_image004[4]

圖 2:Firefox 13,Input Type為date。

同樣地在ie9版本中,看到的也只是個一般的文字方塊,請參考圖3所示:

clip_image006[4]

圖 3:ie9,Input Type為date。

前文提及,有些新的瀏覽器才支援這些新功能,因此在設計上要稍加注意,您可以先使用瀏覽器連結到http://html5test.com/網站來查看使用的瀏覽器是否支援這些功能,例如圖4顯示Firefox 13幾乎都不支援新的HTML5 input type:

clip_image008[4]

圖 4:Firefox 13幾乎不支援新的HTML5 input type。

month input type

month input type用來輸入年度與月份,經常應用在輸入信用卡的有效月、年,例如以下範例設定月份為2012年7月:

<input type = "month" name = "OrderDateMonth" value = "2012-07" />

此範例在瀏覽器執行的結果請參考圖5所示,顯示一個月曆,能夠挑選月份:

clip_image010[4]

圖 5:month input type。

week input type

week input type用來輸入一年內的第幾個星期,通常一年有52個星期,以下語法使用「W06」表達一年內的第六個星期:

<input type = "week" name = "theWeek" value = "2012-W06" />

在Opera瀏覽器上看到的效果,請參考圖6所示:

clip_image012[4]

圖 6:week input type。

datetime input type

datetime input type可以讓使用者選取含時區的日期與時間。以下語法設定日期為2012年12月31日16:00整。UTC時區。

<input type = "datetime" name = "mydate" value = "2012-12-31T16:00:20Z" />

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

clip_image014[4]

圖 7:datetime input type。

 
datetime-local input type

datetime-local input type可以讓使用者選取不含時區的日期與時間,以下語法設定日期為2012年07月16日14點2分27秒:

<input type = "datetime-local" name = "theTime" value = "2012-07-16T14:02:27" />

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

clip_image016[4]

圖 8:datetime-local input type。

time input type

time input type用來輸入不含日期的時間,例如以下語法描述時間為14點2分。

<input type = "time" name = "theTime" value = "14:02" />

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

clip_image018[4]

圖 9:time input type。

常用的attribute - step

有些日期選擇器可以設step attribute,代表要累進、累減的時間間距。例如設為2的話,以下範例預設值是「2012-07」月,下一個可以選擇的日期為「2012-09」,間距為2。

<input type = "month" name = "OrderDateMonth" value = "2012-07" step = "2" />

因此參考下圖,因為預設值是「2012-07」月,間距為2的關係,「2012-08」月會呈現灰色的狀態,無法選取:

clip_image020[4]

圖 10:step attribute可以影響時間間距。

在不同的input type上設定step的單位不太一樣,參考如下:

  • Date:天,預設值為1天。
  • Week :周,預設值為1周。
  • Month:月,預設值為1個月。
  • Time:分鐘,預設值為1分鐘。
  • DateTime:分鐘,預設值為1分鐘。
  • Local DateTime:分鐘,預設值為1分鐘。

使用文字方塊

針對經常使用到的文字資料,HTML5也細分出更多不同的input type供做選擇。約略分為兩類:

  • 提供驗證功能,包含email、url。
  • 無特殊功能,但能夠讓瀏覽器區分出不同於一般的text input type,包含tel、search。

email、url與tel最常使用在網站上的連絡人資訊。這幾個項目對於行動裝置非常有幫助,當你將游標停留在這些類型的項目輸入資料時,會啟動不同的鍵盤,例如tel類型就會叫出數字鍵盤以供電話撥號。

email input type

email input type很直覺,就是用來輸入使用者的電子郵件地址,通常都會包含一個「@」符號,串接「.com」或「.tw」等等做結尾。瀏覽器會自動加以驗證輸入的資料之有效性,若輸入的資料格式不對,就會顯示錯誤訊息,例如以下範例:

 

<input type = "email" name = "myEmail" value = "mary@test.com" />

當您輸入錯誤的電子郵件地址時,瀏覽器會自動進行驗證,例如以下例子,電子郵件地址一定會有「@」符號,若沒有輸入,就會看到錯誤訊息,下圖是Chrome 19瀏覽器顯示的錯誤:

clip_image022[4]

圖 11:Chrome 19瀏覽器顯示的錯誤。

email input type可以加上multiple attribute,以便輸入多個電子郵件地址,每一個電子郵件地址使用「,」號來區隔,參考以下範例:

<input type = "email" name = "myEmail" value = "mary@test.com,candy@test.com" multiple = "multiple" />

同樣地,當輸入的資料錯誤時,例如下圖兩個電子郵件地址之間使用空白區隔,此時瀏覽器(Chrome 19)就會驗證然後顯示錯誤訊息:「請輸入以逗號分隔的電子郵件地址清單」。

clip_image024[4]

圖 12:Chrome 19瀏覽器顯示的錯誤訊息。

url input type

url input type用來驗證使用者輸入的資料是一個有效的url位址,若輸入的資料錯誤,瀏覽器會顯示錯誤訊息,若沒有輸入則不驗證視為有效,例如以下範例:

 

<input type = "url" name = "myUrl" value = "" />

當輸入的資料錯誤時,例如下圖URL地址沒有輸入「http」,此時瀏覽器(Chrome 19)就會驗證進而顯示以下錯誤訊息:「請輸入網址 」請參考圖13所示:

clip_image026[4]

圖 13:瀏覽器(Chrome 19)驗證然後顯示錯誤訊息。

tel input type

tel input type 用來輸入使用者的電話號碼,只能輸入數值,沒有文字,也沒有驗證的功能。

<input type = "tel" name = "myPhone" />

常用Input type

HTML5提供許多常用的Input type,諸如Number、range、color來滿足網頁設計的需求,以下分別介紹這些input type的用法。

number input type

number input type用來輸入數字資料,可以搭配min attribute設定最小值;max attribute設定最大值;step attribute則為每次要累進、累減的數值。參考以下範例,設定目前的值(value)為「20」,最小值為「0」;最大值為「80」,每次累進「1」;

<input type = "number" name = "myAge" min = "0" max = "80" value = "20" step = "1" />

有些瀏覽器會將number input type顯示成有文字方塊搭配上下按鈕的UI來加減數字,參考圖14。

clip_image028[4]

圖 14:Chrome 瀏覽器-number input type。

range input type

range input type用來輸入一個範圍內的數字,通常瀏覽器會將它的外觀顯示成有刻度的橫軸(Slider)。

<input type = "range" name = "myNumber" min = "10" max = "20" />

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

clip_image030[4]

圖 15:Chrome 19瀏覽器執行的結果- range input type。

color input type

color input type可以選取顏色,不同的瀏覽器展示的UI畫面不盡相同。例如:

<input type = "color" name = "myColor" />

此範例在Opera 11.5瀏覽器執行的結果請參考圖16所示,Opera 11.5會呈現下拉式選單,跳出一個選取顏色的對話盒,讓使用者輸入顏色:

clip_image032[4]

圖 16:Opera 11.5 瀏覽器 - color input type。

而Chrome瀏覽器則是會跳出作業系統內建的挑選顏色對話盒,參考圖17所示:

clip_image034[3]

圖 17:Chrome瀏覽器- color input type。

HTML5常用Element

HTML5還新增了幾個項目(Element),包含output、keygen等等。

output element

output很適合用來顯示計算完的結果,像是計算所得稅、產品折扣後的價格,或者是數學四則運算的結果等等。<output>標籤通常會放在<form>表單之中,和表單關聯在一起,我們來看一個範例:

 

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
</head>
<body>
    <form onsubmit = "return false" oninput = "r.value=x.valueAsNumber * y.valueAsNumber" >
    計算產品價格打九折的價格 <br />
    價格 <input type = "number" name = "x" value = "10" />
    * <input type = "number" name = "y" value = "0.9" step = "0.1" />
    =
    <output name = "r" for = "x y"> </output>
    </form>
</body>
</html>

 

 

 

範例中使用number input type讓使用者輸入產品的價格,以及折扣,再利用<output>標籤顯示計算完的結果。<output>標籤使用了for,它的值為要用來運算的<input>項目之ID,可以有多個,以空白區隔。

在表單輸入資料時,會觸發oninput事件,這個事件也是HTML5新增的,在此事件中,範例利用HTML5為JavaScript input物件新增valueAsNumber屬性,將使用者輸入在兩個<input>項目的資料轉換成數值之後相乘。此範例在瀏覽器執行的結果請參考圖18所示:

clip_image036[3]

圖 18:output element。

keygen element

keygen項目用來產生一對公開金鑰包含public key與private key,當<keygen>項目所在的表單被提交時,private key會儲存在本機的金鑰存放地,而public key便傳送到伺服器,進而協助網站伺服器可以識別出用戶端,我們來看一個<keygen>範例:

 

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
</head>
<body>
    <form id = "myForm" action = "data.aspx" method = "get" >
    <keygen name = "key" />
    <input id = "Submit1" type = "submit" value = "送出" />
    </form>
</body>
</html>

 

 

 

在Chrome瀏覽器執行時,<keygen>顯示成下拉式清單的長像,可以選取金鑰長度,有兩種選擇,預設採用RSA演算法,此範例在Chrome瀏覽器執行的結果請參考圖19所示:

clip_image038[3]

圖 19:Chrome瀏覽器 - keygen input type。

但不同的瀏覽器可能會看到不同的執行結果,例如此範例在Oprea瀏覽器執行的結果請參考圖20所示:

clip_image040[3]

圖 20:Oprea瀏覽器 - keygen input type。

當選取金鑰長度按下「送出」按鈕之後,在伺服端,利用ASP.NET網頁從查詢字串中取出金鑰顯示出來:

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

<!DOCTYPE html>

<script runat = "server">
    protected void Page_Load ( object sender , EventArgs e )
    {
        Label1.Text = Request.QueryString [ "key" ];
    }
</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 = "Label"> </asp:Label>
    </div>
    </form>
</body>
</html>

 

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

clip_image042[3]

圖 21:RSA金鑰。

HTML5常用Attribute

網頁應用程式使用HTML Form來收集使用者輸入的資料。HTML5為表單中的Input項目新增許多Attribute,來輔助設計的動作。此外也包含許多全域的attribute,像是用來隱藏HTML項目的hidden attribute,本節介紹一些常用的HTML5 Attribute。

placeholder attribute

placeholder attribute可以搭配文字類型text input type來使用,可用來提示使用者該輸入哪些類型的資料,參考以下範例。

<input id = "txtName" type = "text" placeholder = "請輸入姓名" />

placeholder attribute執行結果有點類似浮水印效果,placeholder中的值將顯示在文字方塊上,當做輸入的提示,一旦輸入資料placeholder中的值將自動消失,

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

clip_image044[3]

圖 22:Chrome瀏覽器執行的結果-placeholder attribute。

若我們想要判斷使用的瀏覽器是否支援placeholder的功能,可以使用一小段JavaScript程式碼,例如以下範例在網頁載入時的load事件中,叫用Check函數進行檢查,利用document建立一個input element,利用in判斷input elemen是否包含placeholder attribute :

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script type = "text/javascript" >

        function Check( element,  attribute ) {
            var element = document.createElement( element );
            if ( attribute in element )
                alert( "您的瀏覽器支援placeholder" );
            else
                alert( "您的瀏覽器不支援placeholder" );
        }
    </script>
</head>
<body onload = ' Check("input", "placeholder");' >
    <form>
    <input id = "txtName" type = "text" placeholder = "請輸入姓名" />
    </form>
</body>
</html>

 

使用placeholder attribute的好處是,您不用透過程式碼,在文字方塊取得游標控制權開始輸入資料時,將placeholder attribute的提示文字移除;在文字方塊中沒有值時,顯示提示文字,這樣可以讓程式設計師少做一些雜工。

placeholder attribute在使用上有一些建議事項:

  • placeholder顯示的文字要愈短愈好,只要能夠讓使用者理解要輸入什麼樣的內容即可。文字短的好處是不會超過文字方塊的寬度,提示文字不會被截斷。
  • placeholder中的內容不要含換行符號,只能是單行的文字。
autofocus attribute

autofocus用來指明游標要停留在哪一個HTML項目上。直接在HTML項目上設定autofocus = "autofocus",當網頁載入時,游標就會自動停在此項目上。這樣的好處是使用者可以直接進行資料的輸入動作,而不需要再使用額外的滑鼠點選、或鍵盤輸入動作。例如以下範例程式碼,其中包含三個text input type,第一個text input type 設定了autofocus = "autofocus":

 

<!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 />
    </form>
</body>
</html>

 

 

 

此範例在Chrome瀏覽器執行的結果請參考下圖所示,游標會自動停留在第一個文字方塊上:

clip_image046[3]

圖 23:Chrome瀏覽器執行的結果。

因為游標只有一個,因此一次只有一個HTML項目可以有游標,若有兩個以上的HTML項目都設定了autofocus attribute,例如以下範例有兩個text input type都設定了autofocus attribute:

 

<!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 = "請輸入地址"  autofocus = "autofocus" /> <br />
        <input id = "txtMemo" type = "text" placeholder = "請輸入備註" /> <br />
    </form>
</body>
</html>

 

 

執行的結果會視瀏覽器來決定,以下是Chrome瀏覽器的執行結果,游標會停留在最後一個autofocus出現的項目上,請參考下圖所示:

clip_image048[3]

圖 24:一次只有一個HTML項目可以有游標。

autocomplete attribute

autocomplete attribute可以套用在表單欄位(Form field)上,讓曾經輸入的資料,可以透過清單的方式顯示,以便讓使用者利用選取的方式來替代鍵盤輸入。這樣可以讓經常填入類似內容的欄位更容易輸入。

autocomplete attribute可以設定為「on」代表啟用,若沒有設定autocomplete attribute,則預設就視為on。若要關閉這個設定,就將它設定為「off」。比較有敏感性的資料建議將此attribute設定為off,例如信用卡號碼、密碼等欄位資料,為了安全性考量,不應該讓瀏覽器記住它的值。

參考底下範例,第一個text input type autocomplete attribute設定為「on」;第一個text input type則設定為「off」,第三個沒有設定,則預設為「on」:

 

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

 

 

當使用者輸入資料按下submit按鈕,下回要輸入資料時,就會有清單提示,此範例在Chrome瀏覽器執行的結果請參考下圖所示:

clip_image050[3]

圖 25:Chrome瀏覽器- 啟用autocomplete attribute。

autocomplete attribute的行為可能會被瀏覽器的設定而影響,例如使用者可能會在瀏覽器將自動填入的功能關閉,這樣自動完成的功能就會失效。舉例來說,在Chrome瀏覽器的設定中,可以清除勾選「啟用自動填入功能,輕鬆一按即可填妥網路表單」項目,這樣自動完成的功能就會失效,請參考下圖所示:

clip_image052[3]

圖 26:Chrome瀏覽器-清除勾選「啟用自動填入功能,輕鬆一按即可填妥網路表單」項目會使autocomplete失效。

list attribute

list attribute通常搭配datalist element來使用。datalist也是HTML5新增的表單項目。由datalist element來預先設定清單資料,input type可以透過list attribute來取得datalist上的清單資料,來達到自動完成的功能。使用list和datalist element的好處是使用者以combo box方式選取的方式來輸入資料,比較不會造成錯誤。另一個好處是即使在瀏覽器autocomplete功能關閉的情況下,清單還是可以正常地運作,不會受到影響。

舉例來說以下範例的text input type設定list attribute為「lst」,此為datalist項目的id值:

 

<!DOCTYPE html>
<html xmlns = http://www.w3.org/1999/xhtml >
<head>
    <title></title>
</head>
<body>
    <form>
        <input id = "txtName" type = "text" placeholder = "請選擇地區"  list = "lst"/>
        <datalist id = "lst" >
            <option value = "中正區" />
            <option value = "信義區" />
            <option value = "松山區" />
            <option value = "大安區" />
            <option value = "大同區" />
        </datalist>
          <input id = "Submit1" type = "submit" value = "submit" />
    </form>
</body>
</html>

 

 

 

在datalist項目中,若要設定清單,可以使用<option>項目,如範例中的台北每一個分區名稱都包在一個<option>項目之中。執行時,外觀有如combo box,由一個文字方塊(textbox)和一個清單方塊組成,只需要點選一下文字方塊,或輸入部分文字,就會自動列出datalist設定的清單方塊供使用者選取。此範例在Chrome瀏覽器執行的結果請參考下圖所示:

clip_image054[3]

圖 27:Chrome瀏覽器-list與datalist。

除了在<option> 標籤中使用value屬性來設定清單中的項目之外,還可以將項目包在<option> </ option> 標籤之中,例如可以將上個範例的HTML標籤修改為:

 

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
</head>
<body>
    <form>
        <input id = "txtName" type = "text" placeholder = "請選擇地區"  list = "lst" autocomplete = "off" />
        <datalist id = "lst" >
            <option> 中正區 </option>
            <option> 信義區 </option>
            <option> 松山區 </option>
            <option> 大安區 </option>
            <option> 大同區 </option>   
        </datalist>
          <input id = "Submit1" type = "submit" value = "submit" />
    </form>
</body>
</html>

 

 

此外,因為有些瀏覽器並不支援<datalist>標籤,你可以改用<select>標籤來取代<datalist>標籤,這樣<datalist>標籤和<select>標籤就可以共用相同的清單,參考以下範例,舊的瀏覽器將會顯示dropdownlist下拉式清單方塊,而新的會顯示combo box:

 

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
</head>
<body>
    <form>
<input id = "txtName" type = "text" placeholder = "請選擇地區" name = "reglist" list = "lst" autocomplete = "off" />
    <datalist id = "lst" >
        <label>
            請從清單選擇地區
        </label>
        <select name = "reglist" >
            <option> 中正區 </option>
            <option> 信義區 </option>
            <option> 松山區 </option>
            <option> 大安區 </option>
            <option> 大同區 </option>
        </select>
    </datalist>
<input id = "Submit1" type = "submit" value = "submit" />
    </form>
</body>
</html>

 

 

此範例在ie9瀏覽器執行的結果如下圖,ie9瀏覽器將會顯示dropdownlist下拉式清單方塊:

clip_image056[3]

圖 28:ie9瀏覽器將會顯示dropdownlist下拉式清單方塊。

HTML5還許有多新增的attribute,將於下一期的文章繼續介紹。

Tags:

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

評論 (48) -

訪客
訪客 Taiwan
2013/2/13 下午 06:57:47 #

請教一下:

keygen項目用來產生一對公開金鑰包含public key與private key,當<keygen>項目所在的表單被提交時,private key會儲存在本機的金鑰存放地,而private key便傳送到伺服器,進而協助網站伺服器可以識別出用戶端

「而private key便傳送到伺服器」是否應修改為「而public key便傳送到伺服器」?

回覆

Vivid
Vivid Taiwan
2013/2/27 下午 12:04:22 #

謝謝提醒,已修正!! ^_^

回覆

cours de theatre paris
cours de theatre paris United States
2017/10/1 上午 03:02:38 #

Thanks a lot for the article post.Really thank you! Much obliged.

回覆

can ho osimi
can ho osimi United States
2017/10/7 上午 01:41:17 #

Thanks again for the post.Thanks Again. Keep writing.

回覆

can ho bien vung tau
can ho bien vung tau United States
2017/10/9 下午 07:29:01 #

Thanks so much for the post.Much thanks again. Fantastic.

回覆

Google new cheat hacklinks
Google new cheat hacklinks United States
2017/10/12 下午 10:08:00 #

Very neat article post.Really looking forward to read more. Cool.

回覆

visit this site right here
visit this site right here United States
2017/10/14 下午 05:24:08 #

Thanks a lot for the post.Really looking forward to read more. Will read on...

回覆

dragon city hack apk
dragon city hack apk United States
2017/10/15 下午 04:54:43 #

I really liked your post.Much thanks again. Cool.

回覆

this page
this page United States
2017/10/17 下午 04:12:58 #

I cannot thank you enough for the post.Much thanks again. Really Great.

回覆

sletrokor
sletrokor United States
2017/10/17 下午 09:44:47 #

Thanks for sharing, this is a fantastic blog.Much thanks again. Will read on...

回覆

porn
porn United States
2017/10/19 上午 08:48:06 #

I really like and appreciate your blog.Much thanks again. Really Great.

回覆

see this website
see this website United States
2017/10/19 下午 07:52:41 #

I am so grateful for your article post.Really thank you! Much obliged.

回覆

EZ Battery Reconditioning Scam
EZ Battery Reconditioning Scam United States
2017/10/30 下午 01:18:23 #

Thank you ever so for you post.Really looking forward to read more. Awesome.

回覆

phenocal
phenocal United States
2017/11/1 下午 09:14:31 #

I value the post.Much thanks again.

回覆

phentaslim review
phentaslim review United States
2017/11/3 上午 08:58:10 #

Great article post.Much thanks again. Great.

回覆

throbbing back pain
throbbing back pain United States
2017/11/15 上午 07:32:17 #

Very informative post.Much thanks again. Will read on...

回覆

A big thank you for your post.Really looking forward to read more. Keep writing.

回覆

fashion
fashion United States
2017/11/23 下午 09:35:23 #

Enjoyed every bit of your blog article.Really looking forward to read more. Fantastic.

回覆

Website Design Auckland
Website Design Auckland United States
2017/11/25 下午 06:32:57 #

I truly appreciate this blog post.Really thank you! Want more.

回覆

Chad Boonswang and Jeffrey Goodman
Chad Boonswang and Jeffrey Goodman United States
2017/11/26 下午 05:42:53 #

Enjoyed every bit of your article post.Really thank you! Really Cool.

回覆

cash for cars scammer
cash for cars scammer United States
2017/11/29 下午 04:09:19 #

wow, awesome blog post.Much thanks again. Fantastic.

回覆

Jardin Del Palacio
Jardin Del Palacio United States
2017/11/29 下午 10:44:45 #

Thanks a lot for the blog post.Thanks Again. Much obliged.

回覆

Credit Mastery builds business credit
Credit Mastery builds business credit United States
2017/12/1 上午 12:35:08 #

Thanks for the post.Really thank you! Cool.

回覆

porno
porno United States
2017/12/1 下午 04:14:34 #

Looking forward to reading more. Great article.Really looking forward to read more. Much obliged.

回覆

Credit Mastery builds business credit
Credit Mastery builds business credit United States
2017/12/3 上午 04:33:41 #

Thank you for your blog post.Really thank you! Really Great.

回覆

mobile hentai
mobile hentai United States
2017/12/5 上午 09:20:31 #

I loved your blog post.Much thanks again. Cool.

回覆

A round of applause for your blog article.Really thank you! Really Cool.

回覆

I am so grateful for your blog post. Great.

回覆

my site
my site United States
2017/12/10 下午 06:58:17 #

Great, thanks for sharing this blog. Much obliged.

回覆

Edna Arellanes
Edna Arellanes United States
2017/12/14 上午 09:05:45 #

Major thankies for the blog article.Really thank you! Will read on...

回覆

visit this website
visit this website United States
2017/12/14 下午 03:56:42 #

Really informative post. Want more.

回覆

Hanukkah
Hanukkah United States
2017/12/14 下午 10:27:47 #

Im thankful for the post.Really thank you! Really Cool.

回覆

canon driver software
canon driver software United States
2017/12/16 下午 05:39:10 #

Thanks so much for the article.Really thank you! Keep writing.

回覆

green coffee bean for weight loss
green coffee bean for weight loss United States
2017/12/16 下午 11:55:55 #

Muchos Gracias for your blog post.Really looking forward to read more. Fantastic.

回覆

Thanks-a-mundo for the post.Much thanks again.

回覆

Enterprise
Enterprise United States
2017/12/17 下午 05:20:07 #

Very good blog post. Fantastic.

回覆

buying online degree
buying online degree United States
2017/12/18 上午 12:22:47 #

Thanks again for the post.Really thank you! Awesome.

回覆

driver canon
driver canon United States
2017/12/23 下午 01:14:36 #

Wow, great post.Really looking forward to read more. Great.

回覆

Thanks for sharing, this is a fantastic blog post.Really thank you! Awesome.

回覆

SOCCER HIGHLIGHTS
SOCCER HIGHLIGHTS United States
2017/12/26 下午 02:01:17 #

Fantastic blog.Really thank you! Will read on...

回覆

canon drivers
canon drivers United States
2017/12/27 下午 08:48:13 #

wow, awesome article.Much thanks again. Keep writing.

回覆

dig this
dig this United States
2018/1/2 下午 07:31:42 #

Muchos Gracias for your blog post.Really looking forward to read more. Much obliged.

回覆

printer driver
printer driver United States
2018/1/3 上午 10:44:57 #

Great, thanks for sharing this post.Really looking forward to read more. Great.

回覆

Bitcoin slots
Bitcoin slots United States
2018/1/4 下午 09:32:05 #

Thanks for sharing, this is a fantastic post.Really looking forward to read more. Cool.

回覆

hp driver
hp driver United States
2018/1/5 下午 08:40:48 #

I am so grateful for your article post.Much thanks again. Awesome.

回覆

FBA
FBA United States
2018/1/6 下午 12:44:19 #

Very neat blog article.Thanks Again.

回覆

colocation miami
colocation miami United States
2018/1/10 下午 01:45:43 #

A round of applause for your post.Really thank you! Really Great.

回覆

新增評論




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






NET Magazine國際中文電子雜誌

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

月分類Month List