这篇翻译不完整。请帮忙从英语翻译这篇文章

"submit" 类型的 <input>  元素被渲染成按钮. 当 click 事件发生时(用户点击按钮是一个典型的点击事件),  用户代理 试图提交表单到服务器.

<input type="submit" value="发送请求">

DOMString 展示再button标签内
事件 click
支持的公共属性 type and value
IDL 属性 value
方法

Value

<input type="submit"> 元素的value 属性 包含一个展示在按钮标签上的 DOMString ,否则按钮没有正确的value值

<input type="submit" value="发送请求">

如果没有指定一个value 值, 按钮将会有一个通过用户代理选择的默认label。 这个label可能是 "Submit" 或者"Submit Query." 这里有一个默认label的提交按钮:

<input type="submit">

使用提交按钮

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

如果你选择使用<button> 在你的form表单里创建按钮, 请记住:  它只是在<form>内部的<button> ,  应该被当作 "submit" 按钮来处理。 所以你应该有一个明确指定哪一个按钮是提交按钮的习惯。

一个简单的提交按钮

我们将通过创建含有一个简单的提交按钮的表单来开始:

<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>

渲染效果如下:

试着输入一些文字到文本字段, 然后提交表单.

在提交时, 键值对数据将会被发送到服务端. 在此列子中, 字符串将会是"text=usertext", "usertext" 是用户输入的字符在转换为被保护的特殊字符. 数据被如何提交、提交到哪都由 <form>的设置决定; 到Sending form data 获取更多细节.

添加提交的快捷键

键盘快捷键就是使用键盘上的按键, 让用户使用按键或组合按键来触发按钮。 为了在提交按钮上添加键盘快捷键— just as you would with any <input> for which it makes sense — you use the accesskey global attribute.

In this example, s is specified as the access key (you'll need to press s plus the particular modifier keys for your browser/OS combination. In order to avoid conflicts with the user agent's own keyboard shortcuts, different modifier keys are used for access keys than for other shortcuts on the host computer. See accesskey for further details.

Here's the previous example with the s access key added:

<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"
     accesskey="s">
  </div>
</form>

For example, in Firefox for Mac, pressing Control-Option-S triggers the Send button, while Chrome on Windows uses Alt+S.

The problem with the above example is that the user will not know what the access key is! This is especially true since the modifiers are typically non-standard to avoid conflicts. When building a site, be sure to provide this information in a way that doesn't interfere with the site design (for example by providing an easily accessible link that points to information on what the site access keys are). Adding a tooltip to the button (using the title attribute) can also help, although it's not a complete solution for accessibility purposes.

Disabling and enabling a submit button

To disable a submit button, simply specify the disabled global attribute on it, like so:

<input type="submit" value="Disabled" disabled>

You can enable and disable buttons at run time by simply setting disabled to true or false; in JavaScript this looks like btn.disabled = true or btn.disabled = false.

See the <input type="button"> page for more ideas about enabling and disabling buttons.

Validation

Submit buttons don't participate in constraint validation; they have no real value to be constrained.

Examples

We've included simple examples above. There isn't really anything more to say about submit buttons. There's a reason this kind of control is sometimes called a "simple button."

Specifications

Specification Status
HTML Living Standard
<input type="submit">
Living Standard
HTML5
<input type="submit">
Recommendation

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier)[1] (Yes) (Yes) 1.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) 4.0 (4.0)[1] (Yes) (Yes) (Yes)

[1] Unlike other browsers, Firefox by default persists the dynamic disabled state of a <button> across page loads. Use the autocomplete attribute to control this feature.

See also

文档标签和贡献者

此页面的贡献者: bingxl
最后编辑者: bingxl,