HTML5表單新增元素與屬性 （續）

乞力馬紮羅的雪CYF發表於2015-09-29
HTML

1.標籤的control屬性

在HTML5中，可以在標籤內部放置一個表單元素，並且通過該標籤的control屬性來訪問該表單的元素。

示例程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <script>
        function setValue(){

            var label = document.getElementById("label");
            var textbox = label.control;
            textbox.value = "010010";
        }
    </script>

    <form>
        <label id="label">
            郵編:
            <input id="txt_zip" maxlength="6">
            <small>請輸入六位數字</small>
        </label>
        
        <input type="button" value="設定預設值" onclick="setValue()">
    </form>

</body>
</html>

2.文字框的placeholder屬性

placeholder是指當文字框處於未輸入狀態時顯示的輸入提示。當文字框處於未輸入狀態且未獲取游標焦點時，模糊顯示輸入提示文字。

例項程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

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

</body>
</html>


3.文字框的list屬性

在HTML5中，為單行文字框增加了一個list屬性，該屬性的值為某個datalist元素的id。datalist元素也是HTML5中新增的元素。該元素類似於選擇框，但是當使用者想要設定的值不在選擇列表之內時，允許自行輸入。datalist元素本身並不顯示，而是當文字框獲得焦點時以提示輸入的方式顯示。

例項程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <form>
        <input type="text" name="greeting" list="greetings">

        <datalist id="greetings" style="display: none">
            <option value="HTML5">HTML5</option>
            <option value="Android">Android</option>
            <option value="iOS">iOS</option>
        </datalist>


    </form>

</body>
</html>


4.文字框的autocomplete屬性

幫助輸入所用的自動完成功能，是一個既節省時間又十分方便的功能。在HTML5之前，因為誰都可以看見輸入的值，所有在安全方面的缺陷，只要使用AutoComplete屬性，安全性方面也可以得到很好的控制。

示例程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <input type="text" name="greeting" autocomplete="on" list="greetings">

    <datalist id="greetings">

        <option name="HTML5">HTML5</option>
        <option name="iOS">iOS</option>
        <option name="Android">Android</option>
        <option name="BootStrap">BootStrap</option>
        <option name="Java">Java</option>
        <option name="JavaScript">JavaScript</option>
        <option name="CSS3">CSS3</option>
        <option name="Objective-C">Objective-C</option>
        <option name="Swift">Swift</option>


    </datalist>


</body>
</html>


5.文字框的pattern屬性

在HTML5中，對input元素使用pattern屬性，並且將屬性值設為某個格式的正規表示式，在提交時會針對這些進行檢查，檢查其內容是否符合給定格式。當輸入的內容不符合給定格式時，則不允許提交，同時在瀏覽器中顯示資訊提示文字，提示輸入的內容必須符合給定格式。

示例程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <form>
        請輸入內容：
        <input pattern="[A-Z]{3}" name="part">
        <input type="submit" formaction="http://localhost:8080/TestHTMLformaction/First.jsp">
    </form>

</body>
</html>


6.文字框的SelectionDirection屬性

這針對text元素和textarea元素，HTML5增加了SelectionDirection屬性。當使用者在這兩個元素中用滑鼠選取部分文字時，可以使用該屬性來獲取選取方向。當使用者正向選取文字時，該屬性值為“forward”，當使用者反向選取文字時，該屬性值為"backward",當使用者沒有選取任何文字時，該屬性值為"forward".

示例程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <script>

        function AD(){

            var control = document.forms[0]['text'];
            var Direction = control.selectionDirection;
            alert(Direction);
        }

    </script>

    <form>
        <input type="text" name="text">
        <input type="button" value="點選我" onclick="AD()">
    </form>

</body>
</html>

7.核取方塊的indeterminate屬性

對於核取方塊checkbox元素來說，過去只是選取與非選取這兩種狀態。在HTML5中，可以在JavaScript指令碼程式碼中對該元素使用indeterminate屬性，以說明覆選框處於“尚未明確是否選取”狀態。

示例程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <form>
        <input type="checkbox" indeterminate id="cb">屬性測試
        <script>

            var cb = document.getElementById("cb");
            cb.indeterminate = true;

        </script>

    </form>

</body>
</html>

8.image提交按鈕的height屬性與width屬性

針對型別為image的input元素，HTML5新增了兩個屬性，height，width分別用來指定圖片按鈕的高度和寬度。


github主頁：https://github.com/chenyufeng1991  。歡迎大家訪問！


相關文章