फ़ॉर्म एपीआई के साथ <बटन प्रकार = "सबमिट"> उत्पन्न करना

Question

मेरे पास एकीकृत करने के लिए एक भारी थीम है, जिसकी संरचना नीचे दिखाई गई है। मैं केवल जमा के अलावा अधिकांश भाग के लिए वहाँ हूँ।

 <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="submit" class="clearfix"><span>Login</span></button>

Comments

Drupal 8 के लिए सबमिट बटन बन जाएगा <botton type="submit">, drupal.org/node/1671190

— फिलिप माइकल

Answer 1

D7 में सिफारिश करेंगे:

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

इस तरह से आप बाद में बटन को एचटीएमएल के पुनर्निर्माण के बिना, जरूरत पड़ने पर एक परिवर्तन समारोह में #markup को बदल सकते हैं।

Comments

यह विधि स्वतः पूर्णता का समर्थन नहीं करती है।

— पीटर लोज़ोवित्स्की

Answer 2

एक अतिरिक्त के रूप में, किसी के मामले में बस उसी परेशानी में चलता है जैसा मैंने किया था - जब किसी फॉर्म के समूह पर #markupया #prefix/ #suffixचाल का उपयोग करते हुए 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 का उपयोग कर सकते हैं।

Comments

यह दिया गया सर्वश्रेष्ठ उत्तर था ...

— प्रताप घोष

Answer 3

कुछ कस्टम टैग जोड़ने के लिए आप निम्नलिखित स्निपेट का उपयोग कर सकते हैं:

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

Comments

यह वास्तव में काम नहीं किया है लेकिन यह '#markup' #VALUE के बजाय कोशिश कर रहा पर मुझे मिल किया था, और है कि चाल किया था। धन्यवाद भाई, मैं सराहना करता हूं।

— स्टेफगोसेलिन

आपने अपने Drupal संस्करण के बारे में जानकारी नहीं दी। #value Drupal6 के लिए है। #markup ड्रुपल 7 में पेश किया गया

— शोएब नवाज़

हाँ दोस्त, मेरा बुरा मुझे संस्करण संख्या का उल्लेख करना चाहिए था।

— स्टेफगोस्सेलिन

Answer 4

पूर्णता के लिए मैं एक वैकल्पिक समाधान पोस्ट करूंगा जिसमें ओवरराइडिंग शामिल है 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';

और फिर निर्माण कार्य के बाद:

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

Answer 5

मैंने triedscar 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]क्लिक हो रहा है और कार्रवाई लेकिन बटन को ट्रिगर कर रहा है

शायद एक अच्छा विचार है कि सीएसएस को वास्तविक जीवन में एक स्टाइलशीट में डाल दिया जाए लेकिन एक उदाहरण के रूप में यहां इनलाइन शैली टैग लगाया जाए।

Answer 6

यहाँ मैं 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'];
  }
}

अपने कोड में, जहाँ भी आप अपना फॉर्म बनाते हैं, अपने सबमिट बटन में 'डेटा-ट्विग-सुझाव' विशेषता जोड़ें:

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

अब आप एक इनपुट बना सकते हैं - सबमिट करें - button.html.twig फ़ाइल (मैं इसे mythemename / टेम्पलेट्स / form_elements में रखता हूं लेकिन यदि आप चाहें तो इसे कहीं और रख सकते हैं):

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

Answer 7

अधिक सही तरीका है:

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

... और यह विधि स्वतः पूर्ण और अन्य सुविधाओं को नहीं तोड़ती है।

Comments

यह एक <button>टैग वापस नहीं करता है , कम से कम डी 7 में। theme_button()शामिल / form.inc की अंतिम पंक्ति हैreturn '<input' . drupal_attributes($element['#attributes']) . ' />';

— डेनियल

आप कृपया जाँच कर सकते हैं? मैंने इस कोड को अपने काम करने वाले कस्टम मॉड्यूल से कॉपी किया है।

— पीटर लोज़ोवित्स्की

यदि यह आपके लिए काम करता है तो इसका मतलब है कि आपने कस्टम थीम या मॉड्यूल में theme_button को ओवरराइड किया है। डेनियल सही है।

— फेलिक्स ईव

@FelixEve, सही है! मैंने कस्टम फ़ंक्शन में बटन को ओवरराइड किया है। क्या बिना कस्टम फंक्शन के ऐसा करने की कोई विधि है?

— पीटर लोज़ोवित्स्की

इस धागे में उपलब्ध सभी विधियों का अच्छा अवलोकन है।

— फेलिक्स ईव