HTML中加入form后样式出现混乱

最新推荐文章于 2022-03-10 11:36:14 发布

泰山码

最新推荐文章于 2022-03-10 11:36:14 发布

阅读量1.5k

点赞数 1

分类专栏： jsp

本文链接：https://blog.csdn.net/weixin_43981813/article/details/104228808

版权

jsp 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

问题：HTML写好之后，进行编写form提交时，好好的样式出现混乱现象，如图
在这里插入图片描述
解决：把放到提交参数的前一项，而位置不变。
正确代码：

<body>
	
		<div id="add_main_div" class="add_main_div">
			<div id="head_div" class="head_div">
				<p class="head_p">添加 一项优秀教师奖</p>
			</div>
			<div id="down_div" class="down_div">
				<div id="left_div" class="left_div">
				<form id="addYxjsj_form" class="addYxjsj_form" name="addYxjsj_form" method="post"  action="${pageContext.request.contextPath}/teacher/addOneYxjsj">
					<div class="left_head_div">
					
						<p class="left_p1" ><span class="dowm_left_p_span1">授奖部门</span> &nbsp;&nbsp; <input type="text" class="left_input1" placeholder="请输入授奖部门" name="sjbm" id="sjbm"></p>
						<p class="left_p2" ><span class="dowm_left_p_span2">授奖时间</span> &nbsp;&nbsp; <input type="date" class="left_input2" placeholder="请输入选择授奖时间" name="sjsj" id="sjsj"></p>
						<!-- <p class="left_p3" ><span class="dowm_left_p_span3">级别 </span>&nbsp;&nbsp; <input type="text" class="left_input3" placeholder="请选择级别" name="sjbm"></p> -->
						<p class="left_p3" ><span class="dowm_left_p_span3">级别 </span>&nbsp;&nbsp; 
							<select class="left_input3" placeholder="请输入授奖部门" name="jb" id="jb">
								<option value="">请选择</option>
								<option value="一级">一级</option>
								<option value="二级">二级</option>
								<option value="三级">三级</option>
								<option value="四级">四级</option>
							</select>
						</p>
					</div>
					<div class="left_down_div">
						<p>注意：请按要求填写</p>
					</div>
					
				</div>
				<div id="right_div" class="right_div">
					<div class="right_top_div">
						<p class="right_p1" ><span class="dowm_left_p_span2">请选择图片</span> &nbsp;&nbsp; <input type="file" id="imgInp" onchange="previewFile(event)" class="left_input2" placeholder="请输入选择授奖时间" name="sjbm"></p>
					</div>
					<div class="right_down_div">
						<div class="right_down_image_div"> 
							<image id="blah" class="right_image"/>
						</div>
					</div>
				</div>
				<div id="down_down_div" class="down_down_div">
					<div class="down_down_tianjia_div">
						<input type="button" class="add_yxjsj_button" onclick="addYxjsj()" value="添加">
					</div>
				</div>
			</div>
		</div>
	</form>

	
<script type="text/javascript">
	/* 回显图片 */
	function previewFile(e) {
		var preview = document.querySelector('img');
		var file = e.target.files[0];
		var reader = new FileReader();
		reader.onload = function() {
			preview.src = reader.result;
		}
		if (file) {
			reader.readAsDataURL(file);
		} else {
			preview.src = "";
		}
	}
	
	//提交判断
	function addYxjsj(){
		var sjbm=document.getElementById("sjbm");
		var sjsj=document.getElementById("sjsj");
		var jb=document.getElementById("jb");
		if(sjbm.value==""){
			alert("请输入授奖部门"); 
			sjbm.focus();
			return false;
		}
		if(sjsj.value==""){
			alert("请输入授奖时间"); 
			sjsj.focus();
			return false;
		}
		if(jb.value==""){
			alert("请选择级别"); 
			jb.focus();
			return false;
		}
		document.getElementById("addYxjsj_form").submit();
	}
	
</script>
</body>

修改后图
在这里插入图片描述

泰山码

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML中加入form后样式出现混乱

问题：HTML写好之后，进行编写form提交时，好好的样式出现混乱现象，如图解决：把放到提交参数的前一项，而位置不变。正确代码：<body> <div id="add_main_div" class="add_main_div"> <div id="head_div" class="head_div"> <p class="h...
复制链接

扫一扫

专栏目录