Tạo <loại nút = Đăng ký ăn> với API biểu mẫu

Tôi có một hình thức theo chủ đề rất nhiều để tích hợp, có cấu trúc được hiển thị dưới đây. Tôi chỉ ở đó cho hầu hết các phần ngoại trừ cho trình.

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

Tôi đã thử nhiều kết hợp khác nhau, hóa ra button_type không có tác dụng với lõi. Vì vậy, tôi đã sử dụng bản hack này , hy vọng nó sẽ khắc phục vấn đề của tôi. Than ôi, nó chỉ thay đổi thuộc tính 'loại' (rõ ràng), chứ không phải chính phần tử. Loại nút có thể chứa các yếu tố khác, trong trường hợp này, khoảng cần thiết để giữ hình nền, nó cần nằm trong một khoảng để kéo dài vì văn bản trong nút là động.

Có ai có manh mối về cách tôi có thể tạo dòng đánh dấu sau bằng API mẫu không?

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

Trong D7 sẽ đề nghị:

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

Bằng cách đó, bạn có thể thay thế #markup trong chức năng thay đổi sau này nếu cần mà không phải xây dựng lại nút HTML.

Như một sự bổ sung, chỉ trong trường hợp ai đó chạy vào những rắc rối tương tự như tôi đã làm - khi sử dụng #markuphoặc #prefix/ #suffixlừa trên một hình thức actionsnhóm, nộp hàm callback sẽ không được gọi là ở tất cả , trừ khi một submitloại yếu tố hiện diện. Cách giải quyết của tôi là như thế này:

$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>',
);

Bằng cách đó bạn có thể sử dụng HTML tùy chỉnh để gửi các nhóm hành động.

Để thêm một số thẻ tùy chỉnh, bạn có thể sử dụng các đoạn sau:

// 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>',
);

Để hoàn thiện, tôi sẽ đăng một giải pháp thay thế liên quan đến ghi đè theme_button(lấy từ bài đăng trên blog này )

Đầu tiên thêm một buttontypethuộc tính cho thành phần biểu mẫu:

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

Và sau đó ghi đè nút chủ đề:

/**
 * 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']) . ' />';
  }
}

Điều này tạo ra vấn đề tuy nhiên nếu có thêm một nút trong biểu mẫu vì Drupal không thể phát hiện nút nào đã được nhấp.

Điều này có thể được giải quyết bằng cách thêm một #after_buildcuộc gọi lại vào biểu mẫu:

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

Và sau đó trong chức năng xây dựng sau:

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

Tôi đã thử câu trả lời của Óscar Gómez Alcañiz nhưng mẫu của tôi vẫn không được gửi. Như một cách giải quyết, tôi đã thay đổi giải pháp của anh ấy để đầu vào nằm phía trên nút nhưng trong suốt:

$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>',
);

Bằng cách này, thực tế input[type="submit]đang được nhấp và kích hoạt hành động nhưng nút

Có lẽ là một ý tưởng tốt để đặt tất cả CSS đó trong biểu định kiểu trong cuộc sống thực nhưng chỉ cần đặt thẻ kiểu nội tuyến ở đây làm ví dụ.

Đây là cách tôi đạt được điều này trong Drupal 8. Về cơ bản tôi tạo một đề xuất chủ đề mới để tôi có thể ghi đè nút bằng một tệp twig tùy chỉnh.

Thêm mã này vào trong tệp tin huyền thoại của bạn:

/**
 * 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'];
  }
}

Trong mã của bạn bất cứ nơi nào bạn tạo biểu mẫu của mình, hãy thêm thuộc tính 'data-twig-suggest' vào nút gửi của bạn:

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

Bây giờ nếu bạn đã bật gỡ lỗi twig và bạn kiểm tra nguồn html của nút trên trang web, bạn sẽ thấy một đề xuất twig mới:

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

Bây giờ bạn có thể tạo một tệp đầu vào - submit - button.html.twig (Tôi đặt tệp này trong mystemename / samples / form_elements nhưng bạn có thể đặt nó ở nơi khác nếu bạn muốn):

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

Cách chính xác hơn là:

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

Nó tạo ra HTML hợp lệ như thế này:

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

... và phương pháp này không phanh tự động hoàn thành và các tính năng khác.