양식 API를 사용하여 <button type =“submit”> 생성

통합 할 테마 테마가 큽니다. 그 구조는 아래에 나와 있습니다. 나는 제출을 제외하고 대부분 거기에 있습니다.

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

이렇게하면 단추 HTML을 다시 작성하지 않고도 나중에 필요한 경우 alter 함수에서 #markup을 바꿀 수 있습니다.

또한 양식 그룹 에서 #markup또는 #prefix/ #suffix트릭을 사용할 때 누군가와 같은 문제가 발생 하는 경우 type 요소가 없으면 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';

그런 다음 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;
}

Óscar Gómez Alcañ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-suggestion'속성을 추가하십시오.

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

이제 입력 --submit--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>

...이 방법은 자동 완성 및 기타 기능을 제동하지 않습니다.