Generieren von <button type = "submit"> mit der Formular-API

Ich muss eine stark thematisierte Form integrieren, deren Struktur unten gezeigt wird. Ich bin zum größten Teil fast da, bis auf die Einreichung.

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

Ich habe viele verschiedene Kombinationen ausprobiert, es stellt sich heraus, dass button_type keinen Einfluss auf den Kern hat. Also habe ich diesen Hack benutzt , in der Hoffnung, dass er mein Problem beheben würde. Leider ändert es nur das Attribut 'type' (offensichtlich) und nicht das Element selbst. Der Schaltflächentyp kann andere Elemente enthalten. In diesem Fall wird die Spanne benötigt, um ein Hintergrundbild aufzunehmen. Sie muss sich in einer Spanne befinden, um gedehnt zu werden, da der Text in der Schaltfläche dynamisch ist.

Hat jemand eine Ahnung, wie ich die folgende Markup-Zeile mithilfe der Formular-API generieren kann?

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

In D7 würde empfehlen:

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

Auf diese Weise können Sie das #markup später bei Bedarf in einer Änderungsfunktion ersetzen, ohne das HTML der Schaltfläche neu erstellen zu müssen.

Für den Fall, dass jemand auf die gleichen Probleme stößt wie ich - wenn Sie den #markupoder #prefix/ #suffixTrick für die actionsGruppe eines Formulars verwenden , wird die Rückruffunktion zum Senden überhaupt nicht aufgerufen , es sei denn, asubmit Typelement ist vorhanden. Meine Problemumgehung war wie folgt:

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

Auf diese Weise können Sie benutzerdefiniertes HTML zum Senden von Aktionsgruppen verwenden.

Um ein benutzerdefiniertes Tag hinzuzufügen, können Sie die folgenden Snippets verwenden:

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

Der Vollständigkeit halber werde ich eine alternative Lösung veröffentlichen, die das Überschreiben beinhaltet theme_button(entnommen aus diesem Blog-Beitrag ).

Fügen Sie buttontypedem Formularelement zunächst ein Attribut hinzu:

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

Und dann die Themenschaltfläche überschreiben:

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

Dies führt jedoch zu Problemen, wenn mehr als eine Schaltfläche im Formular vorhanden ist, da Drupal nicht erkennen kann, auf welche Schaltfläche geklickt wurde.

Dies kann durch Hinzufügen eines #after_buildRückrufs zum Formular behoben werden:

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

Und dann in der After-Build-Funktion:

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

Ich habe die Antwort von Óscar Gómez Alcañiz ausprobiert, aber mein Formular wurde immer noch nicht eingereicht. Um dieses Problem zu umgehen, habe ich seine Lösung so geändert, dass die Eingabe über der Schaltfläche angezeigt wurde, aber transparent war:

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

Auf diese Weise wird auf das tatsächliche input[type="submit]geklickt und die Aktion ausgelöst, jedoch die Schaltfläche

Wahrscheinlich eine gute Idee, all das CSS im wirklichen Leben in ein Stylesheet zu integrieren, aber hier nur das Inline-Style-Tag als Beispiel einzufügen.

So erreiche ich dies in Drupal 8. Grundsätzlich erstelle ich einen neuen Themenvorschlag, damit ich die Schaltfläche mit einer benutzerdefinierten Zweigdatei überschreiben kann.

Fügen Sie diesen Code in Ihre Datei mythemename.theme ein:

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

Fügen Sie in Ihrem Code, wo immer Sie Ihr Formular erstellen, ein Attribut "Datenzweig-Vorschlag" zu Ihrer Senden-Schaltfläche hinzu:

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

Wenn Sie nun das Debuggen von Zweigen aktiviert haben und die HTML-Quelle Ihrer Schaltfläche auf der Website überprüfen, wird ein neuer Zweigvorschlag angezeigt:

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

Jetzt können Sie eine Datei input - submit - button.html.twig erstellen (ich platziere diese in mythemename / templates / form_elements, aber Sie können sie an einer anderen Stelle platzieren, wenn Sie möchten):

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

Richtiger ist:

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

Es erzeugt gültiges HTML wie folgt:

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

... und diese Methode bremst nicht die automatische Vervollständigung und andere Funktionen.