HTML5表單新增元素與屬性

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

1.表單內元素的form屬性

在HTML4中，表單內的從屬元素必須書寫在表單內部，而在HTML5中，可以把他們書寫在頁面上任何地方，然後為該元素指定一個form屬性，屬性值為該表單的id，這樣就可以宣告該元素從屬於指定的表單了。

程式碼示例如下：

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


<!--指定這個form的id，這樣這個form內部的屬性就不一定要寫在form內部了，也可以寫在外部。只要宣告id即可-->
    <form id="testform">
        <input type="text">
        <textarea form="testform"></textarea>
    </form>

</body>
</html>

2.表單內元素的formaction屬性

在HTML4中，一個表單內的所有元素只能通過表單的action屬性被統一提交到另一個頁面，而在HTML5中可以為所有的提交按鈕，增加不同的formaction屬性，使單擊不同的按鈕時可以將表單提交到不同的頁面。

程式碼示例如下：

（1）首先在服務端建立一個專案，我在Eclipse中新建一個Dynamic Web Project，然後在三個jsp中編寫程式碼如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
這是第一個頁面！
</body>
</html>

（2）然後在IDEA中實現HTML程式碼如下： 

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

    <form>
        <input type="submit" name="n1" value="提交到第一個頁面" formaction="http://localhost:8080/TestHTMLformaction/First.jsp">
        <input type="submit" name="n2" value="提交到第二個頁面" formaction="http://localhost:8080/TestHTMLformaction/Second.jsp">
        <input type="submit" name="n3" value="提交到第三個頁面" formaction="http://localhost:8080/TestHTMLformaction/Third.jsp">
    </form>

</body>
</html>

（3）點選不同的按鈕，頁面就會跳轉到不同的jsp頁面上。也就是說，這個在HTML5中，一個form中的不同按鈕可以執行不同的formaction,然後跳轉到不同的頁面。在HTML4中，一個表單只能有一個formaction，就算有多個按鈕，也只能跳到同一個formaction指定的頁面。


3.表單內元素的formmethod屬性

在HTML4中，一個表單內只能有一個action屬性用來對錶單內所有元素統一指定提交頁面，所以每個表單內只有一個method屬性來統一指定提交方法。在HTML5中，可以使用formmethod屬性來對每一個表單元素分別指定不同的提交方法。formmethod有post和get兩種。

程式碼示例如下：

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

    <form id="testform">
        <input type="submit" name="s1" value="v1" formmethod="post" formaction="http://localhost:8080/TestHTMLformaction/First.jsp">使用post提交
        <input type="submit" name="s2" value="v2" formmethod="get" formaction="http://localhost:8080/TestHTMLformaction/Second.jsp">使用get提交
    </form>


</body>
</html>

通過點選不同的按鈕，就能進行不同方式的請求，並把資料傳送到請求頁面上。


4.表單內元素的formenctype屬性

在HTML4中，表單元素具有一個enctype屬性，該屬性用於指定在表單傳送到伺服器之前應該如何對錶單內的資料進行編碼。在HTML5中，可以使用formenctype屬性對錶單分別指定不同的編碼方式。

示例程式碼如下：

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

    <form>

        <!--表單資料中的空格被轉化為加號，但不對錶單資料中的特殊字元進行編碼-->
        <input type="text" formenctype="text/plain">

        <!--不對字元進行編碼，在使用包含檔案上傳的表單時必須使用該值-->
        <input type="text" formenctype="multipart/form-data">

        <!--在傳送前編碼所有字元，當表單元素的action屬性為get時，需要使用這種方式把表單資料轉化成字元-->
        <input type="text" formenctype="application/x-www-form-urlencoded">


    </form>

</body>
</html>


5.表單內元素的formtarget屬性

在HTML4中，表單元素具有一個target屬性，該屬性用於指定在何處開啟表單提交後所需要載入的頁面。在HTML5中，可以對多個提交按鈕分別使用formtarget屬性來指定提交後在何處開啟所需載入的頁面。

示例程式碼如下：

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

<form>
    <input type="submit" name="n1" value="提交到第一個頁面" formtarget="_blank" formaction="http://localhost:8080/TestHTMLformaction/First.jsp">
    <input type="submit" name="n2" value="提交到第二個頁面" formtarget="_self" formaction="http://localhost:8080/TestHTMLformaction/Second.jsp">
    <input type="submit" name="n3" value="提交到第三個頁面" formtarget="_parent" formaction="http://localhost:8080/TestHTMLformaction/Third.jsp">
    <input type="submit" name="n3" value="提交到第三個頁面" formtarget="_top" formaction="http://localhost:8080/TestHTMLformaction/Third.jsp">
    <input type="submit" name="n3" value="提交到第三個頁面" formtarget="framename" formaction="http://localhost:8080/TestHTMLformaction/Third.jsp">
</form>


</body>
</html>

6.表單內元素的autofocus屬性

為文字框、選擇框或按鈕控制元件加上autofocus屬性，當畫面開啟時，該控制元件自動獲得游標焦點。

示例程式碼如下：

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

    <form>
        <input type="text">
        <input type="text" autofocus>

    </form>

</body>
</html>

7.表單內元素的required屬性

HTML5中新增的required屬性可以應用在大多數輸入元素上，在提交時，如果元素中內容為空白，則不允許提交，同時在瀏覽器中顯示提示文字。

示例程式碼如下：

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

    <form>

        <input type="text" required="required">
        <!--<input type="button" name="we" value="提交" formaction="http://localhost:8080/TestHTMLformaction/First.jsp">-->

        <button formaction="http://localhost:8080/TestHTMLformaction/First.jsp">提交</button>

    </form>

</body>
</html>


8.表單內元素的labels屬性

在HTML5中，為所有可使用標籤的表單元素、button、select元素等，定義一個labels屬性，屬性值為一個NodeList物件，代表該元素所繫結的標籤元素所構成的集合。

示例程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--JS程式碼和HTML可以混合進行程式設計-->
    <script>
        function Validate(){

            var txtName = document.getElementById("txt_name");
            var button = document.getElementById("btnValidate");
            var form = document.getElementById("testform");
            if(txtName.value.trim() == ""){

                var label = document.createElement("label");
                label.setAttribute("for","txt_name");
                form.insertBefore(label,button);
                txtName.labels[1].innerHTML = "請輸入姓名";
                txtName.labels[1].setAttribute("style","font-size:9px;color:red");
            }
        }
    </script>


    <form id="testform">
        <label id="label" for="txt_name">姓名:</label>
        <input id="txt_name">
        <input type="button" id="btnValidate" value="驗證" onclick="Validate()">
    </form>

</body>
</html>




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





相關文章