如何确定HTML表单上的默认提交按钮? [英] How is the default submit button on an HTML form determined?

查看:212
本文介绍了如何确定HTML表单上的默认提交按钮?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如果表单是通过按输入 按钮提交,而不是任何特定按钮,例如




  • / li>
  • 在JS中使用 HTMLFormElement.submit()


$ b b

浏览器如何确定多个提交按钮中的哪个(如果有)用作被按下的按钮?



这在两个级别上是重要的: / p>


  • 调用附加到提交按钮的 onclick 事件处理程序

  • 传回网路伺服器的资料



我的实验结果显示:




  • 当按 Enter 时,Firefox,Opera和Safari使用第一个提交按钮

  • 当按 Enter 时,IE会使用第一个提交按钮或根本不能识别的条件。

  • 所有这些浏览器都使用


  • 标准说的是什么?



    如果它会帮助,这里是我的测试代码(PHP只与我的测试方法,而不是我的问题本身相关)

     <!DOCTYPE html PUBLIC -  // W3C // DTD XHTML 1.0 Strict // EN
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd >
    < html xmlns =http://www.w3.org/1999/xhtmlxml:lang =enlang =en>
    < head>
    < meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
    < title> Test< / title>
    < / head>

    < body>

    < h1> Get< / h1>
    < dl>
    <?php foreach($ _GET as $ k => $ v)echo< dt> $ k< / dt>< dd> $ v& ?>
    < / dl>

    < h1>帖子< / h1>
    < dl>
    <?php foreach($ _POST as $ k => $ v)echo< dt> $ k< / dt>< dd> $ v& >
    < / dl>

    < form name =theFormmethod =<?php echo isset($ _ GET ['method'])?$ _GET ['method']:'get';?> 。 action =<?php echo $ _SERVER ['SCRIPT_NAME'];?>>
    < input type =textname =method/>
    < input type =submitname =actionvalue =Button 1onclick =alert('Button 1'); return true/>
    < input type =textname =stuff/>
    < input type =submitname =actionvalue =Button 2onclick =alert('Button 2'); return true/>
    < input type =buttonvalue =submitonclick =document.theForm.submit(); />
    < / form>

    < / body>< / html>


    解决方案

    如果您通过Javascript提交表单c $ c> formElement.submit()或任何等效项),则提交按钮的 none 视为成功,且其值都不包含在提交的数据中。 (请注意,如果您使用 submitElement.click()提交表单,那么您提交的提交被认为是活动的;这不属于你的问题,因为这里的提交按钮是明确的,但我想我会包括它的读者第一部分,并想知道如何通过JS表单提交成功提交按钮。当然,表单的onsubmit处理程序仍然会激活方式,而他们不会通过 form.submit()这是另一个水壶的鱼...)



    如果表单是通过在非textarea字段中按Enter键提交的,那么它实际上由用户代理决定它在这里需要什么。 规范不会说明提交在文本输入字段中使用回车键(如果您选择了一个按钮并使用空格或其他任何方式激活它,那么没有问题,因为该明确的提交按钮是明确使用的)。它所说的是,一个表单必须提交时,提交按钮被激活,甚至不需要敲入例如。一个文本输入将提交表单。



    我相信Internet Explorer选择在源中首先出现的提交按钮;我有一种感觉,Firefox和Opera选择具有最低tabindex的按钮,如果没有定义,回退到第一个定义。关于提交是否具有非默认值属性IIRC,还有一些复杂情况。



    要消除的一点是,这里没有定义的标准,完全在浏览器的whim - 尽可能在任何你在做什么,尽量避免依赖任何特定的行为。如果你真的必须知道,你可以找出各种浏览器版本的行为,但是当我调查这一回,有一些相当复杂的条件(当然会随着新的浏览器版本而变化),我建议你尽可能避免它!


    If a form is submitted but not by any specific button, such as

    • by pressing Enter
    • using HTMLFormElement.submit() in JS

    how is a browser supposed to determine which of multiple submit buttons, if any, to use as the one pressed?

    This is significant on two levels:

    • calling an onclick event handler attached to a submit button
    • the data sent back to the web server

    My experiments so far have shown that:

    • when pressing Enter, Firefox, Opera and Safari use the first submit button in the form
    • when pressing Enter, IE uses either the first submit button or none at all depending on conditions I haven't been able to figure out
    • all these browsers use none at all for a JS submit

    What does the standard say?

    If it would help, here's my test code (the PHP is relevant only to my method of testing, not to my question itself)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    </head>
    
    <body>
    
    <h1>Get</h1>
    <dl>
    <?php foreach ($_GET as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?>
    </dl>
    
    <h1>Post</h1>
    <dl>
    <?php foreach ($_POST as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?>
    </dl>
    
    <form name="theForm" method="<?php echo isset($_GET['method']) ? $_GET['method'] : 'get'; ?>" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>">
        <input type="text" name="method" />
        <input type="submit" name="action" value="Button 1" onclick="alert('Button 1'); return true" />
        <input type="text" name="stuff" />
        <input type="submit" name="action" value="Button 2" onclick="alert('Button 2'); return true" />
        <input type="button" value="submit" onclick="document.theForm.submit();" />
    </form>
    
    </body></html>
    

    解决方案

    If you submit the form via Javascript (i.e. formElement.submit() or anything equivalent), then none of the submit buttons are considered successful and none of their values are included in the submitted data. (Note that if you submit the form by using submitElement.click() then the submit that you had a reference to is considered active; this doesn't really fall under the remit of your question since here the submit button is unambiguous but I thought I'd include it for people who read the first part and wonder how to make a submit button successful via JS form submission. Of course, the form's onsubmit handlers will still fire this way whereas they wouldn't via form.submit() so that's another kettle of fish...)

    If the form is submitted by hitting Enter while in a non-textarea field, then it's actually down to the user agent to decide what it wants here. The specs don't say anything about submitting a form using the enter key while in a text entry field (if you tab to a button and activate it using space or whatever, then there's no problem as that specific submit button is unambiguously used). All it says is that a form must be submitted when a submit button is activated, it's not even a requirement that hitting enter in e.g. a text input will submit the form.

    I believe that Internet Explorer chooses the submit button that appears first in the source; I have a feeling that Firefox and Opera choose the button with the lowest tabindex, falling back to the first defined if nothing else is defined. There's also some complications regarding whether the submits have a non-default value attribute IIRC.

    The point to take away is that there is no defined standard for what happens here and it's entirely at the whim of the browser - so as far as possible in whatever you're doing, try to avoid relying on any particular behaviour. If you really must know, you can probably find out the behaviour of the various browser versions but when I investigated this a while back there were some quite convoluted conditions (which of course are subject to change with new browser versions) and I'd advise you to avoid it if possible!

    这篇关于如何确定HTML表单上的默认提交按钮?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆