Làm cách nào để thêm lớp CSS vào nhãn biểu mẫu?

Tôi muốn thêm một lớp CSS vào nhãn trên một trang đang sử dụng API biểu mẫu 8 của Drupal. Tôi đã không thể tìm thấy một tài liệu tham khảo trực tuyến về cách áp dụng điều đó. Tôi đã sử dụng cách giải quyết sau đây, nhưng nó tạo ra một số kết quả lạ.

public function buildForm(array $form, FormStateInterface $form_state)
{
    $form['label1']  = array(
        '#type' => 'label',
        '#title' => $this->t('QUESTIONNAIRE'),
        '#id'         => 'lbl1',
        '#prefix'     => '<div class="caption1">',
        '#suffix'     => '</div>',
    ) ;

và HTML được hiển thị là:

<div class="caption1"><label for="lbl1" class="control-label">
<div class="caption1"></div>QUESTIONNAIRE
  </label>

Không chỉ là câu lệnh div ở sai vị trí mà nó được hiển thị hai lần.

Tôi đã tìm thấy các bài đăng từ nhiều năm trước cho thấy điều này là không thể, nhưng tôi hy vọng rằng kể từ đó, và với D8, nó đã được sửa. Tôi không muốn làm điều đó với tiền tố / hậu tố, nhưng là một thành phần mảng riêng biệt.

PS: trang này là Drupal 8.0.0-rc2

Tôi biết đây là một chủ đề cũ, nhưng đối với bất kỳ ai Googling.

Manh mối cho điều này là trong template_preprocess_form_element().

$element += [
    '#title_display' => 'before',
    '#wrapper_attributes' => [],
    '#label_attributes' => [],
  ];

#label_attributes là một mảng thuộc tính tiêu chuẩn, vì vậy rất dễ dàng để thiết lập một lớp với ['class' => ['my-class', 'other-class']]

#title_display lấy 3 giá trị:

• before: Nhãn là đầu ra trước phần tử. Đây là mặc định.

• after: Nhãn là đầu ra sau phần tử. Ví dụ: phần này được sử dụng cho các phần tử #type của radio và hộp kiểm.

• vô hình: Nhãn rất quan trọng đối với trình đọc màn hình để cho phép chúng điều hướng chính xác qua các biểu mẫu nhưng có thể gây mất tập trung về mặt thị giác. Khách sạn này ẩn nhãn cho tất cả mọi người trừ trình đọc màn hình.
• Thuộc tính: Đặt thuộc tính tiêu đề trên thành phần để tạo một chú giải công cụ nhưng không xuất ra thành phần nhãn. Điều này chỉ được hỗ trợ cho các hộp kiểm và radio

Tôi chỉ kiểm tra điều này và tôi không tin rằng có thể thêm một lớp trực tiếp vào một thành phần nhãn.

Như bạn có thể biết, các lớp thường được thêm bằng #attribut như sau:

 $form['foo'] = array(
  '#type' => 'textfield',
  '#title' => 'Foo',
  '#attributes' => array('class' => array('first-class', 'second-class')),
);

Tuy nhiên, tôi vừa thử nghiệm và #attribut không thêm các lớp vào thành phần Nhãn.

Bạn có thể thêm một phần tử biểu mẫu trình bao bọc, cung cấp một lớp cho nó và sau đó định kiểu nhãn của bạn dựa trên thực tế rằng nó là phần tử con của phần tử trình bao bọc không? Như thế này:

$form['container'] = array(
  '#type' => 'container',
  '#attributes' => array('class' => array('your-class')),
);
$form['container']['foo'] = array(
  '#type' => 'textfield',
  '#title' => 'Foo',
);

Bây giờ, điều này sẽ hiển thị trường văn bản mẫu (và nhãn của nó) bên trong phần tử DIV có lớp của bạn, tức là bạn có thể tạo kiểu cho nhãn của mình:

.your-class label {
  /* your CSS here */
}

Có một số tùy chọn để làm điều này trong Drupal> = 8.0.0. Tất cả đều thực sự xoay quanh các phần ghi đè mẫu trong một chủ đề, nhưng một mô-đun sẽ có thể thực hiện các móc tiền xử lý mẫu được xác định bởi các mô-đun khác

1. Tùy chọn đơn giản nhất, nhưng không động là ghi đè trực tiếp biểu mẫu-phần tử-nhãn.html.twig . Điều này có thể hoạt động nếu tất cả các nhãn sẽ nhận được form-controllớp.
2. Theo các dòng này, việc triển khai template_pre process_form_element_label sẽ cho phép bạn thực hiện điều tương tự và thêm form-controllớp vào các thuộc tính mà không ghi đè lên mẫu.
3. Bạn cũng có thể triển khai template_pre process_form_element và thêm logic để không ghi đè $variables['label'], nhưng lấy giá trị của nó từ một số khóa được xác định trên mảng phần tử biểu mẫu.

Đối với các nút gửi, chúng tôi có thể thêm lớp như dưới đây:

$ form ['hành động'] ['submit'] ['# thuộc tính'] ['class'] [] = 'use-ajax-submit';

Tùy chọn sạch nhất tôi tìm thấy là theo đề xuất số 3 của @ mradcliffe ở trên. Ví dụ: trong định nghĩa biểu mẫu của bạn -

$form['distance'] = [
        '#type' => 'select',
        '#title' => 'Distance',
        '#required' => true,
        '#options' => [
            '10' => '10 Miles',
            '25' => '25 Miles',
            '50' => '50 Miles',
            '100' => '100 Miles'
        ],
        '#label_classes' => [
            'some-label-class'
        ]
    ];

Sau đó, trong một mô-đun tùy chỉnh triển khai hook_pre process_form_element:

/**
* Implementation of hook_preprocess_form_element
* @param $variables
*/
function your_module_preprocess_form_element(&$variables)
{
    if(isset($variables['element']['#label_classes'])) {
        $variables['label']['#attributes']['class'] = $variables['element']['#label_classes'];
    }
}

Lưu ý điều này sẽ ghi đè bất kỳ lớp nhãn nào mà Drupal muốn thêm. Trong trường hợp của tôi đó là tốt. Mã ở trên có thể được thay đổi để ngăn chặn điều này nếu cần thiết.

Để hoàn thành câu trả lời @Nate, nếu bạn muốn thêm các lớp luận đề vào một biểu mẫu hiện có, bạn có thể thực hiện nó trong hook_form_alter:

function your_module_form_alter(&$form, FormStateInterface &$form_state, $form_id)
{
    // for a textfield
    $form['distance']['widget'][0]['value']['#label_classes'] = ['some-label-class'];
    // for a radio field
    $form['country']['widget']['#label_classes'] = ['some-label-class'];
}

Và sau đó sử dụng hook_pre process_form_element cho trường văn bản hoặc hook_pre process_fieldset cho trường radio:

/**
 * Implements hook_preprocess_hook().
 */
function your_module_preprocess_fieldset(&$variables)
{
  if(isset($variables['element']['#label_classes'])) {
    foreach ($variables['element']['#label_classes'] as $class) {
      $variables['legend']['attributes']->addClass($class);
    }
  }
}