HTML中如何使用html表单提交的操作


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次给大家带来HTML中如何使用html表单提交的操作,使用html表单提交的注意事项有哪些,下面就是实战案例,一起来看一下。

这里我们介绍一下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属性值的不同,有以下几种常用用法:

文本输入 <input type="text" name="">
提交输入 <input type="submit">
单选钮输入 <input type="radio" name="必须有相同的名字" value="填的值最好对应">
复选框输入 <input type="checkbox" name="相同的名字" value="不同的对应值">
数字输入 <input type="number" min="" max=""> 输入框只能输入数字,可设置最大值,最小值。
范围输入 <input type="range" min="" max="">类似number,但它会显示一个滑动条,而不是输入框。
颜色输入<input type="color">会弹出一个颜色选择器。
日期输入<input type="date"> 会弹出一个日期选择器。
email输入 <input type="email">显示为一个文本输入框,并会弹出一个定制键盘。
tel输入<input type="tel"> 跟email输入类似
url输入 <input type="url"> 跟email输入类似,也会弹出一个定制键盘。
textarea元素可以创建一个多行的文本区。
<textarea name="" id="" cols="30" rows="10"></textarea>
其中cols和row的属性值分别表示文本区宽度和高度的字符。
select元素和option元素结合使用可创建一个下拉菜单。
<select name="" id=""> <option value=""></option> <option value=""></option> <option value=""></option> </select>

radio

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

例:

<input type="radio" name="favourite" value="玩游戏">玩游戏
<input type="radio" name="favourite" value="写代码">写代码

<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="woman">女、
这就是两组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事件中执行验证等操作。

1

2

3

4

5

6

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) 中输入了文本?
必填(或必选)项目

阅读剩余部分

相关阅读 >>

Html body标签怎么用

Html textarea标签怎么用

Html5的表单中关于所有type类型的详细介绍

Html文件怎么弄注释

Html中head标签是什么意思?一篇文章教你正确地使用head标签

Html如何2d和3d转换

Html表单中name属性作用是什么?name和id的差别又是什么?

如何解决Html打开乱码问题

Html怎么给文字加粗

Html如何让input隐藏

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...