html中如何获取表单的数据
使用表单中的id属性获取表单中的数据在表单的input标签中指定id属性值，在script脚本中可以通过 “表格的名称.id名称.value”来访问表单中的值，例如：register_form.username.value表单代码：<form name = "register_form" action="" method="post">昵称:<input type="text"
·
1. 使用表单中的id属性获取表单中的数据
在表单的input标签中指定id属性值，在script脚本中可以通过 “表格的名称.id名称.value”来访问表单中的值，例如：register_form.username.value
表单代码：
<form name = "register_form" action="" method="post">
昵称:<input type="text" name="username" maxlength="20" id="username"><br>
真实姓名:<input type="text" name="realname" maxlength="20" id="realname"><br>
性别： <input name ="sex" type ="radio" value = "男" checked>
男
<input name ="sex" type ="radio" value = "女" checked>
女<br>
密码：<input type="password" name="password1" maxlength="20"size="20"id="password1"><br>
确认密码：<input type="password" name="password2" maxlength="20"size="20"id="password2"><br>
请选择感兴趣的方向：<br/>
<input type="checkbox" name="interest" value="体育">体育
<input type="checkbox" name="interest" value="旅游">旅游
<input type="checkbox" name="interest" value="听音乐">听音乐
<input type="checkbox" name="interest" value="看书">看书<br>
E—mail:<input name="email" type="text" id="PWD224" size="50"id="email"><br>
<input name = "Submit" type = "button" value = "保存" onclick = check()>
<input name = "Reset" type = "reset" value = "重新填写">
</form>
在script脚本中，通过id访问表单中的值，利用函数判断其值是否为空，如果为空，则输出“请输入该信息字样”。
script脚本代码：
<script type="text/javascript">
function check(){
if( register_form.username.value==""){
alert("请输入用户名！"); register_form.username.focus(); return;
}else if(register_form.realname.value=="") {
alert("请输入真实姓名！");register_form.realname.focus();return;
}else if(register_form.password1.value==""){
alert("请输入密码！"); register_form.password1.focus();return;
}else if(register_form.password2.value==""){
alert("请输入确认密码！");register_form.password2.focus(); return;
}else if(register_form.email.value==""){
alert("请输入邮箱！"); register_form.email.focus();return;
}else{
document.register_form.submit();
}
}
运行结果：
完整的代码：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>注册新用户</title>
<script type="text/javascript">
function check(){
if( register_form.username.value==""){
alert("请输入用户名！"); register_form.username.focus(); return;
}else if(register_form.realname.value=="") {
alert("请输入真实姓名！");register_form.realname.focus();return;
}else if(register_form.password1.value==""){
alert("请输入密码！"); register_form.password1.focus();return;
}else if(register_form.password2.value==""){
alert("请输入确认密码！");register_form.password2.focus(); return;
}else if(register_form.email.value==""){
alert("请输入邮箱！"); register_form.email.focus();return;
}else{
document.register_form.submit();
}
}
</script>
</head>
<body>
<h2>注册新用户</h2>
<form name = "register_form" action="" method="post">
昵称:<input type="text" name="username" maxlength="20" id="username"><br>
真实姓名:<input type="text" name="realname" maxlength="20" id="realname"><br>
性别： <input name ="sex" type ="radio" value = "男" checked>
男
<input name ="sex" type ="radio" value = "女" checked>
女<br>
密码：<input type="password" name="password1" maxlength="20"size="20"id="password1"><br>
确认密码：<input type="password" name="password2" maxlength="20"size="20"id="password2"><br>
请选择感兴趣的方向：<br/>
<input type="checkbox" name="interest" value="体育">体育
<input type="checkbox" name="interest" value="旅游">旅游
<input type="checkbox" name="interest" value="听音乐">听音乐
<input type="checkbox" name="interest" value="看书">看书<br>
E—mail:<input name="email" type="text" id="PWD224" size="50"id="email"><br>
<input name = "Submit" type = "button" value = "保存" onclick = check()>
<input name = "Reset" type = "reset" value = "重新填写">
</form>
</body>
</html>
2. getElementsByName()方法
因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
例如，下面的代码可以获得form中第一个name为“inputText”的元素:
var myParagragh = document.getElementsByName("inputText")[0].value;
完整代码：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>注册新用户</title>
<script type="text/javascript" >
function check(){
if( document.getElementsByName("username")[0].value==""){
alert("请输入用户名！"); return;
}else if(document.getElementsByName("realname")[0].value=="") {
alert("请输入真实姓名！"); return;
}else if(document.getElementsByName("password1")[0].value==""){
alert("请输入密码！"); return;
}else if(document.getElementsByName("password2")[0].value==""){
alert("请输入确认密码！"); return;
}else if(document.getElementsByName("email")[0].value==""){
alert("请输入邮箱！"); return;
}else{
document.register_form.submit();
}
}
</script>
</head>
<body>
<h2>注册新用户</h2>
<form name = "register_form" action="" method="post">
昵称:<input type="text" name="username" maxlength="20"><br>
真实姓名:<input type="text" name="realname" maxlength="20" id="realname"><br>
性别： <input name ="sex" type ="radio" value = "男" checked>
男
<input name ="sex" type ="radio" value = "女" checked>
女<br>
密码：<input type="password" name="password1" maxlength="20"size="20"><br>
确认密码：<input type="password" name="password2" maxlength="20"size="20"><br>
请选择感兴趣的方向：<br/>
<input type="checkbox" name="interest" value="体育">体育
<input type="checkbox" name="interest" value="旅游">旅游
<input type="checkbox" name="interest" value="听音乐">听音乐
<input type="checkbox" name="interest" value="看书">看书<br>
E—mail:<input name="email" type="text" id="PWD224" size="50"><br>
<input name = "Submit" type = "button" value = "保存" onclick = check()>
<input name = "Reset" type = "reset" value = "重新填写">
</form>
</body>
</html>
运行截图：
基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。
更多推荐
10
0- 0
已为社区贡献1条内容
所有评论(0)