今天分享下”前端页面与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给大家介绍的所有内容,希望对大家有所帮助，如果大家有任何疑问请在脚本之家留言，如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
1181
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
