मैं एक लेबल में एक वर्ग कैसे जोड़ सकता हूं?

Question

मुझे Drupal के फॉर्म API द्वारा बनाए गए कुछ लेबलों में एक वर्ग का नाम इस तरह जोड़ना होगा:

$form['name'] => array(
  '#type' => 'textfield',
  '#title' => 'Prénom'
);

यदि मैं निम्नलिखित का उपयोग करता हूं, तो <textarea>एक वर्ग मिलता है, लेकिन लेबल नहीं।

$form['name']['#attributes']['class'] = array('myClass');

मैं ऐसी ही किसी चीज़ की तलाश में हूँ जिससे एक वर्ग जुड़ जाए <label>।

Comments

आपको यह भी विचार करना चाहिए कि क्या आप पहले से ही सीएसएस के साथ फ़ील्ड लेबल को लक्षित नहीं कर सकते हैं, फ़ील्ड नाम के लिए पेरेंट कंटेनर क्लास का उपयोग करके, जैसे.field-name-field-myfield label{ color:red; }

— डेविड थॉमस

Answer 1

आप प्रपत्र API के गुणों का उपयोग करके प्रपत्र तत्व के लेबल टैग के लिए एक वर्ग सेट नहीं कर सकते। हालांकि, आप तत्व (लेबल + टेक्स्टारिया) को लपेटने के लिए एक उपसर्ग और एक प्रत्यय सेट कर सकते हैं और कुछ नेस्टेड सीएसएस चयनकर्ता का उपयोग कर सकते हैं कि आप क्या करने की कोशिश कर रहे हैं।

$form['name'] => array(
  '#type' => 'textfield',
  '#title' => 'Prénom'
  '#prefix' => '<div class="myClass">',
  '#suffix' => '</div>'
);

और CSS में, आप इस तरह लेबल टैग का चयन कर सकते हैं:

.myClass label {
  text-transform: uppercase; /* just for example */
}

एक सभ्य समाधान नहीं है लेकिन यह है कि मैं आमतौर पर ऐसा कैसे करता हूं, और दूसरों को करते देखा है। #attributesइनपुट तत्व के लिए ही है तो यह सही है अपने कोड myClassवर्ग जोड़ता है textarea।

Answer 2

StackOverflow की इस पोस्ट में कहा गया है कि Drupal Form API लेबल में कक्षाओं को जोड़ने का समर्थन नहीं करता है, लेकिन इसमें एक अच्छा वर्कफ़्लो है:

इसके बजाय, आप फ़ील्ड और लेबल के लिए रैपर क्लास का उपयोग करके इसे लक्षित कर सकते हैं:

.form-item-field-foo label {
  /* CSS here */
}

थीम के लिए API प्रलेखन_फॉर्म_लेमेंट_लैब () दिखाता है कि लेबल संभव क्यों नहीं हैं (कम से कम आउट-ऑफ-द-बॉक्स): विशेषता सरणी को थीम फ़ंक्शन में आरंभ किया गया है और केवल दो वैकल्पिक वर्गों ('विकल्प' और 'तत्व' से युक्त है) -अदृश्य')।

तो, क्या यह पूरी तरह से असंभव है? वास्तव में, मुझे लगता है कि यह किया जा सकता है, लेकिन मुझे यह जोड़ना होगा कि मैंने खुद इसकी कोशिश नहीं की है। आप इसके लिए प्रयास कर सकते हैं:

• कस्टम मॉड्यूल में #label_attributesकुछ नए (या सभी) फ़ॉर्म हुक_लेमेंट_info_alter () का उपयोग करके एक नई संपत्ति जोड़ें ;
• ओवरराइड थीम_फॉर्म_लीमेंट_लैबेल () और इसके $attributesमूल्य के साथ सरणी मर्ज करें $element['#label_attributes']।

यदि आप इसे आज़माने जा रहे हैं, तो कृपया हमें बताएं कि क्या यह काम कर रहा है।

Comments

समय की कमी के कारण, मैं अयेश के द्वारा प्रस्तावित आसान समाधान के लिए जाऊंगा। यह एक अच्छा समाधान जैसा दिखता है, हालांकि यह किसी और का हो सकता है। +1

— शॉन

प्लस 1 थीम_फॉर्म_लेमेंट_लैबेल () थीम फ़ंक्शन का उल्लेख करने के लिए

— आईडोग्राम

Workarounds: यदि साइट पर JS की आवश्यकता स्वीकार्य है, तो DOM को ट्विक करना शायद सबसे आसान है। यदि नहीं, तो दूसरा (माध्य) तरीका निकालना '#title'या सेट करना होगा '#title_display' => 'invisible'और फिर बस करना होगा '#suffix' => '<label for="TheElementId" class="option">Display This Text</label>'। इसका कारण यह है कि <div>इसके फॉर्म-इनपुट तत्वों के लिए रैपर ड्रुपल के बाहर दिखाई देता है , लेकिन एक सीएसएस नियम इसे अलग नहीं देख सकता है।

— दिसंबर को SeldomNeedy

Answer 3

Drupal 8 पर, बस अपने_module.module फ़ाइल में जोड़कर

function your_module_preprocess_form_element(&$variables) {

  $element = $variables['element'];
  if (isset($element['#label_attributes'])) {
    $variables['label']['#attributes'] = array_merge(
      $variables['attributes'],
      $element['#label_attributes']
    );
  }
}

और फार्म निर्माण पर #label_attributes जोड़ें:

$form['some_field'] = [
  [...]
  '#label_attributes' => [
    'some_attr' => 'some_value',
  ]
]

Answer 4

आयेश के जवाब पर विस्तार करते हुए मैंने ऐसे कोड के लिए एक उदाहरण उपयोग मामला शामिल किया है। जबकि मारवांगेंड का उत्तर बहुत अधिक ड्रुपेल्स्क है यह एक बहुत ही सरल परिणाम के लिए खुदाई का एक बहुत कुछ है। फॉर्म के विशिष्ट तत्वों और सीएसएस को उक्त फॉर्म के साथ रखना सामान्य उपयोग का मामला है, जो हमें आंतरिक तत्वों पर लक्षित और कार्य करने की अनुमति देता है।

http://legomenon.io/article/drupal-7-adding-form-placeholder-attributes

function mymodule_form_alter(&$form, $form_state, $form_id) {
  switch ($form_id) {
    // Waterfall.
    case 'webform_client_form_16':
    case 'webform_client_form_51':
    case 'webform_client_form_64':
    case 'webform_client_form_78':
      $exclude = array('select', 'radios', 'checkboxes', 'managed_file');
      foreach ($form['submitted'] as $name => $component) {
        if (!in_array($component['#type'], $exclude) && $name != '#tree') {
          $form['submitted'][$name]['#prefix'] = '<span class= "label-invisible">';
          $form['submitted'][$name]['#suffix'] = '</span>';
          $form['submitted'][$name]['#attributes']['placeholder'] = $component['#title'];
        }
      }
      $form['#attached']['css'] = array(
        drupal_get_path('module', 'mymodule') . '/css/mymodule.form.css',
      );
    break;
  }
}

Answer 5

मुझे बाड़ डी 7 मॉड्यूल का उपयोग करके इसे पूरा करने का अपेक्षाकृत आसान तरीका मिला। यह मॉड्यूल खेतों को अनुकूलित करने के लिए बहुत सारी टेम्पलेट फ़ाइलों के साथ आता है। उस क्षेत्र को संपादित करें जिसे आप एक विशिष्ट वर्ग देना चाहते हैं और आपके लिए प्रासंगिक कुछ के लिए रैपर मार्कअप को बदलना है। उसके बाद, मॉड्यूल के भीतर संबंधित टेम्प्लेट फ़ाइल ढूंढें और इसे अपनी साइटों / सभी / थीम / THEME_NAME में कॉपी करें।

इससे पहले

<span class="field-label"<?php print $title_attributes; ?>>
  <?php print $label; ?>:
</span>

उपरांत

<span class="<?php print $label; ?> field-label"<?php print $title_attributes; ?>>
  <?php print $label; ?>:
</span>

जोड़कर <?php print $label; ?>, यह फ़ील्ड के नाम को एक वर्ग के रूप में प्रिंट करता है, जिससे आप सभी फ़ील्ड-लेबल को व्यक्तिगत रूप से लक्षित कर सकते हैं। मैं उम्मीद करता हूं कि इससे किसी की मदद होगी!

Answer 6

यह गंदा है, लेकिन आप HTML को '# शीर्षक' संपत्ति में जोड़ सकते हैं:

$form['some_element'] = array(
  '#type'          => 'textfield',
  '#title'         => '<span title="HELP!">'.t($subchildlabel).'</span>',
  '#default_value' => …
) 
… 
);

मैं खुद हैरान हूं कि यह काम करता है। मुझे लगता है कि Drupal इसे फ़िल्टर करेगा, लेकिन नहीं। तो, आप लेबल को किसी अन्य वर्ग के साथ लपेट सकते हैं:

<label for="edit-m-vernacularname" class="inline"><span title="HELP!">Common name
</span> </label>