html中form与表单提交操作的方法总结

本文主要介绍了html中form元素与表单提交方面的知识,需要的朋友可以参考一下，希望能帮助到大家。

form元素

form元素的DOM接口是HTMLFormElement，继承自HTMLElement，因而它与其他的HTML元素拥有相同的默认属性，不过它自身还有几个独有的属性和方法：

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事件：

规范中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()方法之前。

if (valid()) {
  form.submit()
}

表单提交与用户体验

基于现在流行的ajax+跨域POST（CORS）技术，我们很可能不使用form元素直接向服务器提交数据。这虽然可行，但在大多数情况下存在着体验劣化现象。

WPS AI

金山办公发布的AI办公应用，提供智能文档写作、阅读理解和问答、智能人机交互的能力。

下载

JavaScript 表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

被 JavaScript 验证的这些典型的表单数据有：

用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域 (numeric field) 中输入了文本？
必填（或必选）项目

下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：

function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
  {alert(alerttxt);return false}
else {return true}
}
}

下面是连同 HTML 表单的代码：

Email: 
 

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 表单的完整代码：

Email: 
 

快捷键提交

在没有form元素包裹的情况下，即使当前页面的焦点在表单元素上，按回车键也不会触发表单提交，对于用户而言，需要从键盘控制切换到鼠标/手势控制，破坏了原有的流畅度。解决方法最简单的就是在外层用一个form元素包裹，并且确定form元素中起码有一个提交按钮。此时当表单中的输入域得到焦点时，用户按回车键便会触发提交。

浏览器记住账号密码

在提交表单时，高级浏览器包括移动端浏览器，会询问用户是否需要记住用户账号密码，对于一般用户而言，这是一个十分有用的特性，特别是在移动端，可以为用户节省很多时间。在没有form元素的情况下，浏览器不会弹出该询问窗口。

我们在开发一个表单应用的时候，不应该尝试去除form元素直接进行提交，在form元素中应该包含一个提交按钮，如果是button元素，应该手动加上type="submit"属性。提交事件的处理在form元素的submit事件中，而非提交按钮的click事件。

相关推荐：

html中Form表单提交时页面不跳转的方法详解

序列化form表单教程详解

有关jquery中form表单序列化的一些问题指导