การสร้าง <button type =“ submit”> ด้วยฟอร์ม API

ฉันมีรูปแบบชุดรูปแบบหนักเพื่อรวมซึ่งมีโครงสร้างที่แสดงด้านล่าง ฉันเป็นเพียงแค่ส่วนใหญ่ยกเว้นการส่ง

 <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 ไม่มีผลกับแกนหลัก ดังนั้นฉันจึงใช้แฮ็คนี้หวังว่ามันจะแก้ไขปัญหาของฉัน อนิจจามันเปลี่ยนเฉพาะคุณลักษณะ '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>',
);

ด้วยวิธีนี้คุณสามารถแทนที่ #markup ในฟังก์ชั่นแก้ไขได้ในภายหลังหากจำเป็นโดยไม่ต้องสร้างปุ่ม HTML ขึ้นมาใหม่

นอกจากนี้ในกรณีที่มีคนพบปัญหาเช่นเดียวกับฉัน - เมื่อใช้#markupหรือ#prefix/ #suffixหลอกลวงในactionsกลุ่มของฟอร์มฟังก์ชั่นส่งกลับจะไม่ถูกเรียกเลยเว้นแต่ว่ามี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['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';

จากนั้นในฟังก์ชั่นสร้างหลัง:

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-Recommend' ไว้ในปุ่มส่งของคุณ:

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

ตอนนี้คุณสามารถสร้างอินพุต - ส่ง - ไฟล์ 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>

... และวิธีนี้จะไม่ทำให้ระบบเติมข้อความอัตโนมัติและคุณสมบัติอื่น ๆ หยุดทำงาน