HTML5項目筆記2：離線系統資料表單設計

標籤：text   hang   時間格式   選擇   最大   方式   用戶端   失敗   match   

在這個離線系統中，表單無疑是構成這個離線系統的視圖部分，作為最前端，與客戶的操作最密切相關的一塊，所以我們有必要先瞭解一下HTML5的Forms API，它有如下特性： 

表單仍然使用Form元素作為容器，我們可以在其中設定基本的提交性質；

使用者或者開發人員提交頁面的時候，表單仍用於向伺服器端發送表單中控制項的值；

沿用之前的表單控制項及其使用方法，並不斷髮展和增加新的控制項和功能；

可以用指令碼動作表單控制項；

 

HTML5包含了大量的新的API和元素類型，如下：

新的輸入型控制項： 

類型	用途
input type=datetime	時間和日期輸入框
input type=datetime-local	本地的時間和日期輸入框
input type=date	日期輸入框
input type=month	年月輸入框
input type=time	時間輸入框
input type=week	星期輸入框
input type=number	數值輸入框
input type=tel	電話號碼輸入框
input type=email	電子郵件地址文字框
input type=url	URL地址文字框
input type=search	用於搜尋文字框
input type=range	特定範圍的數值選取器，以進度條方式顯示
input type=color	顏色選取器（這個不使用）

 

下面這些元素很多我們會在離線填報表單裡面使用到,可以複製拿到Chrome瀏覽器裡面試試看：

 

日期格式文字框： 

<p> 

<label for="date">date類型：</label>

<input type="date" id="date"><span>請在新版Chrome中查看</span> 

</p>

 

時間格式文字框： 

<p> 

<label for="time">time類型：</label>

<input type="time" id="time"><span>請在新版Chrome中查看</span> 

</p>

 

月份格式文字框： 

<p> 

<label for="month">month類型：</label> 

<input type="month" id="month"><span>請在新版Chrome中查看</span> 

</p>

 

周格式文字框：

<p> 

<label for="week">week類型：</label> 

<input type="week" id="week"><span>請在新版Chrome中查看</span> 

</p>

 

電話號碼輸入文字框： 

<p> 

<label for="tel">tel類型：</label> 

<input type="tel " id="week"><span>請在新版Chrome中查看</span> 

</p>

 

數實值型別輸入文字框： 

value指的是初始時的預設值，min為最小值，max為最大值,step為增量和減量均為某個值， 

或者某個值的倍數，如我們下面是3，所以它只是3，或者3的倍數： 

<p> 

<label for="number">number類型：</label> 

<input type="number" name="number" id="number"  step="3" value="3" min="0" max="4"  > 

<span>請在新版Chrome中查看</span> 

</p>

 

滑動條Range：

範圍：value：指的是初始時的預設值，min為最小值，max為最大值,step為增量和減量均為1,這邊加了個

函數，用以即時顯示range的進度條：

<p>

<label for="range">range類型：</label>

<input type="range" id="range" min="1" max="100" step="1" value="36" onchange="changeRange(this.value)"/> 

<span id=”ShowRange” ></span>

<span>請在新版Opera或Chrome或Safari中查看</span>

</p>   

function changeRange(rangeVal) {

            $("#ShowRange").html(rangeVal+"%");

 }

 

 

Placeholder：預設輸入框標題文字： 

Placeholder：（placeholder指的是預設的文字，當使用者沒有輸入值的時候，輸入型控制項可以通過placeholder進行描述性說明或提示，當焦點聚焦或者輸入文本的時候，placeholder會消失）： 

<input type="text" placeholder="對文字框的描述…" />

  

Autocomplete : 自動完成 

autocomplete="on"，作用：儲存輸入值以備將來使用，autocomplete="off"，不儲存，

autofocus="autofocus"：預設載入聚焦

 

電子郵件文字框Email：

<p>

<label for="email">email類型：</label>

<input type="email" name="email" id="email" placeholder="請輸入正確mail地址" />

<span>請在新版Chrome中查看</span>

</p> 

Email文字框要求必須輸入的是正確的郵箱地址，否則的會有錯誤提示

 

URL文字框：

<p>

<label for="url">url類型：</label>

<input type="url" id="url" autocomplete="off" placeholder="請輸入正確URL地址" autofocus="autofocus">

<span>請在新版的Chrome中查看效果</span>

</p>

URL文字框要求必須輸入的是郵箱地址，否則的會有錯誤提示： 

 

Search搜尋方塊：

帶有搜尋方塊樣式的input控制項，

<p>

<label for="search">search類型：</label>

<input type="search" results="n" id="search">

<span>請在新版Chrome中查看</span>

</p> 

 THE CONSTRAINT VALIDATION API（用戶端驗證API）：

HTML5使用ValidityState對象來反饋表單的驗證狀態

var checkResult = input.validity; 

if(checkResult.valid) console.debug(“驗證通過”); 

else console.debug(“驗證失敗”); 

驗證的通過或者失敗取決於HTML5 引進的八種驗證約束條件，如果全部通過，則返回True，只要有一個未通過，則返回False。

 

1、 valueMissing

目的：確保表單控制項中的值有填寫

用法：在表單控制項中將required屬性設為true

樣本：<input type="text" required="true" />

 

 

2、 typeMismatch

目的：確保控制項內的值與控制項的類型相同（如number，email，url）

用法：指定表單頁面的type特徵值

樣本：<input type="email" />

 

3、 patternMismatch

目的：根據表單控制項上設定的格式規則驗證輸入是否為有效格式。

用法：在表單控制項上設定pattern特性，井賦予適當的匹配規則，title是你要反饋給使用者的自訂錯誤資訊。

樣本：<input type=”text” title = "請填寫數值，可以包含1-4位的小數", placeholder = "請填寫數值...", pattern = "^[0-9]+(.[0-9]{1,4})?$"/>

 

4、 tooLong

目的：避免輸入值包含過多字元。

用法：在表單控制項上設定maxLength特性。

樣本：<input type="text" maxLength="30">

 

5、 rangeUnderflow

6、 rangeOverflow

目的：限制數值型控制項的最小值和最大值。

用法：為表單控制項設定min/max特性，並賦予允許的最小值/最大值。

樣本：<input type="range" name="ageCheck" min="18" max="80" />

 

7、 stepMismatch

目的：確保輸入值符合min、max及step即設定。

用法：為表單控制項設定step特性，指定數值的增量。

樣本：<input type="range" min="0" max="100" step="5">

 

 

8、 customError 

目的：開發人員的自訂錯誤資訊，處理應用代碼明確設定及計算產生的錯誤。

用法：調用setCustomValidity(message)將表單控制項置於customError狀態。

樣本： 

<input type="text" oninput="checkNumuric(this)" />

Script: 

    function checkNumuric(input) { 

        var checkValue = input.value; 

        var reg = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/; 

        if (!reg.test(checkValue)) input.setCustomValidity(‘您需要輸入正確的網址！‘); 

        else input.setCustomValidity(‘‘);

    }

 

Cancel VALIDATION（取消驗證操作）：

1、 form元素的 novalidate 屬性，關閉表單驗證，可以不同地區做這個設定，來對某些提交的資料驗證，某些不驗證。

2、 input 元素的 formnovalidate屬性，可以對該元素啟動或停止驗證

3、 sumbmit 元素的 formnovalidate屬性，可以對整個表單啟動或停止驗證，相當與form 元素的 novalidate屬性

HTML5項目筆記2：離線系統資料表單設計