本教程旨在解决使用formsubmit.co服务时，表单因电子邮件格式无效而意外重定向至其他页面的问题。我们将通过优化前端html表单元素，利用html5的`type="email"`属性，实现浏览器原生验证，从而提供即时用户反馈，避免不必要的页面跳转，显著提升用户体验。
理解问题：FormSubmit.co与重定向行为
在使用FormSubmit.co这类第三方表单处理服务时，开发者通常会配置一个提交成功后的跳转页面（通过_next字段）。然而，当用户在表单中输入了格式不正确的电子邮件地址时，FormSubmit.co在进行服务器端验证后，可能会根据其内部逻辑或默认设置，将用户重定向到一个通用页面（例如，网站主页），而不是返回到表单页面并显示错误信息。这不仅打断了用户流程，也使得用户难以理解错误原因并进行修正，严重影响用户体验。
原始代码示例中，电子邮件输入字段使用了<textarea>标签，这本身就不符合电子邮件地址的输入规范，且无法利用HTML5提供的原生验证功能。
原始表单代码片段（电子邮件部分）：
<div style="text-align: left;" class="formgroup" id="email-form"><label for="email">Your E-mail*</label></div> <div style="text-align: left;"><textarea id="email" cols="80" name="email" required="" rows="1.5" placeholder="[email protected]"></textarea></div>
解决方案：利用HTML5 type="email" 进行前端验证
解决上述问题的最直接且高效的方法是利用HTML5的input标签的type="email"属性进行前端验证。当浏览器检测到type="email"的输入字段时，它会自动对用户输入的内容进行基本的电子邮件格式校验。如果格式不正确，浏览器会在提交表单前显示一个内置的错误提示，阻止表单提交，并保持用户停留在当前页面，从而避免了FormSubmit.co的意外重定向。
这种方法具有以下优点：
- 即时反馈： 用户在提交前就能看到错误，无需等待服务器响应。
- 提升用户体验： 避免了不必要的页面跳转，用户可以在同一页面修改错误。
- 简单易实现： 仅需修改HTML代码，无需编写JavaScript。
- 浏览器原生支持： 兼容性良好，且通常具有良好的可访问性。
实施步骤与代码示例
要实现这一优化，只需将电子邮件输入字段的<textarea>标签替换为<input type="email">。
修改后的表单代码片段（电子邮件部分）：
<div style="text-align: left;" class="formgroup" id="email-form"><label for="email">Your E-mail*</label></div> <div style="text-align: left;"><input type="email" id="email" name="email" required="" placeholder="[email protected]"></div>
完整修改后的表单代码：
<header>
<h3 id="contact-us" style="text-align: left;">Contact Us</h3>
</header>
<div style="text-align: center;" id="multipart/form-data">
<form action="https://formsubmit.co/<a class="__cf_email__" data-cfemail="357d5a585059504646635041467543541b525a43" href="/cdn-cgi/l/email-protection">[email protected]</a>" method="POST">
<input name="_captcha" type="hidden" value="false" />
<input name="_subject" type="hidden" value="New landlord submission!" />
<input name="_next" type="hidden" value="https://www.va.gov/homeless/landlord_thank_you_page.asp" />
<div style="text-align: left;" class="formgroup" id="name-form"><label for="name">Your Name*</label></div>
<div style="text-align: left;"><textarea id="name" cols="80" name="name" required="" rows="1.5"></textarea></div>
<div style="text-align: left;" class="formgroup" id="email-form"><label for="email">Your E-mail*</label></div>
<div style="text-align: left;"><input type="email" id="email" name="email" required="" placeholder="[email protected]"></div>
<div style="text-align: left;" class="formgroup" id="number-form"><label for="phone">Phone Number</label></div>
<div style="text-align: left;"><textarea id="phone" cols="80" name="phone" rows="1.5"></textarea></div>
<div style="text-align: left;" class="formgroup" id="website-form"><label for="website">Website</label></div>
<div style="text-align: left;"><textarea id="website" cols="80" name="website" rows="1.5"></textarea></div>
<div style="text-align: left;" class="formgroup" id="location-form"><label for="location">Location (City and State)*</label></div>
<div style="text-align: left;"><textarea id="location" cols="80" name="location" required="" rows="1.5"></textarea></div>
<div style="text-align: left;" class="formgroup" id="description-form"><label for="description">Description of Housing Available</label></div>
<div style="text-align: left;"><textarea id="description" cols="80" name="description" rows="5"></textarea></div>
<div style="text-align: left;" class="formgroup" id="requested-information-form"><label for="requested-information-form">Information Requested</label></div>
<div style="text-align: left;"><textarea id="requested-information-form" cols="80" name="requested-information-form" rows="5"></textarea></div>
<div style="text-align: left;" class="container"><a><button class="btn btn-primary btn-lg">Submit</button></a></div>
</form>
</div>注意： 在原始代码中，电话号码的<textarea>标签末尾错误地使用了</input>。在上述完整修改后的代码中，已将其修正为正确的</textarea>。
注意事项与最佳实践
- 前端验证与后端验证： type="email" 提供了方便的前端验证，但它不能替代后端验证。FormSubmit.co作为后端服务，会进行自己的服务器端验证。前端验证是为了提供更好的用户体验，减少无效请求；后端验证则是确保数据完整性和安全性不可或缺的环节。
- 自定义错误消息： 不同的浏览器可能会显示不同的默认错误消息样式和内容。如果需要更统一或定制化的错误提示，可以通过CSS伪类（如:invalid, :valid）来样式化输入框，或者结合JavaScript（例如使用setCustomValidity()方法）来创建自定义的错误消息。
- 兼容性： 现代浏览器对type="email"有良好的支持。对于极少数旧版浏览器，type="email"会退化为type="text"，此时将失去原生验证功能，但表单提交仍能正常进行。
- required属性： 结合required属性可以确保该字段必须填写。当字段为空时，浏览器也会阻止提交并提示用户。
- placeholder属性： placeholder属性可以为用户提供输入示例，进一步指导用户正确填写。
总结
通过将电子邮件输入字段从<textarea>更正为<input type="email">，并确保required属性的正确使用，我们可以有效地利用HTML5的原生能力，在客户端层面实现即时、友好的电子邮件格式验证。这不仅解决了FormSubmit.co表单在验证失败时意外重定向的问题，极大地提升了用户体验，也简化了前端验证的实现复杂度，是构建健壮且用户友好型表单的推荐实践。
