如何确定HTML表单上的默认提交按钮?

如果表单被提交但不是由任何特定的按钮,如

  • 按Enter键
  • 在JS中使用HTMLFormElement.submit()
  • 一个浏览器应该如何确定使用多个提交按钮中的哪一个作为被按下的按钮?

    这在两个层面上是重要的:

  • 调用附加到提交按钮的onclick事件处理程序
  • 将数据发送回Web服务器
  • 迄今为止我的实验表明:

  • 当按Enter键时,Firefox,Opera和Safari使用表格中的第一个提交按钮
  • 当按Enter键时,IE根据我无法弄清的情况使用第一个提交按钮或者根本不使用
  • 所有这些浏览器根本没有使用JS提交
  • 标准说什么?

    如果它有帮助,这里是我的测试代码(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/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>
    

    如果您通过Javascript提交表单(即formElement.submit()或任何等效的表单),则没有任何提交按钮被认为是成功的,并且它们的值都不包含在提交的数据中。 (请注意,如果您使用submitElement.click()提交表单,那么您提交的提交文件被视为活动文件;这并不属于您问题的范围,因为这里提交按钮是明确的,但我认为我将它包含给阅读第一部分的人,并且想知道如何通过JS表单提交成功提交按钮。当然,表单的onsubmit处理程序仍然会以这种方式触发,而他们不会通过form.submit()这是另一个鱼的水壶......)

    如果表单是在非textarea字段中按Enter键提交的,那么它实际上是由用户代理决定其在此处的内容。 规范没有提到任何关于在文本输入字段中使用回车键提交表单的问题(如果您选择一个按钮并使用空间或其他方式激活它,那么没有问题,因为具体的提交按钮是明确使用的)。 它所说的是,当提交按钮被激活时必须提交表单,甚至不要求在输入文本时输入文本就会提交表单。

    我相信Internet Explorer会选择源中第一个出现的提交按钮; 我有一种感觉,Firefox和Opera选择tabindex最低的按钮,如果没有其他定义,则会回到第一个定义的按钮。 提交是否具有非默认值属性IIRC也有一些复杂性。

    需要指出的是,对于这里发生的事情没有定义的标准,这完全取决于浏览器的意图 - 尽可能地无论你在做什么,都尽量避免依赖任何特定的行为。 如果你真的必须知道,你可能会发现各种浏览器版本的行为,但是当我调查了一段时间后,有一些相当复杂的条件(当然这些条件会随着新的浏览器版本而改变),我建议如果可能的话,你要避免它!


    Andrezj几乎被钉上了......但这是一个简单的跨浏览器解决方案。

    采取这样的形式:

    <form>
        <input/>
        <button type="submit" value="some non-default action"/>
        <button type="submit" value="another non-default action"/>
        <button type="submit" value="yet another non-default action"/>
    
        <button type="submit" value="default action"/>
    </form>
    

    并重构为:

    <form>
        <input/>
    
        <button style="overflow: visible !important; height: 0 !important; width: 0 !important; margin: 0 !important; border: 0 !important; padding: 0 !important; display: block !important;" type="submit" value="default action"/>
    
        <button type="submit" value="some non-default action"/>
        <button type="submit" value="another non-default action"/>
        <button type="submit" value="yet another non-default action"/>
        <button type="submit" value="still another non-default action"/>
    
        <button type="submit" value="default action"/>
    </form>
    

    由于W3C规范指出多个提交按钮是有效的,但忽略了用户代理应该如何处理这些按钮的指导,因此浏览器制造商应该按照他们认为合适的方式实施。 我发现他们会提交表单中的第一个提交按钮,或者在当前拥有焦点的表单字段之后提交下一个提交按钮。

    不幸的是,简单地添加一种显示风格:无; 将无法工作,因为W3C规范指出任何隐藏的元素都应该从用户交互中排除。 因此,请将其隐藏在明显的视线内!

    以上是我最终投入生产的解决方案的一个例子。 按下Enter键会触发默认表单提交行为,如预期的那样,即使存在其他非默认值并且位于DOM中的默认提交按钮之前。 用于显式用户输入的鼠标/键盘交互附加功能,同时避免使用javascript处理程序。

    注意:通过窗体标签不会显示任何视觉元素的焦点,但仍然会导致不可见按钮被选中。 为了避免这个问题,只需相应地设置tabindex属性并省略不可见提交按钮上的tabindex属性。 尽管将这些风格推广为重要,但它们应该防止任何框架或现有按钮样式干扰此修补程序。 另外,这些内联样式绝对是不好的形式,但我们在这里证明了概念......不写代码。


    HTML 4没有明确说明。 目前的HTML5工作草案规定,第一个提交按钮必须是默认的:

    form元素的默认按钮是树形次序中的第一个提交按钮,其表单所有者是该form元素。

    如果用户代理支持让用户隐式提交表单(例如,在某些平台上点击“输入”键,而文本字段集中隐式提交表单),那么对于默认按钮具有定义的激活的表单行为必须使用户代理在该默认按钮上运行合成点击激活步骤。

    链接地址: http://www.djcxy.com/p/88923.html

    上一篇: How is the default submit button on an HTML form determined?

    下一篇: When to use <br> line breaks vs CSS positioning?