HTML5系列：HTML5表單

libingql發表於2015-04-19
HTML

1. input元素新增型別

　　url型別

　　url型別的input元素是一種用來輸入url的文字框，提交時如果該文字框中內容不是url格式，則不允許提交。

<input type="url" />

　　email型別

　　email型別的input元素是用來輸入email的文字框，具有一個multiple屬性允許在文字框中輸入一串以逗號分隔的email地址。

<input type="email" multiple />

　　date型別

　　date型別的input元素用來輸入日期的文字框。

<input type="date" value="2015-04-19" />

　　time型別

　　time型別的input元素是用來輸入時間的文字框。

<input type="time" value="00:19" />

　　month型別

　　month型別的input元素用來輸入月份的文字框。

<input type="month" value="2015-04" />

　　week型別

　　week型別的input元素用來輸入周號的文字框。

<input type="week" value="2015-W20" />

　　number型別

　　number型別input元素是用來輸入數字的文字框，在提交時會檢查其中的內容是否為數字，具有min、max及step屬性。

<input type="number" min="1" max="100" step="5" />

　　range型別

　　range型別的input元素是隻允許輸入一段範圍內數值的文字框，具有min、max及step屬性。

<input type="range" min="0" max="100" step="1" value="0" />

2. input元素新增屬性

　　autofocus屬性

　　autofocus屬性是一個Boolean值，在頁面載入完成後，input自動獲取焦點。

<input type="text" autofocus />

　　pattern屬性

　　pattern是元素的驗證屬性，使用正規表示式驗證文字輸入框中的內容。

<input type="text" pattern="^[a-zA-Z]\w{5,7}$" />

　　placeholder屬性

　　input元素的placeholder屬性為佔位屬性，顯示在輸入框中的提示資訊，當輸入框中輸入內容時，該提示資訊自動消失；當輸入框內容為空時，提示資訊重新顯示。

<input type="text" placeholder="請輸入" />

　　required屬性

　　input元素required屬性用於校驗輸入內容是否為空。

<input type="text" required />

　　list屬性

　　input元素list屬性的值為某個datalist元素的id，類似於選擇框(<select>)，當使用者想要設定的值不在選擇列表之內時，允許自行輸入。

<input type="text" list="weekdays" />
<datalist id="weekdays">
    <option value="Sunday">Sunday</option>
    <option value="Monday">Monday</option>
    <option value="Tuesday">Tuesday</option>
    <option value="Wednesday">Wednesday</option>
    <option value="Thursday">Thursday</option>
    <option value="Friday">Friday</option>
    <option value="Saturday">Saturday</option>
</datalist>

　　autocomplete屬性

　　input元素autocomplete屬性用於自動完成功能，autocomplete屬性可以指定“on”、“off”值。

<input type="text" autocomplete="on" list="weekdays" />
<datalist id="weekdays">
    <option value="Sunday">Sunday</option>
    <option value="Monday">Monday</option>
    <option value="Tuesday">Tuesday</option>
    <option value="Wednesday">Wednesday</option>
    <option value="Thursday">Thursday</option>
    <option value="Friday">Friday</option>
    <option value="Saturday">Saturday</option>
</datalist>

　　示例中使用datalist元素中資料作為候補輸入的資料在文字框中自動顯示。

　　formnovalidate屬性

　　input元素formnovalidate屬性用於設定在表單中不進行驗證。

<input type="number" formnovalidate />

3. 新增表單元素

3.1 datalist元素

　　datalist元素用於附中表單中文字框的資料輸入。datalist元素本身是隱藏的，與表單文字框的“list”屬性繫結，“list”屬性值為datalist元素的ID。

<input type="text"list="weekdays" />
<datalist id="weekdays">
    <option value="Sunday">Sunday</option>
    <option value="Monday">Monday</option>
    <option value="Tuesday">Tuesday</option>
    <option value="Wednesday">Wednesday</option>
    <option value="Thursday">Thursday</option>
    <option value="Friday">Friday</option>
    <option value="Saturday">Saturday</option>
</datalist>

3.2 output元素

　　output元素必須從屬於某個form，用於在頁面中顯示各種不同型別表單元素的內容。output元素的“onFormInput”事件，在表單輸入框輸入內容時觸發該事件。

<form>
    <input id="txtNumber1" type="number" /> *
    <input id="txtNumber2" type="number" /> =
    <output onforminput="value = txtNumber1.value * txtNumber2.value"></output>
</form>

4. 表單驗證

4.1 checkValidity顯示驗證

　　表單中的各元素可以利用pattern與required屬性驗證元素內容的有效性，每個元素都可以通過checkValidity()，校驗本身是否與驗證條件匹配。如果一致，返回true，否則返回false。

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript">
        function Check() {
            var email = document.getElementById("txtEmail");
            if (email.value == "") {
                alert("Email不能為空！");
                return false;
            } else if (!email.checkValidity()) {
                alert("Email格式錯誤！");
                return false;
            } else {
                alert("Email輸入正確！");
                return true;
            }
        }
    </script>
</head>
<body>
    <form id="form1" onsubmit="return Check();">
        <input id="txtEmail" type="email" />
        <input type="submit" value="Submit" />
    </form>
</body>
</html>

4.2 取消驗證

　　取消表單驗證的兩種常用方法：

　　（1）利用form元素的novalidate屬性，關閉整個表單的驗證；

　　（2）利用input元素或submit元素的formnovalidate屬性，讓表單對單個input元素取消驗證。

<form novalidate></form>
<input type="text" formnovalidate />

4.3 setCustomValidity自定義錯誤資訊

　　在表單與相應規則驗證時，由於使用的是系統內建的驗證方法，因此在出錯提示也是由系統自帶的。修改驗證出錯資訊內容呼叫元素或表單的setCustomValidity()方法。

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript">
        function Check() {
            var email = document.getElementById("txtEmail");
            if (email.value == "") {
                alert("Email不能為空！");
                return false;
            } else if (!email.checkValidity()) {
                email.setCustomValidity("Email格式錯誤！");
                return false;
            } else {
                alert("Email輸入正確！");
                return true;
            }
        }
    </script>
</head>
<body>
    <form id="form1" onsubmit="return Check();">
        <input id="txtEmail" type="email" />
        <input type="submit" value="Submit" />
    </form>
</body>
</html>

相關文章