首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

input type="submit"

"submit"类型的<input>元素呈现为提交按钮 - 单击一个将尝试提交表单到服务器。

代码语言:javascript
复制
<input type="submit" value="Submit to me">

用作按钮标签的DOMString

活动

点击

支持的通用属性

类型和价值

IDL属性

方法

没有

<input type="submit">元素的value属性包含一个 DOMString作为按钮的标签

代码语言:javascript
复制
<input type="submit" value="Submit to me">

如果你不指定一个value,你会得到一个默认标签,如提交 / 提交查询(取决于浏览器)的按钮:

代码语言:javascript
复制
<input type="submit">

使用提交按钮

<input type="submit">按钮用于提交表单。如果你想创建一个自定义的按钮,然后使用JavaScript自定义行为,你需要使用<input type="button">或更好的<button>元素。

但是,您需要注意的是,如果您只在表单(例如<button>My button</button>)中包含单个按钮元素,则浏览器会将其计为提交按钮。除了可能要包含的任何其他按钮之外,还需要显式声明提交按钮。

一个简单的提交按钮

我们将开始创建一个简单的提交按钮:

代码语言:javascript
复制
<form> 
  <div>
    <label for="example">Let's submit some text</label>
    <input id="example" type="text" name="text">
  </div>
  <div>
    <input type="submit" value="Submit to me">
  </div>
</form>

呈现如下:

尝试在文本字段中输入一些文本,然后提交表单。

提交后,在这种情况下发送到服务器的数据键/值对text=mytext将根据您在文本字段中输入的文本而定。提交数据的地点和方式取决于您如何设置<form>属性(和其他详细信息) - 请参阅发送表单数据以获取更多详细信息。

添加提交键盘快捷键

键盘快捷键(也称为访问键和键盘等价物)可让用户使用键盘上的键或键组合来触发按钮。要将键盘快捷键添加到提交按钮 - 就像使用任何<input>有意义的键一样 - 可以使用accesskey全局属性。

在这个例子中,s被指定为访问键(您需要按s加上您的浏览器/操作系统组合的特定修饰键;请参阅accesskey这些键的有用列表)。

代码语言:javascript
复制
<form>
  <div>
    <label for="example">Let's submit some text</label>
    <input id="example" type="text" name="text">
  </div>
  <div>
    <input type="submit" value="Submit to me"
     accesskey="s">
  </div>
</form>

注意:以上例子的问题当然是用户不知道访问密钥是什么!在真实网站中,您必须以不干扰网站设计的方式提供此信息(例如,通过提供易于访问的链接指向网站访问键的信息)。

禁用和启用提交按钮

要禁用提交按钮,只需disabled在其上指定全局属性,如下所示:

代码语言:javascript
复制
<input type="submit" value="Disabled" disabled>

您可以在运行时通过设置disabledtrue或来启用和禁用按钮false; 在JavaScript中,这看起来像btn.disabled = true

注意:请参阅<input type="button">页面以获取有关启用/禁用按钮的更多信息。

:Firefox将不像其他的浏览器,默认情况下,坚持动态禁用状态一的<button>整个页面加载。使用该autocomplete属性来控制此功能。

验证

提交按钮不参与约束验证; 他们没有被可约束的值

例子

我们已经包含上面的简单例子。关于提交按钮没有什么可说的。

规范

规范

状态

HTML生活标准在该规范中定义了<input type =“submit”>''。

生活水平

HTML5该规范中的<input type =“submit”>'的定义。

建议

浏览器兼容性

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

1.0

1.0 (1.7 or earlier)

(Yes)

(Yes)

1.0

Feature

Android

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

Basic support

(Yes)

4.0 (4.0)

(Yes)

(Yes)

(Yes)

扫码关注腾讯云开发者

领取腾讯云代金券