版权声明： https://blog.csdn.net/qq_41573860/article/details/82733455
代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="ResumeBB">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>表单</title>
<style>
body{
font-size:16px;
font-family:"微软雅黑";
background:url("images/8.jpg");
background-repeat:no-repeat;
background-size:100% 1000px;
}
.kind{
color:grey;
}
h1{
text-align:center;
font-weight:bold;
font-style:italic;
color:white;
}
td{
font:normal 12px Verdana;
color:white;
border:1px solid black;
background:#fffff;
}
input,textarea,select{
color:black;
}
.checkCode{
width:30px;
height:30px;
}
.mytextarea{
color:red;
background:black;
font-weight:bold;
}
</style>
</head>
<!-- <img src="images/3.png" align="left" width="220" height="80" border="0" alt=""> -->
<h1> 新生信息注册</h1>
<br><br>
<form name="myform" action="mailto:[email protected] " method="post" onReset="return confirm('确定清除内容？');" onSubmit="alert('表单信息将被提交至[email protected]')">
<table width="800" border="0" align="center">
<tr>
<td width="80"><b>用户名:</b></td>
<td><input type="text" name="name" style="height:30px;width:100px" class="name2"/>
</td>
</td>
<td class="kind">由字母/数字组成</td>
</tr>
<tr>
<td ><b>密码：</b></td>
<td>
<input type="password" name="password1" style="height:30px;" size="20"class="password2"/></td>
<td class="kind">9~16个任意字符</td>
</tr>
<tr>
<td><b>确定密码：</b></td>
<td colspan="2">
<input type="password" name="password11" style="height:30px;" size="20"class="password3"/>
</td>
</tr>
<tr>
<td><b>性别： </b></td>
<td colspan="2">
<input type="radio" name="gender" value="女" checked/>女
<input type="radio" name="gender" value="男"/>男<br><br>
</td>
</tr>
<tr>
<td><b>年级: </b></td>
<td colspan="4">
<input type="radio" name="grade" value="大一" checked/>大一
<input type="radio" name="grade" value="大二"/>大二
<input type="radio" name="grade" value="大三"/>大三
<input type="radio" name="grade" value="大四"/>大四<br><br>
</td>
</tr>
<tr>
<td><b>政治面貌:</b></td>
<td colspan="3">
<select size="1" style="height:30px;" name="shenfen">
<option value="团员">团员</option>
<option value="党员">党员</option>
<option value="群众">群众</option>
</select>
</tr>
<tr>
<td><b>掌握的语言:</b></td>
<td colspan="1">
<select size="4" multiple="multiple" name="language">
<option value="C语言">C语言</option>
<option value="C++">C++</option>
<option value="JAVA">JAVA</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="Javascript">Javascript</option>
</select>
<td class="kind">按住ctrl+鼠标左键可多选</td>
</tr>
<tr>
<td><br><b>爱好:</b></td>
<td colspan="2">
<input type="checkbox" name="interest" value="足球"/>足球
<input type="checkbox" name="interest" value="篮球"/>篮球
<input type="checkbox" name="interest" value="羽毛球"/>羽毛球
<input type="checkbox" name="interest" value="跑步"/>跑步
<input type="checkbox" name="interest" value="游泳"/>游泳
<input type="checkbox" name="interest" value="乒乓"/>乒乓
<input type="checkbox" name="interest" value="听音乐"/>听音乐
<input type="checkbox" name="interest" value="玩游戏"/>玩游戏
<input type="checkbox" name="interest" value="读书"/>读书
</td>
</tr>
<tr>
<td><b>籍贯：</b></td>
<td colspan="2"><select size="1" style="height:30px;" name="province">
<option>陕西省</option>
<option>四川省</option>
<option>湖南省</option>
<option>河北省</option>
<option>广东省</option>
<option>河南省</option>
<option>湖北省</option>
<option>内蒙古</option>
<option>黑龙江省</option>
<option>广西省</option>
</select>
<select size="1" style="height:30px;"name="city">
<option>西安市</option>
<option>咸阳市</option>
<option>铜川市</option>
<option>榆林市</option>
<option>汉中市</option>
<option>渭南市</option>
<option>宝鸡市</option>
<option>延安市</option>
</select>
<br><br>
</td>
</tr>
<tr>
<td><b>详细住址:</b></td>
<td><input type="text" name="address" style="height:30px;" class="Adress2"/></td>
<td class="kind">精确到户号</td>
</tr>
<tr>
<td><b>电子邮件：</b></td>
<td><input type="text" name="email" style="height:30px;" class="mail2"/></td>
<td class="kind"> 支持种类：网易/QQ/OUTLOOK/新浪/谷歌/雅虎</td>
</tr>
<td>
<tr>
</tr>
<tr>
<td width="80" align="left"><b>照片：</b></td>
<td> <input type="file" id="f1" name="picture" class="picture2"/>
</td>
<td class="kind">红底免冠证件照</td>
</tr>
<tr>
<td colspan="3">
<form method="post" action=""><br><B>注册须知:</B> </br>
<textarea name="mytextarea" cols="100" rows="5" wrap="hard" color:red; overflow:auto> </textarea> <!-- cols列数 rows行数 -->
</td>
</tr>
<tr>
<div class="checkCode">
<td colspan="2">
<input disabled type="button" id="checkCode" style="height:30px;" class="code"/>
<input onclick="createCode()" type="button" style="height:30px;" value="换一个"/>
<td colspan="1">
<input type="text" style="height:30px;" id="input1"/>
<input id="Button1" onclick="checkform();validate()" style="height:30px;" type="button" value="检验"/>
</td>
</td>
</div>
</tr>
<tr>
<td colspan="2" >
<input type="submit" value="确认提交"/>
<td colspan="1" >
<input type="reset" value="重新填写">
</td>
</td>
</tr>
</table>
</form>
<body onload="createCode();typer()">
<p> </p>
<p> </p>
</body>
<script>
function checkform(){
if(myform.name.value==""){
alert("请输入姓名！");
myform.name.focus();
return;
}
else if(myform.password1.value==""){
alert("请输入密码！");
myform.password1.focus();
return;
}
else if(myform.password11.value==""){
alert("请再次输入密码！");
myform.password11.focus();
return;
}
else if(myform.address.value==""){
alert("请输入地址！");
myform.adress.focus();
return;
}
else if(myform.email.value==""){
alert("请输入邮箱！");
myform.email.focus();
return;
}
else{
alert("所有信息均已填写");
}
}
var code ,
codeLength = Math.floor(Math.random()*6+4),
checkCode = document.getElementById("checkCode"),
inputCodeEle = document.getElementById("input1"),
selectChar = [1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','J','K','L','M',
'N','P','Q','R','S','T','U','V','W','X','Y','Z'];
function createCode(){
code = "";
checkCode.value = "";
for(var i=0;i<codeLength;i++) {
var charIndex = Math.floor(Math.random()*33);
code +=selectChar[charIndex];
}
if(code.length != codeLength)
createCode();
checkCode.value = code;
}
function validate(){
//toUpperCase 如果是小写的,转化为大写的
var inputCode = inputCodeEle.value.toUpperCase();
if(inputCode.length <=0){
alert("请输入验证码！");
return false;
}
else if(inputCode != code ){
alert("验证码输入错误！");
createCode();
return false;
}
else{
alert("OK");
return true;
}
}
var textlength=0;
var mytext=new Array("西安理工大学（Xi'an University of Technology）简称“西安理工”，坐落于世界历史名城古都西安，建于1949年5月1日，其前身是北京机械学院和陕西工业大学于1972年合并组建的陕西机械学院，1994年1月经教育部批准更名为西安理工大学。学校是国家“中西部高校基础能力建设工程”重点建设大学，教育部首批“卓越工程师教育培养计划”高校、新丝绸之路大学联盟、陕西省省属高水平大学、24所中国研究生院院长联席会扩大高校之一。");
var index=0;
var position=0;
var le=mytext[0].length;
function typer(){
document.myform.mytextarea.value=mytext[index].substring(0,position)+"_";
if(position++==le){
position=0;
index++;
if(index==2)
index=0;
le=mytext[index].length;
setTimeout("typer()",2000);
}
else{
setTimeout("typer()",150);
}
}
</script>
</html>
验证码部分是通过先建立一个数组用于存储生成验证码的数字和字母，然后通过随机数的方法随机定义验证码的长度和每一次从中抽取的一个元素，然后继续随机抽取直到组合成一个和随机出来的长度相符的位数，用Button中的value来显示，点击一次触发一次加载事件。
文本框自动输出效果是通过setTimeout()方法，延时打印给定文本框中的内容。