Generazione di <button type = "submit"> con l'API del modulo

Ho una forma fortemente tematica da integrare, la cui struttura è mostrata di seguito. Sono quasi lì per la maggior parte, tranne per l'invio.

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

Ho provato molte combinazioni diverse, risulta che button_type non ha alcun effetto sul core. Quindi ho usato questo trucco , sperando che potesse risolvere il mio problema. Purtroppo, cambia solo l'attributo 'type' (ovviamente), e non l'elemento stesso. Il tipo di pulsante può contenere altri elementi, in questo caso l'intervallo è necessario per contenere un'immagine di sfondo, deve essere in un intervallo per allungarsi poiché il testo nel pulsante è dinamico.

Qualcuno ha la minima idea di come posso generare la seguente linea di markup usando l'API del modulo?

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

In D7 consiglierei:

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

In questo modo è possibile sostituire il #markup in una funzione di modifica in seguito, se necessario, senza dover ricostruire il pulsante HTML.

Inoltre, nel caso in cui qualcuno abbia lo stesso problema che ho avuto io - quando si usa il trucco / #markupo sul gruppo di un modulo , la funzione di invio della richiamata non verrà chiamata affatto , a meno che non sia presente un elemento di tipo. La mia soluzione alternativa era così:#prefix#suffixactionssubmit

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

In questo modo è possibile utilizzare HTML personalizzato per inviare gruppi di azioni.

Per aggiungere alcuni tag personalizzati è possibile utilizzare i seguenti frammenti:

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

Solo per completezza posterò una soluzione alternativa che prevede l'override theme_button(tratto da questo post del blog )

Per prima cosa aggiungi un buttontypeattributo all'elemento form:

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

E quindi sovrascrivi il pulsante del 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']) . ' />';
  }
}

Ciò crea problemi tuttavia se nel modulo è presente più di un pulsante poiché Drupal non è in grado di rilevare quale pulsante è stato selezionato.

Questo può essere risolto aggiungendo un #after_buildcallback al modulo:

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

E poi nella funzione 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;
}

Ho provato la risposta di Óscar Gómez Alcañiz ma il mio modulo non veniva ancora inviato. Come soluzione alternativa ho modificato la sua soluzione in modo che l'input fosse posizionato sopra il pulsante ma fosse trasparente:

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

In questo modo si input[type="submit]fa clic sul reale e si attiva l'azione ma il pulsante

Probabilmente è una buona idea mettere tutto quel CSS in un foglio di stile nella vita reale, ma solo inserire il tag di stile in linea qui come esempio.

Ecco come ottengo questo risultato in Drupal 8. Fondamentalmente creo un nuovo suggerimento per il tema in modo da poter sovrascrivere il pulsante con un file ramoscello personalizzato.

Aggiungi questo codice all'interno del tuo file 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'];
  }
}

Nel tuo codice, ovunque crei il modulo, aggiungi un attributo "suggerimento-ramoscello di dati" al pulsante di invio:

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

Ora se hai attivato il debug del ramoscello e controlli la fonte html del tuo pulsante sul sito, vedrai un nuovo suggerimento di ramoscello:

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

Ora puoi creare un file input - submit - button.html.twig (lo inserisco in mythemename / templates / form_elements ma puoi posizionarlo altrove se vuoi):

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

Il modo più corretto è:

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

Produce HTML valido come questo:

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

... e questo metodo non blocca il completamento automatico e altre funzionalità.