工作中的技术总结_ form表单使用注意事项之form触发后台提交事件 _20220127

工作中的技术总结_ form表单使用注意事项之form触发后台提交事件 _20220127

如无必要不要使用 form标签 来作为组件的父节点

事件过程：

项目使用的是 spring + jsp 的框架，根据业务需要添加了一个模块。由于项目中有既有的类似功能，选择进行迁移改写。但是 这一功能的原来是需要进行 form 表单提交的，而新加的模块只需要控件展示，不需要对 form表单进行提交，而是另外通过事件来获取并提交其中的 input 控件 value。

由于在迁移过程中 没有注意到该细节，导致 只要 input获得焦点 并 点击 Enter键 就会触发表单事件，这时如果是 input中是 空值 就会报错 已为此响应调用 getOutputStream () ……Constructs a InvocationTargetException with a target exception. 解决了这个问题，我没有第一时间 再现 bug 详细报错情况就不展示了。

通过将 form标签 改成 div标签 就解决了以上问题，一般情况 这个 错误是 比较难发现的，但是 项目中要求 的是 改 input 控件的值 能够 通过键盘输入 也能够通过 下拉列表选择，使用下拉列表时不会报系统错误，而使用 键盘输入时，只要点击 Enter键 就会导致系统错误，这才暴露了这个问题。

一般，我们的使用习惯都是 输入之后 再点击 Enter键 进行确认。所以不容许以上错误现象发生

总之，如非必要，不使用 form标签 作为 展示信息的控件的 父节点，这一点很重要。

<!--引发错误的代码 只要将 form 替换为 div 就能解决-->
<form class="form-inline">
			<div class="row" style="margin-bottom:5px;">
				<div class="col-sm-8 col-xs-6" style="margin-top: 20px; margin-left: 20px;">
					Start Date &nbsp;
					<div class="input-group date form_date" data-date="" data-date-format="ddMyy" data-link-field="startDateShow"
						data-link-format="yyyy-mm-dd" id=startDateDiv>
					<input class="form-control input-sm" id="startDate" name="startDate" size="8" type="text" value="" spellcheck="false" maxlength="9">
					<span class="input-group-addon">
						<span class="glyphicon glyphicon-calendar"></span>
					</span>
					</div>
				</div>
	 		</div>
</form>