Làm thế nào tôi có thể thêm một lớp vào một nhãn?


8

Tôi cần thêm tên lớp vào một số nhãn nhất định được tạo bởi API biểu mẫu của Drupal như thế này:

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

Nếu tôi sử dụng như sau, lớp <textarea>sẽ nhận được một lớp, nhưng không phải là nhãn.

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

Tôi đang tìm kiếm một cái gì đó tương tự sẽ thêm một lớp vào <label>.


Bạn cũng nên xem xét nếu bạn không thể đã nhắm mục tiêu mà nhãn lĩnh vực với CSS bằng cách sử dụng lớp container mẹ cho tên trường, ví dụ như.field-name-field-myfield label{ color:red; }
David Thomas

Câu trả lời:


6

Bạn không thể đặt một lớp thành thẻ nhãn của thành phần biểu mẫu bằng các thuộc tính của API biểu mẫu. Tuy nhiên, bạn có thể đặt tiền tố và hậu tố để bọc phần tử (nhãn + textarea) và sử dụng một số bộ chọn CSS lồng nhau để thực hiện những gì bạn đang cố gắng thực hiện.

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

và trong CSS, bạn có thể chọn thẻ nhãn như thế này:

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

Không phải là một giải pháp tốt nhưng đó là cách tôi thường làm điều này, và đã thấy những người khác làm. #attributeslà cho chính phần tử đầu vào để nó chính xác, mã của bạn thêm myClasslớp vào textarea.


7

Bài đăng này trên StackOverflow nói rằng API biểu mẫu Drupal không hỗ trợ thêm các lớp vào nhãn, nhưng nó có chứa một cách giải quyết hợp lý:

Thay vào đó, bạn có thể nhắm mục tiêu nó bằng cách sử dụng lớp bao bọc cho trường và nhãn:

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

Tài liệu API cho theme_form_element_label () cho thấy lý do tại sao các nhãn không thể thực hiện được (ít nhất là không có sẵn): mảng thuộc tính được khởi tạo trong hàm chủ đề và được điền chỉ bằng hai lớp tùy chọn (phần tử 'tùy chọn' và ' -có hình ảnh ').

Vì vậy, nó là hoàn toàn không thể? Trên thực tế, tôi nghĩ rằng nó có thể được thực hiện, nhưng tôi phải nói thêm rằng tôi đã không tự mình thử điều này. Bạn có thể thử:

  • Thêm một thuộc tính mới #label_attributesvào một số (hoặc tất cả) các phần tử biểu mẫu bằng cách sử dụng hook_element_info_alter () trong một mô-đun tùy chỉnh;
  • Ghi đè theme_form_element_label () và làm cho nó hợp nhất $attributesmảng với giá trị của $element['#label_attributes'].

Nếu bạn sẽ thử cái này, xin vui lòng cho chúng tôi biết nếu nó hoạt động.


Do hạn chế về thời gian, tôi sẽ tìm giải pháp dễ dàng hơn do Ayesh K. đề xuất. Mặc dù vậy, đây có vẻ là một giải pháp tốt, nó có thể giúp đỡ người khác. +1
Shawn

Thêm 1 để đề cập đến chức năng chủ đề theme_form_element_label ()
Ideogram

Giải pháp thay thế: nếu yêu cầu JS trên trang web có thể chấp nhận được, việc điều chỉnh DOM có lẽ là dễ nhất. Nếu không, cách khác (có nghĩa) sẽ là loại bỏ '#title'hoặc thiết lập '#title_display' => 'invisible'và sau đó chỉ cần làm '#suffix' => '<label for="TheElementId" class="option">Display This Text</label>'. Điều đó làm cho nó xuất hiện bên ngoài trình bao bọc mà <div>Drupal sử dụng cho các thành phần nhập biểu mẫu của nó, nhưng một quy tắc CSS có thể làm cho nó trông không khác.
Hiếm khi

2

Mở rộng câu trả lời của Ayesh Tôi đã bao gồm một trường hợp sử dụng ví dụ cho mã đó. Trong khi câu trả lời của marvangend là nhiều hơn Drupalesk, đó là rất nhiều đào cho một kết quả rất đơn giản. Giữ cho các phần tử cụ thể của biểu mẫu & CSS đi kèm với biểu mẫu đã nói là trường hợp sử dụng chung, cho phép chúng tôi nhắm mục tiêu & hành động trên các phần tử bên trong cụ thể hơn một chút.

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

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

2

Trên Drupal 8, hãy làm điều đó đơn giản bằng cách thêm vào tệp 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']
    );
  }
}

và thêm #label_attribut khi tạo biểu mẫu:

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

0

Tôi tìm thấy một cách tương đối dễ dàng để thực hiện điều này bằng cách sử dụng mô-đun Fences D7. Mô-đun này đi kèm với rất nhiều tệp mẫu để tùy chỉnh các trường. Chỉnh sửa trường mà bạn muốn cung cấp một lớp duy nhất và thay đổi đánh dấu trình bao bọc thành thứ gì đó phù hợp với bạn. Sau đó, tìm tệp mẫu tương ứng trong mô-đun và sao chép nó vào trang web của bạn / tất cả / chủ đề / THEME_NAME.

Trước

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

Sau

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

Bằng cách thêm vào <?php print $label; ?>, nó in tên của trường dưới dạng một lớp, cho phép bạn nhắm mục tiêu tất cả các nhãn trường riêng lẻ. Tôi mong điều này giúp được người nào khác!


0

Thật bẩn, nhưng bạn có thể thêm HTML vào thuộc tính '# title':

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

Tôi ngạc nhiên khi nó hoạt động. Tôi nghĩ Drupal sẽ lọc cái này ra, nhưng không. Vì vậy, bạn có thể bọc nhãn với một lớp khác:

<label for="edit-m-vernacularname" class="inline"><span title="HELP!">Common name
</span> </label>
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.