使用表单API生成<button type =“ submit”>

我要整合一个主题很重的表格，其结构如下所示。除了提交，我大部分时间都在那儿。

 <form action="#">
   <fieldset>
     <legend>Authentification</legend>
       <label for="email">Courriel*</label>
       <input type="text" name="email" id="email">
       <label for="password">Mot de passe*</label>
       <input type="password" name="password" id="password" class="last">
       <a href="#" title="Mot de passe oublié?" class="clearfix">Forgot password?</a>
       <button type="submit" class="clearfix"><span>Login</span></button>
   </fieldset>
 </form>

我尝试了许多不同的组合，结果button_type对核心没有影响。因此，我使用了此技巧，希望它能解决我的问题。，它仅更改（显然）“类型”属性，而不更改元素本身。按钮类型可以包含其他元素，在这种情况下，需要跨度来保存背景图像，因为按钮中的文本是动态的，所以它必须处于跨度中才能拉伸。

是否有人知道如何使用表单API生成以下标记行？

<button type="submit" class="clearfix"><span>Login</span></button>

在D7中建议：

$form['custom-form'] = array(
  '#prefix' => '<button type="submit">',
  '#suffix' => '</button>',
  '#markup' => '<span>' . t('Login') . '</span>',
);

这样，您可以在以后根据需要在alter函数中替换#markup，而不必重建按钮HTML。

另外，以防万一有人遇到和我一样的麻烦-在窗体的组上使用#markupor #prefix/ #suffix技巧时，除非存在类型元素，否则根本不会调用actions Submit回调函数。我的解决方法是这样的：submit

$form['actions']['submit'] = array
(
    '#type' => 'submit',
    '#value' => '',
    '#attributes' => array( 'style' => array( 'display: none' )), // hide the input field
    '#submit' => array( 'my_callback_for_the_form_submit' ),
    '#prefix' => '<button type="submit" class="btn btn-primary">Add <i class="fa fa-plus-square-o">',
    '#suffix' => '</i></button>',
);

这样，您可以使用自定义HTML提交操作组。

要添加一些自定义标签，您可以使用以下代码段：

// Drupal 6.
$form = array();

// Other elements.

$form['custom-form'] = array(
    '#value' => '<button type="submit" class="clearfix"><span>Login</span></button>',
);

// Drupal 7.
$form = array();

// Other elements.

$form['custom-form'] = array(
    '#markup' => '<button type="submit" class="clearfix"><span>Login</span></button>',
);

为了完整起见，我将发布一个涉及覆盖的替代解决方案theme_button（摘自此博客文章）

首先buttontype向form元素添加一个属性：

$form['submit'] = array (
    '#type' => 'submit',
    '#buttontype' => 'button',
    '#value' => 'Search',
);

然后覆盖主题按钮：

/**
 * Override of theme_button().
 *
 * Render the button element as a button and the submit element as an input element.
 */
function MYTHEME_button($variables) {
  $element = $variables['element'];
  $element['#attributes']['type'] = 'submit';

  element_set_attributes($element, array('id', 'name', 'value'));  

  $element['#attributes']['class'][] = 'form-' . $element['#button_type'];
  if (!empty($element['#attributes']['disabled'])) {
    $element['#attributes']['class'][] = 'form-button-disabled';
  }

  if (isset($element['#buttontype']) && $element['#buttontype'] == 'button') {
    $value = $element['#value'];
    unset($element['#attributes']['value']);
    return '<button' . drupal_attributes($element['#attributes']) . '>' . $value . '</button>';
  }
  else {
    return '<input' . drupal_attributes($element['#attributes']) . ' />';
  }
}

但是，如果表单中有一个以上的按钮，则这会产生问题，因为Drupal无法检测到已单击了哪个按钮。

这可以通过#after_build在表单中添加回调来解决：

$form['#after_build'][] = 'mymodule_force_triggering_element';

然后在after build函数中：

function mymodule_force_triggering_element($form, &$form_state) {
  if (isset($form_state['input']['submit'])) {
    $form_state['triggering_element'] = $form['submit'];
  } elseif (isset($form_state['input']['other_button'])) {
    $form_state['triggering_element'] = $form['other_button'];
  }
  return $form;
}

我尝试了ÓscarGómezAlcañiz的回答，但我的表格仍未提交。作为解决方法，我更改了他的解决方案，使输入位于按钮上方，但透明：

$form['actions']['submit'] = array (
    '#type' => 'submit',
    '#value' => '',
    '#attributes' => array( 'style' => 'position: absolute; left: 0; right: 0; top: 0; bottom: 0; border: none; opacity: 0; width: 100%;'), // put input field over the top of button and make transparent
    '#prefix' => '<button type="submit" class="btn btn-primary">Add <i class="fa fa-plus-square-o">',
    '#suffix' => '</i></button>',
);

这样，实际input[type="submit]点击并触发操作，但是按钮

在现实生活中将所有CSS放在样式表中可能是一个好主意，但仅在此处放入内联样式标签作为示例。

这是我在Drupal 8中实现此目标的方法。基本上，我创建了一个新的主题建议，以便可以使用自定义树枝文件覆盖按钮。

将此代码添加到您的mythemename.theme文件中：

/**
 * Add twig suggestions for input elements.
 *
 * If a form api element has a data-twig-suggestion attribute, then allow twig
 * theme override, add to suggestions.
 *
 * @param array $suggestions
 *   Current list of twig suggestions.
 * @param array $variables
 *   Every variable of the current element.
 */
function mythemename_theme_suggestions_input_alter(&$suggestions, array $variables) {
  $element = $variables['element'];

  if (isset($element['#attributes']['data-twig-suggestion'])) {
    $suggestions[] = 'input__' . $element['#type'] . '__' . $element['#attributes']['data-twig-suggestion'];
  }
}

在您创建表单的任何地方的代码中，将“ data-twig-suggestion”属性添加到“提交”按钮：

$form['submit'] = [
      '#type' => 'submit',
      '#value' => t('Submit') . ' >',
      '#attributes' => [
        'data-twig-suggestion' => 'button',
      ],
    ];

现在，如果您启用了树枝调试，并在站点上检查了按钮的html源，您将看到一个新的树枝建议：

<!-- FILE NAME SUGGESTIONS:
   * input--submit.html.twig
   * input--submit--button.html.twig
   x input.html.twig
-->

现在，您可以创建一个input-submit--button.html.twig文件（我将其放置在mythemename / templates / form_elements中，但您可以将其放置在其他位置）：

<button{{ attributes }} type='submit'>
    <span class="great-success">Submit</span>
</button>

更正确的方法是：

$form['submit'] = array(
  '#type' => 'button',
  '#value' => '<span>Login</span>',
);

它将生成有效的HTML，如下所示：

<button value="&lt;span&gt;Login&lt;/span&gt;" type="submit">
    <span>Login</span>
</button>

...并且此方法不会阻止自动完成功能和其他功能。