Menghasilkan <tombol ketik = "kirim"> dengan form API

Saya memiliki bentuk yang sangat bertema untuk diintegrasikan, yang strukturnya ditunjukkan di bawah ini. Saya hanya tentang sebagian besar kecuali untuk mengirimkan.

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

Saya sudah mencoba banyak kombinasi berbeda, ternyata button_type tidak berpengaruh pada core. Jadi saya menggunakan hack ini , berharap ini akan memperbaiki masalah saya. Sayangnya, itu hanya mengubah atribut 'type' (jelas), dan bukan elemen itu sendiri. Jenis tombol dapat menahan elemen lain, dalam hal ini rentang diperlukan untuk menahan gambar latar belakang, perlu dalam rentang untuk merentangkan karena teks pada tombol dinamis.

Adakah yang tahu bagaimana saya bisa menghasilkan garis markup berikut menggunakan form API?

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

Di D7 akan merekomendasikan:

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

Dengan begitu Anda dapat mengganti #markup di fungsi ubah nanti jika perlu, tanpa harus membangun kembali tombol HTML.

Sebagai tambahan, untuk berjaga-jaga seandainya seseorang mengalami masalah yang sama seperti saya - ketika menggunakan #markupatau #prefix/ #suffixtrik pada grup formulir actions, fungsi kirim panggil balik tidak akan dipanggil sama sekali , kecuali submitelemen tipe hadir. Solusi saya adalah seperti ini:

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

Dengan begitu Anda dapat menggunakan HTML khusus untuk mengirimkan grup tindakan.

Untuk menambahkan beberapa tag khusus, Anda dapat menggunakan potongan berikut:

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

Hanya untuk kelengkapan, saya akan memposting solusi alternatif yang melibatkan penggantian theme_button(diambil dari posting blog ini )

Pertama tambahkan buttontypeatribut ke elemen form:

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

Dan kemudian menimpa tombol tema:

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

Namun hal ini menimbulkan masalah jika ada lebih dari satu tombol dalam formulir karena Drupal tidak dapat mendeteksi tombol mana yang telah diklik.

Ini dapat diatasi dengan menambahkan #after_buildcallback ke formulir:

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

Dan kemudian di fungsi build setelah:

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

Saya mencoba jawaban Óscar Gómez Alcañiz tetapi formulir saya masih belum terkirim. Sebagai solusi, saya mengubah solusinya sehingga input berada di atas tombol tetapi transparan:

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

Dengan cara ini, yang sebenarnya input[type="submit]diklik dan memicu tindakan tetapi tombol

Mungkin ide yang bagus untuk meletakkan semua CSS itu dalam stylesheet dalam kehidupan nyata tetapi cukup masukkan tag gaya inline di sini sebagai contoh.

Inilah cara saya mencapai ini di Drupal 8. Pada dasarnya saya membuat saran tema baru sehingga saya dapat mengganti tombol dengan file ranting kustom.

Tambahkan kode ini di dalam file mythemename.theme Anda:

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

Dalam kode Anda di mana pun Anda membuat formulir, tambahkan atribut 'data-ranting-saran' ke tombol kirim Anda:

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

Sekarang jika Anda telah mengaktifkan ranting debug dan Anda memeriksa sumber html tombol Anda di situs, Anda akan melihat saran ranting baru:

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

Sekarang Anda dapat membuat input - kirim - button.html.twig file (saya letakkan ini di mythemename / templates / form_elements tetapi Anda dapat menempatkannya di tempat lain jika Anda mau):

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

Cara yang lebih benar adalah:

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

Ini menghasilkan HTML yang valid seperti ini:

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

... dan metode ini tidak mengerem fitur lengkap otomatis dan lainnya.