<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>Form的使用</title>
</head>
<body>
<div>
<form name="form1">
<table width="30%" align="center" border="1">
<tr align="center">
<td colspan="2">用户信息注册</td>
</tr>
<tr>
<td width="30%" align="right" ><label>真实姓名：</label></td>
<td><input type="text" name="username" style="width: 95%" onfocus="if (this.value == '请输入姓名') this.value = ''; "
onblur="if (this.value == '') this.value = '请输入姓名'; " value="请输入姓名"></td>
</tr>
<tr>
<td width="30%" align="right" ><label>密码：</label></td>
<td><input type="password" name="password" style="width: 95%" placeholder="请输入密码"></td>
</tr>
<tr>
<td width="30%" align="right" ><label>用户性别：</label></td>
<td>
<input type="radio" name="sex" value="M">男
<input type="radio" name="sex" value="F" checked="checked">女
</td>
</tr>
<tr>
<td width="30%" align="right"><label>密码保护提示：</label></td>
<td>
<select name="tips">
<option selected="selected">请选择问题</option>
<option >我的生日？</option>
<option >印象深刻的小学班主任名字？</option>
<option >最喜欢的水果？</option>
<option >最喜欢的玩具？</option>
<option >最擅长的游戏？</option>
</select>
</td>
</tr>
<tr>
<td width="30%" align="right" ><label>你所关注的话题：</label></td>
<td >
<input type="checkbox" name="hobby" value="数码产品" checked="checked">数码产品
<input type="checkbox" name="hobby" value="运动系列" >运动系列
<input type="checkbox" name="hobby" value="家具用品" >家具用品
<input type="checkbox" name="hobby" value="DIY" >DIY
</td>
</tr>
<tr>
<td colspan="2" align="center">
<a href="javascript:submitfrom();">提交</a>
<!-- <button type="button" name="submit" onclick="javascript:submitfrom();">提交</button> -->
<input type="reset" name="reset" value="清空">
</td>
</tr>
<tr>
<td width="30%" align="right" ><label>用户协议：</label></td>
<td>
<textarea readonly="readonly" rows="3" style="width: 95%">
提示条款
您的信任对我们非常重要，我们深知用户信息安全的重要性，我们将按照法律法规要求，采取安全保护措施，保护您的用户信息安全可控。鉴此，阿里云（或简称“我们”）制定本《法律声明及隐私权政策》（以下或简称“声明和政策”）并提醒您：在使用阿里云网站的各项服务前，请您务必仔细阅读并透彻理解本《法律声明和隐私权政策》，在确认充分理解并同意后方使用相关产品和服务。一旦您开始使用阿里云服务，将被视为对本声明和政策内容的接受和认可。
如对本声明和政策内容有任何疑问、意见或建议，您可通过阿里云的工单、建议提交平台（https://connect.aliyun.com/）或客服电话（95187）与我们联系。
</textarea>
</td>
</tr>
</table>
</form>
</div>
<div>
<span >
<textarea id="texta" readonly="readonly" style="height: 400px; width: 500px; " ></textarea>
</span>
</div>
</body>
<script type="text/javascript">
function submitfrom() {
var _form = document.form1;
var _username = _form.username.value,
_password = _form.password.value,
_sex = _form.sex,
_sexValue = null;
_tips = _form.tips.value,
_hobby = _form.hobby;
_hobbyValue = "";
document.getElementById("texta").value += "姓名：" + _username + "\n";
console.log("姓名：" + _username + "\n");
document.getElementById("texta").value += "密码：" + _password + "\n";
console.log("密码：" + _password + "\n");
for (var i = _sex.length - 1; i >= 0; i--) {
if(_sex[i].checked) {
_sexValue = _sex.value;
break;
}
}
document.getElementById("texta").value += "性别：" + _sexValue + "\n";
console.log("性别：" + _sexValue + "\n");
document.getElementById("texta").value += "提示问题：" + _tips + "\n";
console.log("提示问题：" + _tips + "\n");
for (var i = _hobby.length - 1; i >= 0; i--) {
if(_hobby[i].checked) {
_hobbyValue += (_hobby[i].value + "，");
}
}
document.getElementById("texta").value += "爱好：" + _hobbyValue + "\n";
console.log("爱好：" + _hobbyValue + "\n");
}
</script>
</html>
统计form表单信息
最新推荐文章于 2024-02-16 18:32:49 发布
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
