HTML+JS读取表单数据

HTML+JS读取表单数据

  • 预计效果
  • 代码
  • 分析
  • 结果展示

预计效果

表单提交时,通常需要对表单实行数据有效性验证,验证数据的前提是读取表单元素的数据。如下图1所示的表单,在点击“提交”按钮时要读取登录名、密码、确认密码、性别、年龄等数据。然后用在网页上用警示框提示出用户所输入的每一项,如下图2。
HTML+JS读取表单数据_第1张图片
HTML+JS读取表单数据_第2张图片

代码

该代码可在我的GitHub中找到,链接在此


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>读取表单数据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("登录名:" + loginNm + "\n密码:" + pwd + "\n确认密码:" + confirmPwd + "\n性别:" + sex + "\n年龄:" + year);
        }
    script>
head>
<body>
    <h1>会员注册h1>
    <form>
        登录名:<input type="text" id="loginNm" />
        <br />
        密码:<input type="password" id="pwd"/>
        <br />
        确认密码:<input type="password" id="confirmPwd"/>
        <br />
        性别:<input id="sex1" type="radio" value="男性" name="sex" checked/>男性
         
        <input id="sex2" type="radio" value="女性" name="sex"/>女性
        <br />
        年龄:
        <select id="sel">
            <option id="opt_0" value="" disabled selected style="display: none;">--请选择--option>
            <option id="opt_1" value="1">1option>
            <option id="opt_2" value="2">2option>
            <option id="opt_3" value="3">3option>
            <option id="opt_4" value="4">4option>
            <option id="opt_5" value="5">5option>
            <option id="opt_6" value="6">6option>
            <option id="opt_7" value="7">7option>
            <option id="opt_8" value="8">8option>
            <option id="opt_9" value="9">9option>
            <option id="opt_10" value="10">10option>
            <option id="opt_11" value="11">11option>
            <option id="opt_12" value="12">12option>
            <option id="opt_13" value="13">13option>
            <option id="opt_14" value="14">14option>
            <option id="opt_15" value="15">15option>
            <option id="opt_16" value="16">16option>
            <option id="opt_17" value="17">17option>
            <option id="opt_18" value="18">18option>
            <option id="opt_19" value="19">19option>
            <option id="opt_20" value="20">20option>
            <option id="opt_21" value="21">21option>
            <option id="opt_22" value="22">22option>
            <option id="opt_23" value="23">23option>
            <option id="opt_24" value="24">24option>
            <option id="opt_25" value="25">25option>
            <option id="opt_26" value="26">26option>
            <option id="opt_27" value="27">27option>
            <option id="opt_28" value="28">28option>
            <option id="opt_29" value="29">29option>
            <option id="opt_30" value="30">30option>
            <option id="opt_31" value="大于30岁">大于30岁option>
        select>
        <br />
        <input type="submit" value="提交" onclick="infoConfirmed()"/>
    form>
body>
html>

分析

通过document对象的getElementById()方法或getElementByName()方法可以访问页面的表单元素;通过表单对象的element集合属性也可访问特定表单内的表单元素。

文本框、密码框的文本可以通过他们的 value 属性来获得;单选框按钮时是否被选中可由它的checked属性获知,它的值可由value属性获取;由列表框的selectedIndex属性可知被选中的项的索引,用此索引可在列表框的option集合中查找到被选中的项,项有text属性表示它是文本,有vlaue属性表示的值。

结果展示

HTML+JS读取表单数据_第3张图片
输入内容
HTML+JS读取表单数据_第4张图片
点击提交,出现以下页面
HTML+JS读取表单数据_第5张图片

你可能感兴趣的:(HTML)