html标签及提交表单样式

女爷i 2022-05-15 13:44 453阅读 0赞

前文：

html表单提交项的基本用法，用于个人查询使用

一、标签

![2019040319060218.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY4NzA3NA_size_16_color_FFFFFF_t_70][]

二、html提交表单代码

<html>
    	<head>
    		<title>表单页面</title>
    		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    		
    		<script>
    			function checkData(){
    				var canSub = true;
    				//非空校验
    				canSub = checkNull("username","用户名不能为空！")&&canSub;
    				canSub = checkNull("password","密码不能为空！")&&canSub;
    				canSub = checkNull("password2","确认密码不能为空！")&&canSub;
    				canSub = checkNull("nickname","昵称不能为空！")&&canSub;
    				canSub = checkNull("email","邮箱不能为空！")&&canSub;
    				canSub = checkNull("valistr","验证码不能为空！")&&canSub;
    				//邮箱格式校验
    				//lishuai@tedu.com
    				var reg = /^\w+@\w+(\.\w+)+$/;
    				var email = document.getElementsByName("email")[0].value;
    				var email_msg = document.getElementById("email_msg");
    				var f_email = reg.test(email);
    				if(!f_email){
    					email_msg.innerText = "邮箱格式不正确！";
    					canSub = false;
    				}
    				
    				//密码一致性校验
    				var password = document.getElementsByName("password")[0].value;
    				var password2 = document.getElementsByName("password2")[0].value;
    				var password2_msg = document.getElementById("password2_msg");
    				if(password != "" && password2 != "" &&password != password2){
    					password2_msg.innerText = "两次密码不一致";
    					canSub = false;
    				}
    				
    				//性别非空校验（单选）
    				var gender = document.getElementsByName("gender");
    				var gender_msg = document.getElementById("gender_msg");
    				gender_msg.innerText = "";
    				if(gender[0].checked == gender[1].checked){
    					gender_msg.innerText = "性别不能为空";
    					canSub = false;
    				}
    				//爱好非空校验（复选框）
    				var hasLike = false;
    				var likes = document.getElementsByName("like");
    				for(var i=0;i<likes.length;i++){
    					//如果其中任意一个复选框被选中，则不用提示
    					if(likes[i].checked == true){
    						hasLike = true;
    						break;
    					}
    				}
    				var like_msg = document.getElementById("like_msg");
    				like_msg.innerText = "";
    				if(!hasLike){
    					like_msg.innerText = "爱好不能为空！";
    					canSub = false;
    				}
    				//头像不能为空
    				var img = document.getElementsByName("img")[0].value;
    				var img_msg = document.getElementById("img_msg");
    				img_msg.innerText = "";
    				if(img == ""){
    					img_msg.innerText = "头像不能为空！";
    					canSub = false;
    				}
    				return canSub;
    			}
    		function checkNull(name,msg){
    			var tag = document.getElementsByName(name)[0].value;
    			var tag_msg = document.getElementById(name+"_msg");
    			tag_msg.innerText = "";
    			if(tag == ""){
    				tag_msg.innerText = msg;
    				return false;
    			}
    			return true;
    		}
    		//textarea聚焦事件
    		function descFocus(thisobj){
    			if(thisobj.value == "请输入描述信息~！"){
    				thisobj.value = "";
    			}
    		}
    		//textarea离焦事件
    		function descBlur(thisobj){
    			if(thisobj.value == ""){
    				thisobj.value = "请输入描述信息~！";
    			}
    			
    		}
    		</script>
    		<style type="text/css">
    			span{
    				color:red;
    				font-size:12px;
    			}
    		</style>
    	</head>
    	<body>
    		<form action="http://localhost:8080" method="POST" onsubmit="return checkData()">
    			<table border="1px" align="center" cellpadding="10px" cellspacing="0px" borderColor="red" bgcolor="pink">
    				<caption><font color="red" size="6">注册表单</font></caption>
    				<input type="hidden" name="id" value="9527"/>
    				<tr>
    					<td>用户名:</td>
    					<td><input type="text" name="username" /> <span id="username_msg"></span></td>
    				</tr>
    				<tr>
    					<td>密码:</td>
    					<td><input type="password" name="password"/> <span id="password_msg"></span></td>
    				</tr>
    				<tr>
    					<td>确认密码:</td>
    					<td><input type="password" name="password2"/> <span id="password2_msg"></span></td>
    				</tr>
    				<tr>
    					<td>性别：</td>
    					<td>
    						<input type="radio" name="gender" value="男"/>男
    						<input type="radio" name="gender" value="女"/>女 <span id="gender_msg"></span>
    					</td>
    				</tr>
    				<tr>
    					<td>昵称：</td>
    					<td><input type="text" name="nickname"/> <span id="nickname_msg"></span></td>
    				</tr>
    				<tr>
    					<td>邮箱：</td>
    					<td><input type="text" name="email"/> <span id="email_msg"></span></td>
    				</tr>
    				<tr>
    					<td>爱好：</td>
    					<td>
    						<input type="checkbox" name="like" value="lq"/>篮球
    						<input type="checkbox" name="like" value="zq"/>足球
    						<input type="checkbox" name="like" value="qq"/>铅球
    						<input type="checkbox" name="like" value="blq"/>玻璃球
    						 <span id="like_msg"></span>
    					</td>
    				</tr>
    				<tr>
    					<td>客户类型：</td>
    					<td>
    						<select name="type">
    							<option value="pm">平民</option>
    							<option value="sxdy">少先队员</option>
    							<option value="gqty">共青团员</option>
    							<option value="ybdy">预备党员</option>
    							<option value="zsdy">正式党员</option>
    						</select>
    						 <span id="type_msg"></span>
    					</td>
    				</tr>
    				<tr>
    					<td>头像：</td>
    					<td>
    						<input type="file" name="img"/> <span id="img_msg"></span>
    					</td>
    				</tr>
    				<tr>
    					<td>描述信息：</td>
    					<td>
    						<textarea id="desc" rows="5" cols="45" name="desc" onfocus="descFocus(this)" onblur="descBlur(this)">请输入描述信息~！</textarea> <br/><span id="desc_msg"></span>
    					</td>
    				</tr>
    				<tr>
    					<td>验证码：</td>
    					<td>
    						<input type="text" name="valistr"/>
    						<img src="1.jpg" width="100px" height="20px"/>
    						 <span id="valistr_msg"></span>
    					</td>
    				</tr>
    				<tr>
    					<td colspan="2" align="right">
    						<input type="submit" value="提 交"/>
    						<input type="reset" value="重 置"/>
    					</td>
    				</tr>
    			</table>
    		</form>
    	</body>
    </html>

[2019040319060218.png]: /images/20220503/8f71405df24c4e6b9e0e10c1e9c36cc8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY4NzA3NA_size_16_color_FFFFFF_t_70]: /images/20220503/0fc10f48ad9741cd9be0efa45c403bec.png