HTML+JS reading form data

Expected effect
Code
Analysis
Result display

Expected effect

When a form is submitted, it is usually necessary to verify the data validity of the form. The premise of verifying the data is to read the data of the form elements. As shown in Figure 1 below, when clicking the "submit" button, you need to read the login name, password, confirm password, gender, age and other data. Then use the warning box on the web page to prompt each item entered by the user, as shown in Figure 2 below.

Code

This code can be found in my GitHub, Link here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Read form data</title>
    <style type="text/css">
        input{
            height: 20px;
            margin: 3px auto;
        }
        select{
            height: 20px;
            margin: 3px auto;
        }
    </style>
    <script>
        function infoConfirmed() {
            var loginNm = document.getElementById("loginNm").value;
            var pwd = document.getElementById("pwd").value;
            var confirmPwd = document.getElementById("confirmPwd").value;
            if(document.getElementById("sex1").checked){
                var sex = document.getElementById("sex1").value;
            }
            if(document.getElementById("sex2").checked){
                var sex = document.getElementById("sex2").value;
            }
            var num = document.getElementById("sel").selectedIndex;
            var year = document.getElementById("opt_" + num).value;
            window.alert("Login name:" + loginNm + "\n Password:" + pwd + "\n Confirm password:" + confirmPwd + "\n Gender:" + sex + "\n Age:" + year);
        }
    </script>
</head>
<body>
    <h1>Membership registration</h1>
    <form>
        Login name:<input type="text" id="loginNm" />
        <br />
        Password:<input type="password" id="pwd"/>
        <br />
        Confirm password:<input type="password" id="confirmPwd"/>
        <br />
        Gender:<input id="sex1" type="radio" value="Male" name="sex" checked/>Male
        &nbsp;
        <input id="sex2" type="radio" value="Female sex" name="sex"/>Female sex
        <br />
        Age:
        <select id="sel">
            <option id="opt_0" value="" disabled selected style="display: none;">--Please choose--</option>
            <option id="opt_1" value="1">1</option>
            <option id="opt_2" value="2">2</option>
            <option id="opt_3" value="3">3</option>
            <option id="opt_4" value="4">4</option>
            <option id="opt_5" value="5">5</option>
            <option id="opt_6" value="6">6</option>
            <option id="opt_7" value="7">7</option>
            <option id="opt_8" value="8">8</option>
            <option id="opt_9" value="9">9</option>
            <option id="opt_10" value="10">10</option>
            <option id="opt_11" value="11">11</option>
            <option id="opt_12" value="12">12</option>
            <option id="opt_13" value="13">13</option>
            <option id="opt_14" value="14">14</option>
            <option id="opt_15" value="15">15</option>
            <option id="opt_16" value="16">16</option>
            <option id="opt_17" value="17">17</option>
            <option id="opt_18" value="18">18</option>
            <option id="opt_19" value="19">19</option>
            <option id="opt_20" value="20">20</option>
            <option id="opt_21" value="21">21</option>
            <option id="opt_22" value="22">22</option>
            <option id="opt_23" value="23">23</option>
            <option id="opt_24" value="24">24</option>
            <option id="opt_25" value="25">25</option>
            <option id="opt_26" value="26">26</option>
            <option id="opt_27" value="27">27</option>
            <option id="opt_28" value="28">28</option>
            <option id="opt_29" value="29">29</option>
            <option id="opt_30" value="30">30</option>
            <option id="opt_31" value="Over 30 years old">Over 30 years old</option>
        </select>
        <br />
        <input type="submit" value="Submission" onclick="infoConfirmed()"/>
    </form>
</body>
</html>

Analysis

The form elements of the page can be accessed through the getElementById() method or getElementByName() method of the document object; the form elements within a specific form can also be accessed through the element collection attribute of the form object.

The text of text box and password box can pass their value Attribute to obtain; whether the radio box button is selected can be obtained by its checked attribute, and its value can be obtained by the value attribute; by the selectedIndex attribute of the list box, the index of the selected item can be found in the option collection of the list box, and the item with the text attribute indicates that it is text and the value with the vlaue attribute indicates that it is text.