前端页面与form表单提交：代码分享
今天分享下”前端页面与form表单提交：代码分享“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 这里我们介绍一下form元素与表单提交方面的知识。
form元素
form元素的DOM接口是HTMLFormElement，继承自HTMLElement，因而它与其他的HTML元素拥有相同的默认属性，不过它自身还有几个独有的属性和方法：
属性值
说明
accept-charset
服务器能够处理的字符集，多个字符集用空格分割
action
接受请求的URL，该值可以被form元素中的input或button元素的formaction属性覆盖
elements
表单中所有控件集合(HTMLCollection)
enctype
请求的编码类型，该值可以被form元素中的input或button元素的formenctype属性覆盖
length
表单中控件的数量
method
要发送的 HTTP请求类型，通常是“get”或“post”，该值可以被form元素中的input或button元素的formmethod属性覆盖
name
表单的名称
reset()
将所有表单域重置为默认值
submit()
提交表单
target
用于发送请求和接收响应的窗口名称，该值可以被form元素中的input或button元素的formtarget属性覆盖
autocomplete
是否自动补全表单元素
input元素
input元素是应用非常广泛的表单元素，根据type属性值的不同，有以下几种常用用法：
文本输入
提交输入
单选钮输入
复选框输入
数字输入 输入框只能输入数字，可设置最大值，最小值。
范围输入 类似number，但它会显示一个滑动条，而不是输入框。
颜色输入会弹出一个颜色选择器。
日期输入 会弹出一个日期选择器。
email输入 显示为一个文本输入框，并会弹出一个定制键盘。
tel输入 跟email输入类似
url输入 跟email输入类似，也会弹出一个定制键盘。
textarea元素可以创建一个多行的文本区。
其中cols和row的属性值分别表示文本区宽度和高度的字符。
select元素和option元素结合使用可创建一个下拉菜单。
radio
如何 分组? 设置不同的 name属性即可
例：
玩游戏
写代码
男
女、
这就是两组radio
placeholder
提供可描述输入字段预期值的提示信息（hint）。
该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
type=hidden
定义隐藏的input。隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值，它们的值也可以由 JavaScript 进行修改。
比如用于安全方面，给后台传输用户不可见的name 和value值，让后台做校验，防伪造页面。
提交按钮
在form中加入一个提交按钮，便可使用户得以提交表单。
下列三种按钮皆可在点击时触发表单的submit事件：
1
2
3
<input type="submit" />
<button type="submit"></button>
<input type="image" />
规范中button元素的type默认值是submit，但是在IE678下默认值是button，所以从兼容性考虑有必要为button元素手动加上type="submit"属性。
submit事件
初心者可能会认为表单提交是提交按钮的click事件触发，其实不然，按钮元素的click事件与表单的submit事件在不同的浏览器中执行顺序不一，所以为了能准确控制表单提交事件，我们会选择在表单的submit事件中执行验证等操作。
form.addEventListener(’submit’, function (e) {
if (valid()) {
…
}
e.preventDefault()
})
当form元素中没有上述的三个按钮中任何一个的时候，用户将无法提交表单（回车键也无效），此时可以利用form元素特有的submit()方法执行提交表单，需要注意的是调用submit()方法并不会触发form元素的submit事件，表单的验证等操作应该在调用submit()方法之前。
1
2
3
if (valid()) {
form.submit()
}
表单提交与用户体验
基于现在流行的ajax+跨域POST（CORS）技术，我们很可能不使用form元素直接向服务器提交数据。这虽然可行，但在大多数情况下存在着体验劣化现象。
JavaScript 表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
被 JavaScript 验证的这些典型的表单数据有：
用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域 (numeric field) 中输入了文本？
必填（或必选）项目
下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：
function validate_required(field,alerttxt)
{
with (field)
{
if (valuenull||value"")
{alert(alerttxt);return false}
else {return true}
}
}
下面是连同 HTML 表单的代码：
<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (valuenull||value" http://www.qlyl1688.com/products/ycxsyj2623.html ")
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,“Email must be filled out!”)==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
E-mail 验证
下面的函数检查输入的数据是否符合电子邮件地址的基本语法。
意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
下面是连同 HTML 表单的完整代码：
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,“Not a valid e-mail address!”)==false)
{email.focus();return false}
}
}
</head>
<body>
<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
键盘快捷键递交
在沒有form元素包囊的情形下，即便 当今网页的热点在表格元素上，按回车键也不会开启提交表单，针对用户来讲，必须从电脑键盘操纵转换到电脑鼠标/手势操作，毁坏了固有的流畅度。解决方案非常简单的也是在表层用一个form元素包囊，而且明确form元素中至少有一个提交按钮。这时当表格中的键入域获得聚焦点时，用户按回车键便会开启递交。
浏览器记牢账户密码
在表单提交时，高級浏览器包含移动端浏览器，会了解用户是不是必须记牢用户账户密码，针对一般用户来讲，这是一个十分有用的特点，特别是在移动端，能够为用户节约许多時间。在沒有form元素的情形下，浏览器不容易弹出来该了解对话框。
汇总
我们在开发设计一个表格运用的情况下，不应该试着除去form元素立即开展递交，在form元素中需要包括一个提交按钮，如果是button元素，应当手动式再加上type="submit"属性。递交事件的解决在form元素的submit事件中，并非提交按钮的click事件。以上是云南仟龙Mark给大家介绍的所有内容,希望对大家有所帮助，如果大家有任何疑问请在脚本之家留言，如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
前端页面与form表单提交：代码分享相关推荐
- vue 添加完数据后刷新页面_vue form 表单提交后刷新页面的方法
最近做的项目中,有增删改表格功能,在操作后需要实时更新页面数据.下面可以这样解决. 1.在methods中 定义好一个初始化渲染实例. 例如 lnitializationData(){//初始化页面数 ...
- 从页面获取form表单提交的数据
1 使用HttpServletRequest,方便灵活 页面代码,使用action提交一个表单,里边有球的id,球的主人,球的颜色,所在省份,区域 <form action="ball ...
- 前端基础 至 form表单提交方式
原文:https://www.jianshu.com/p/8c947e7fee00 虽然前后端不分离项目越来越少了(vue等太香)但是有时候后端程序员 想自己搞不分离web页面的时候还是会用原生htm ...
- 表单ajax提交插件,jQuery Form 表单提交插件-----ajaxSubmit() 的应用
Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.ajaxSubmit() 介绍 立即通过AJA ...
- form表单提交数据的同时上传文件代码示例
form表单提交数据的同时在表单中上传文件代码示例 一.定义页面 注意:在form表单中加入属性 enctype="multipart/form-data" 表示此表单支持文件上 ...
- action无法传参数给html页面,HTML 解决form表单提交时，action url中参数无效问题
这篇文章主要为大家详细介绍了HTML 解决form表单提交时,action url中参数无效问题,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! ...
- html 表单提交跳转新的页面,jquery模拟form表单提交并新打开页面
/** * form表单提交本页面打开 * @param url * @param params */ functionpostCurrent(url,params){ varform = $(&qu ...
- 前端form表单提交的方式
1.无刷新页面提交表单 表单可实现无刷新页面提交,无需页面跳转,如下,通过一个隐藏的iframe实现,form表单的target设置为iframe的name名称, form提交目标位当前页面ifram ...
- python中前后端通信方法Ajax和ORM映射（form表单提交）
后端从数据库获取数据给到前端: 第一种方式: admin.py文件代码: @admin.route('/showList') def show():# 获取数据库所有文章数据,得到一个个对象res=A ...
最新文章
- SQLServer 2008 ：error 40 出现连接错误
- 导出excel--多个sheet
- python 多进程multiprocessing进程池pool tensorflow-yolov3 报错TypeError: 'ApplyResult' object is not iterable
- pycharm解决pip._vendor.urllib3.exceptions.ReadTimeoutError: HTTPSConnectionPool
- mysql+多列外键_MySQL中的多列外键？
- Session、Dialog和Transaction的区别
- spark基础之RDD和DataFrame的转换方式
- 【重难点】【Redis 03】缓存雪崩、缓存穿透、缓存击穿、Redis 的内存过期策略、并发读写和双写
- 史上最全的thymleaf标签
- win7下的的IVF2011+VS2010以及OpenMPI的安装与配置
- 手把手教你 1：win7下安装SQL Server2005开发版步骤
- Angularjs1 [$rootScope:inprog] inprogress error
- 3、T5L迪文屏资源介绍
- C语言排序算法之“选择排序法”
- git branch -vv
- python 微信支付sdk_weixin-python
- Unable to process Jar entry [org/springframework/boot/autoconfigure/quartz/QuartzAutoConfiguration
- 220817笔试（速腾聚创）
- webofscience入口注册_Web of Science科研数据库平台
- VMware Workstation 虚拟机快照备份管理