表单提交按钮跳转网页_HTML中如何使用html表单提交的操作

这次给大家讲解一下在HTML中如何使用HTML表单提交，以及使用HTML表单提交有哪些注意事项。下面是一个实际的案例，我们一起来看看吧。

这里我们介绍关于表单元素以及表单提交的知识。

表单元素

form元素的DOM接口继承自，因此它具有与其他HTML元素相同的默认属性，但它还具有几个独特的属性和方法：

属性值

阐明

- 服务器可以处理的字符集。多个字符集以空格分隔。

接受请求的 URL。此值可以被表单元素中的输入或元素的属性覆盖。

表单中所有控件的集合（）

请求的编码类型。该值可以被表单元素中的输入或元素的属性覆盖

表单中的控件数量

要发送的 HTTP 请求类型，通常为“get”或“post”。此值可被表单元素中的输入或元素的属性覆盖。

name 表单的名称

reset() 将所有表单字段重置为默认值

（）提交表格

用于发送请求和接收响应的窗口的名称。此值可以被表单元素中的输入或元素的属性覆盖。

是否自动完成表单元素

输入元素

input 元素是广泛使用的表单元素。根据 type 属性的值，它有以下常见用途：

文本输入

提交输入

单选按钮输入

复选框输入

数字输入框只能输入数字，可以设置最大值和最小值。

范围输入类似，但它显示滑块而不是输入框。

颜色输入将会调出颜色选择器。

输入日期将弹出日期选择器。

邮箱输入显示为文本输入框，并弹出自定义键盘。

电话输入与电子邮件输入类似

URL输入与邮箱输入类似，会弹出自定义键盘。

该元素创建一个多行文本区域。

cols和rows属性值分别表示文本区域的宽度和高度（以字符为单位）。

元素与 元素配合使用可创建下拉菜单。

收音机

如何分组？只需设置不同的名称属性即可

例子：

玩游戏

编写代码

男性

女性，

这是两套无线电

提供描述输入字段预期值的提示。

当输入字段为空时提示会出现，当字段获得焦点时提示会消失。

类型=

定义隐藏输入。隐藏字段对用户不可见。隐藏字段通常存储默认值，其值也可以通过以下方式修改：

比如为了安全起见，把用户不可见的name和value值传输到后台，以便后台做验证，防止页面仿冒。

提交按钮

在表单中添加提交按钮允许用户提交表单。

以下三个按钮点击时都可以触发表单事件：

登录并复制

规范中元素类型的默认值为 ，但是IE678中的默认值为 ，因此出于兼容性原因需要手动给元素添加type=""属性。

事件

初学者可能会以为表单提交是按钮的点击事件触发的，其实不然，在不同的浏览器里，按钮元素的点击事件和表单事件的执行顺序是不一样的，所以为了精确控制表单提交事件，我们会选择在表单事件里进行验证等操作。

form.addEventListener('submit', function (e) {
  if (valid()) {
    ...
  }
  e.preventDefault()
})

登录并复制

当表单元素中没有上述三个按钮时，用户将无法提交表单（回车键也无效）。此时可以使用表单元素独有的 () 方法提交表单。需要注意的是，调用 () 方法并不会触发表单元素的事件。在调用 () 方法之前，需要先进行表单验证等操作。

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

登录并复制

表单提交和用户体验

基于现在流行的ajax+跨域POST（CORS）技术，我们可能并不会直接使用表单元素向服务器提交数据，虽然这样做是可行的，但是大多数情况下存在体验下降的现象。

表单验证

可用于在将 HTML 表单中的输入数据发送到服务器之前对其进行验证。

需要验证的典型表单数据包括：

用户是否填写了表单中必填的字段？

用户输入的邮箱地址是否合法？

用户是否输入了有效日期？

用户是否在数据字段中输入了文本？

必需（或可选）项目

下面的函数用于检查用户是否填写了表单中的必填（或强制）项，如果必填或强制项为空，那么会弹出警告框并且函数返回值为 false，否则函数返回值为 true（表示数据没有问题）：

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

登录并复制

 


Email: 



 

登录并复制

相信看完这些案例你已经掌握了方法，更多精彩内容请关注php中文网其他相关文章！