表單欄位

寶寶123發表於2018-09-18

element屬性

  • 表單中所有表單元素（欄位）的集合。
  • 該集合是一個有序列表。
  • 每個表單欄位在集合中的順序，與它們出現在標記中的順序相同。
  • 可以按照位置和name特性，訪問欄位。
    • 當多個欄位的name名相同時，使用name訪問欄位，會返回一個NodeList。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>elements</title>
</head>

<body>
    <form id="myForm">
        <input type="text" name="textName1" />
        <input type="text" name="textName2" />

        <input type="radio" name="radioName" checked />
        <input type="radio" name="radioName" />
        <input type="radio" name="radioName" />
    </form>
    <script>
        var myForm = document.getElementById("myForm");

        // 取得第一個欄位
        var myForm1 = myForm.elements[0];
        console.log("myForm1",myForm1);     // <input type="text" name="textName1" />
        

        // 取得name為textName1的欄位
        var textName2 = myForm.elements["textName2"];
        console.log("textName2",textName2);  // <input type="text" name="textName2" />

        // 取得表單中包含欄位的數量
        var fieldCount = myForm.elements.length;
        console.log("fieldCount",fieldCount);  // 5
        
        // 取得name名相同的欄位
        var radioName = myForm.elements["radioName"]
        console.log("radioName",radioName);  // [input,input,input]
        
        var radioName2 = radioName[1];
        console.log('radioName2',radioName2);  //<input type="radio" name="radioName" />
    </script>
</body>

</html>
複製程式碼

相關文章