ฉันจะเพิ่มคลาสในป้ายกำกับได้อย่างไร

9

ฉันต้องเพิ่มชื่อคลาสให้กับป้ายกำกับที่สร้างขึ้นโดย API ของ Drupal เช่นนี้:

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

ถ้าฉันใช้สิ่งต่อไปนี้การ<textarea>ได้รับคลาส แต่ไม่ใช่ฉลาก

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

<label>ฉันกำลังมองหาบางสิ่งบางอย่างที่คล้ายกันที่จะเพิ่มระดับไป

7 forms

— Shawn
แหล่งที่มา

คุณควรพิจารณาว่าคุณไม่สามารถกำหนดเป้าหมายเลเบลของฟิลด์นั้นด้วย CSS โดยใช้คลาสคอนเทนเนอร์พาเรนต์สำหรับชื่อฟิลด์เช่น.field-name-field-myfield label{ color:red; }

— David Thomas

5

คุณไม่สามารถตั้งค่าคลาสเป็นแท็กเลเบลขององค์ประกอบแบบฟอร์มโดยใช้คุณสมบัติของ Form API อย่างไรก็ตามคุณสามารถตั้งค่าคำนำหน้าและคำต่อท้ายเพื่อตัดองค์ประกอบ (label + textarea) และใช้ตัวเลือก CSS ที่ซ้อนกันเพื่อให้บรรลุสิ่งที่คุณพยายามทำ

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

และใน CSS คุณสามารถเลือกแท็กป้ายกำกับดังนี้:

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

ไม่ใช่วิธีที่เหมาะสม แต่นั่นเป็นวิธีที่ฉันมักจะทำและเห็นคนอื่นทำ #attributesสำหรับองค์ประกอบเข้าตัวเองดังนั้นจึงเป็นเรื่องที่ถูกต้องรหัสของคุณเพิ่มระดับไปmyClasstextarea

— AyeshK
แหล่งที่มา

6

นี้โพสต์ใน StackOverflowบอกว่า Drupal แบบฟอร์ม API ไม่สนับสนุนการเพิ่มชั้นเรียนฉลาก แต่มันจะมีวิธีแก้ปัญหาที่ดี:

แต่คุณสามารถกำหนดเป้าหมายโดยใช้คลาส wrapper สำหรับฟิลด์และเลเบล:
.form-item-field-foo label {
  /* CSS here */
}

เอกสาร API สำหรับtheme_form_element_label ()แสดงว่าทำไมฉลากถึงเป็นไปไม่ได้ (อย่างน้อยไม่ได้อยู่นอกกล่อง): อาร์เรย์ของแอตทริบิวต์นั้นเริ่มต้นได้ในฟังก์ชั่นของชุดรูปแบบและมีองค์ประกอบทางเลือกเพียงสองคลาส -invisible ')

ดังนั้นมันเป็นไปไม่ได้อย่างสมบูรณ์? อันที่จริงฉันคิดว่ามันสามารถทำได้ แต่ฉันต้องเพิ่มว่าฉันไม่ได้ลองด้วยตัวเอง คุณสามารถลอง:

เพิ่ม#label_attributesคุณสมบัติใหม่ให้กับองค์ประกอบรูปแบบ (หรือทั้งหมด) โดยใช้hook_element_info_alter ()ในโมดูลที่กำหนดเอง
แทนที่ theme_form_element_label () และทำให้มันผสานอาร์เรย์ที่มีค่าของ$attributes$element['#label_attributes']

หากคุณกำลังจะลองทำสิ่งนี้โปรดแจ้งให้เราทราบหากใช้งานได้

— marcvangend
แหล่งที่มา

เนื่องจากข้อ จำกัด ด้านเวลาฉันจะไปหาทางออกที่ง่ายกว่าที่ Ayesh K. เสนอให้ แต่นี่ดูเหมือนว่าจะเป็นทางออกที่ดี แต่อาจช่วยคนอื่นได้ +1

— Shawn

บวก 1 สำหรับการกล่าวถึงฟังก์ชั่นชุดรูปแบบ theme_form_element_label ()

— Ideogram

วิธีแก้ปัญหา: หากต้องการให้ JS บนไซต์ยอมรับได้การปรับแต่ง DOM น่าจะง่ายที่สุด ถ้าไม่ได้อีก (ค่าเฉลี่ย) วิธีที่จะลบ'#title'หรือชุดแล้วก็ทำ'#title_display' => 'invisible' '#suffix' => '<label for="TheElementId" class="option">Display This Text</label>'นั่นทำให้มันปรากฏขึ้นนอก wrapper <div>Drupal ใช้สำหรับองค์ประกอบของ form-input แต่กฎ CSS สามารถทำให้มันดูไม่แตกต่างกัน

— SeldomNeedy

3

บน Drupal 8 ทำได้โดยเพิ่มไฟล์ your_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',
  ]
]

— vibby
แหล่งที่มา

2

การเพิ่มคำตอบของ Ayesh ฉันได้รวมกรณีการใช้ตัวอย่างสำหรับโค้ดดังกล่าว ในขณะที่คำตอบของ marvangend นั้นมีมากมายกว่า Drupalesk แต่ทว่าการขุดเพื่อผลลัพธ์ที่ง่ายมาก การรักษาองค์ประกอบเฉพาะของรูปแบบ & CSS ที่มาพร้อมกับแบบฟอร์มดังกล่าวเป็นกรณีการใช้งานทั่วไปทำให้เราสามารถกำหนดเป้าหมายและดำเนินการกับองค์ประกอบภายในได้ค่อนข้างเฉพาะเจาะจงมากขึ้น

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

— นิโคลัส
แหล่งที่มา

0

ฉันพบวิธีที่ค่อนข้างง่ายในการทำสิ่งนี้ให้สำเร็จโดยใช้โมดูล Fences D7 โมดูลนี้มาพร้อมกับไฟล์เทมเพลตจำนวนมากเพื่อปรับแต่งฟิลด์ แก้ไขฟิลด์ที่คุณต้องการให้คลาสเฉพาะและเปลี่ยนมาร์กอัพ wrapper เป็นสิ่งที่เกี่ยวข้องกับคุณ หลังจากนั้นค้นหาไฟล์เทมเพลตที่เกี่ยวข้องภายในโมดูลและคัดลอกลงในไซต์ / all / themes / 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; ?>มันจะพิมพ์ชื่อของฟิลด์เป็นคลาสที่ช่วยให้คุณกำหนดเป้าหมายไปที่ป้ายชื่อฟิลด์ทั้งหมดทีละรายการ ฉันหวังว่านี่จะช่วยคนอื่นได้!

— sen2008
แหล่งที่มา

0

สกปรก แต่คุณสามารถเพิ่ม HTML ในคุณสมบัติ '# title':

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

— ตัวเขียนแสดงความคิดเห็น
แหล่งที่มา