Form API'sı ile <düğme türü = "gönder"> oluşturuluyor

Yapısı aşağıda gösterilen, entegre edilecek çok temalı bir formum var. Ben sadece gönderme dışında çoğunlukla oradayım.

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

Birçok farklı kombinasyon denedim, button_type'in çekirdek üzerinde bir etkisi yok. Ben de bu hack'i kullanarak sorunumu çözeceğini umdum. Ne yazık ki, öğenin kendisini değil, yalnızca 'type' özniteliğini değiştirir. Düğme türü diğer öğeleri tutabilir, bu durumda arka plan görüntüsünü tutmak için açıklık gerekir, düğmedeki metin dinamik olduğundan germek için bir açıklıkta olması gerekir.

Herkes nasıl form API kullanarak aşağıdaki biçimlendirme satırı oluşturmak için bir ipucu var mı?

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

D7'de tavsiye ederim:

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

Bu şekilde, gerektiğinde daha sonra, düğme HTML'sini yeniden oluşturmak zorunda kalmadan # işaretini bir değiştirme işlevinde değiştirebilirsiniz.

Ek olarak, birisinin benim yaptığımla aynı sorunla karşılaşması durumunda - bir form grubunda #markupveya #prefix/ #suffixhile kullanırken, bir type öğesi mevcut değilse, actionsgeri çağrı gönderme işlevi çağrılmazsubmit . Benim geçici çözüm şöyle oldu:

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

Bu şekilde, eylem grupları göndermek için özel HTML kullanabilirsiniz.

Bazı özel etiketler eklemek için aşağıdaki snippet'leri kullanabilirsiniz:

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

Tamlık için, geçersiz kılmayı içeren alternatif bir çözüm yayınlayacağımtheme_button ( bu blog gönderisinden alınmıştır )

Önce buttontypeform öğesine bir özellik ekleyin :

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

Ve sonra tema düğmesini geçersiz kıl:

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

Ancak, Drupal olarak hangi düğmenin tıklatıldığını algılayamadığı için formda birden fazla düğme varsa bu sorun yaratır.

Bu #after_build, forma geri çağrı eklenerek giderilebilir :

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

Ve sonra derleme fonksiyonunda:

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

Gómezscar Gómez Alcañiz'in cevabını denedim ama formum hala gönderilmiyordu. Geçici bir çözüm olarak, girdiyi düğmenin üstünde oturuyordu, ancak şeffaftı:

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

Bu şekilde gerçek input[type="submit]tıklanır ve eylem tetiklenir ancak düğme

Muhtemelen tüm CSS'leri gerçek hayatta bir stil sayfasına koymak, ancak burada örnek olarak satır içi stil etiketini koymak iyi bir fikirdir.

Drupal 8'de bunu nasıl başaracağım. Temelde yeni bir tema önerisi oluşturuyorum, böylece düğmeyi özel bir dal dosyasıyla geçersiz kılabilirim.

Bu kodu efsane.theme dosyanızın içine ekleyin:

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

Formunuzu oluşturduğunuz her yerde kodunuza, gönderme düğmenize bir 'veri-dal-öneri' özelliği ekleyin:

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

Şimdi dal hata ayıklamayı etkinleştirdiyseniz ve sitedeki düğmenizin html kaynağını kontrol ederseniz, yeni bir dal önerisi göreceksiniz:

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

Şimdi bir girdi - gönder - button.html.twig dosyası oluşturabilirsiniz (bunu mythemename / templates / form_elements içine yerleştiririm, ancak isterseniz başka bir yere yerleştirebilirsiniz):

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

Daha doğru yol:

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

Bunun gibi geçerli bir HTML üretir:

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

... ve bu yöntem otomatik tamamlama ve diğer özellikleri frenlemez.