html中关于form与表单提交操作的资料集合

这⾥我们介绍⼀下form元素与表单提交⽅⾯的知识。form元素

form元素的DOM接⼝是HTMLFormElement，继承⾃HTMLElement，因⽽它与其他的HTML元素拥有相同的默认属性，不过它⾃⾝还有⼏个独有的属性和⽅法：

属性值accept-charsetactionelementsenctypelengthmethodnamereset()submit()target

服务器能够处理的字符集，多个字符集⽤空格分割

接受请求的URL，该值可以被form元素中的input或button元素的formaction属性覆盖表单中所有控件集合(HTMLCollection)

请求的编码类型，该值可以被form元素中的input或button元素的formenctype属性覆盖表单中控件的数量

要发送的HTTP请求类型，通常是“get”或“post”，该值可以被form元素中的input或button元素的formmethod属性覆盖表单的名称

将所有表单域重置为默认值提交表单

⽤于发送请求和接收响应的窗⼝名称，该值可以被form元素中的input或button元素的formtarget属性覆盖

说明

autocomplete是否⾃动补全表单元素input元素

input元素是应⽤⾮常⼴泛的表单元素，根据type属性值的不同，有以下⼏种常⽤⽤法：

⽂本输⼊ 提交输⼊

单选钮输⼊ 复选框输⼊

数字输⼊ 输⼊框只能输⼊数字，可设置最⼤值，最⼩值。

范围输⼊ 类似number，但它会显⽰⼀个滑动条，⽽不是输⼊框。颜⾊输⼊会弹出⼀个颜⾊选择器。⽇期输⼊ 会弹出⼀个⽇期选择器。

email输⼊ 显⽰为⼀个⽂本输⼊框，并会弹出⼀个定制键盘。tel输⼊ 跟email输⼊类似

url输⼊ 跟email输⼊类似，也会弹出⼀个定制键盘。textarea元素可以创建⼀个多⾏的⽂本区。

其中cols和row的属性值分别表⽰⽂本区宽度和⾼度的字符。select元素和option元素结合使⽤可创建⼀个下拉菜单。

radio

如何 分组? 设置不同的 name属性即可例：

玩游戏写代码男

⼥、这就是两组radioplaceholder

提供可描述输⼊字段预期值的提⽰信息（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元素直接向服务器提交数据。这虽然可⾏，但在⼤多数情况下存在着体验劣化现象。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 表单的代码：

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

快捷键提交

在没有form元素包裹的情况下，即使当前页⾯的焦点在表单元素上，按回车键也不会触发表单提交，对于⽤户⽽⾔，需要从键盘控制切换到⿏标/⼿势控制，破坏了原有的流畅度。解决⽅法最简单的就是在外层⽤⼀个form元素包裹，并且确定form元素中起码有⼀个提交按钮。此时当表单中的输⼊域得到焦点时，⽤户按回车键便会触发提交。浏览器记住账号密码

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

总结

我们在开发⼀个表单应⽤的时候，不应该尝试去除form元素直接进⾏提交，在form元素中应该包含⼀个提交按钮，如果是button元素，应该⼿动加上type=\"submit\"属性。提交事件的处理在form元素的submit事件中，⽽⾮提交按钮的click事件。参考：