HTML+JS读取表单数据
·
预计效果
表单提交时，通常需要对表单实行数据有效性验证，验证数据的前提是读取表单元素的数据。如下图1所示的表单，在点击“提交”按钮时要读取登录名、密码、确认密码、性别、年龄等数据。然后用在网页上用警示框提示出用户所输入的每一项，如下图2。
代码
该代码可在我的GitHub中找到，链接在此
<!DOCTYPE html>
<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">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="大于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属性表示的值。
结果展示
输入内容
点击提交，出现以下页面
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
13
0- 0
已为社区贡献5条内容
所有评论(0)