提交按钮 ‹input type='submit'›

isixe 2020-06-06 14:15:15
Categories: Tags:

 

属性

说明

value

包含一个展示在按钮标签上的文本,否则按钮没有 value 值

formaction

一个字符串,指示要将数据提交到的 URL。 这优先于拥有 <input> 的 <form> 元素上的 action 属性。

formenctype

一个字符串,标识在将表单数据提交到服务器时要使用的编码方法

如果指定,则 formenctype 属性的值将覆盖拥有表单的 action属性

有三个允许的值:

参数

描述

application/x-www-form-urlencoded

这是默认值,它使用 encodeURI() 之类的算法对文本进行 URL 编码后,以字符串形式发送表单数据。

multipart/form-data

使用 FormData API 来管理数据,从而允许将文件提交到服务器。 如果您的表单包含 type file (<input type="file">) 的任何 <input> 元素,则必须使用此编码类型。

text/plain

纯文本; 通常仅对调试有用,因此您可以轻松查看要提交的数据。

 

formmethod

一个字符串,指示提交表单数据时要使用的 HTTP 方法; 此值将覆盖拥有表单上给出的任何 method 属性。 允许的值为:

参数

描述

get

通过从 formaction 或 action 通过从 ("?") 字符,然后附加表单数据,按照如下所述进行编码来构造 URL 通过 formenctype 或表单的 enctype 属性。 然后,使用 HTTP get请求将该 URL 发送到服务器。 此方法适用于仅包含 ASCII 字符且没有副作用的简单形式。 这是默认值。

post

表单的数据包含在请求的正文中,该请求的正文使用 HTTP post 发送到由 formaction 或 action 属性指定的 URL 请求。 此方法支持复杂的数据和文件附件。

dialog

此方法用于指示按钮仅关闭与输入关联的对话框,而根本不传输表单数据。

 

formnovalidate

布尔属性,如果存在,则指定在提交给服务器之前不应对表单进行验证。 这将覆盖元素拥有表单上的 novalidate 属性的值。

formtarget

一个字符串,它指定一个名称或关键字,该名称或关键字指示提交表单后在何处显示收到的响应。 该字符串必须是浏览上下文的名称 (即选项卡,窗口或 <iframe>。 此处指定的值将覆盖 <form> 上拥有此输入的 target 属性

参数

描述

_self

将响应加载到与包含表单的浏览上下文相同的浏览上下文中。 这将用接收到的数据替换当前文档。 如果未指定,则使用默认值。

_blank

将响应加载到新的未命名浏览上下文中。 这通常是一个与当前文档相同的窗口中的新选项卡,但是根据 user agent 的配置可能会有所不同。

_parent

将响应加载到当前浏览器的父浏览上下文中。 如果没有父上下文,则其行为与 _self 相同。

_top

将响应加载到顶级浏览上下文中; 这是浏览上下文,它是当前上下文的最高级祖先。 如果当前上下文是最顶层的上下文,则其行为与 _self相同。

 

示例

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

 

<body>

    <form>

        <div>

            <label for="example">Let's submit some text</label>

            <input id="example" type="text" name="text">

        </div>

        <div>

            <input type="submit" value="Send">

        </div>

    </form>

</body>

 

</html>

 

浏览器运行结果如下:

 

 

来自 <https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/submit>