<!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 发布