如何为标签添加类？

8

我需要将类名称添加到由Drupal的表单API创建的某些标签中，如下所示：

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

如果使用以下内容，则<textarea>获取一个类，而不获取标签。

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

我正在寻找类似的东西，它将增加一个类<label>。

7 forms

— 肖恩
source

您还应该考虑是否还不能使用使用父容器类作为字段名称的CSS将该字段标签作为目标，例如.field-name-field-myfield label{ color:red; }

— David Thomas

6

您不能使用Form API的属性将类设置为form元素的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用于输入元素本身，因此正确的是，您的代码将myClass类添加到textarea。

— 阿耶什
source

7

关于StackOverflow的这篇文章说，Drupal Form API不支持向标签添加类，但是确实包含一个不错的解决方法：

相反，您可以使用该字段和标签的包装类来定位它：
.form-item-field-foo label {
  /* CSS here */
}

API文档theme_form_element_label（）展示了为什么无法使用标签（至少不能直接使用）：在主题函数中初始化了属性数组，并仅填充了两个可选类（“ option”和“ element”） -无形'）。

那么，这完全不可能吗？实际上，我认为可以做到，但是我必须补充一点，我自己还没有尝试过。您可以尝试：

在自定义模块中#label_attributes使用hook_element_info_alter（）将新属性添加到某些（或全部）表单元素中；
覆盖theme_form_element_label（）并使其$attributes与值合并$element['#label_attributes']。

如果您想尝试一下，请告诉我们是否可行。

— 马克万根
source

由于时间限制，我将寻求Ayesh K提出的更简单的解决方案。尽管这看起来是一个不错的解决方案，但可能会对其他人有所帮助。+1

— 肖恩

加1提及theme_form_element_label（）主题函数

— Ideogram

解决方法：如果在站点上要求JS是可以接受的，则调整DOM可能是最简单的。如果不是，则另一种（平均）方法是删除'#title'或设置'#title_display' => 'invisible'然后执行'#suffix' => '<label for="TheElementId" class="option">Display This Text</label>'。这导致它出现在<div>Drupal用于其形式输入元素的包装器的外部，但是CSS规则可以使它看起来没有什么不同。

— SeldomNeedy

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

— 尼古拉斯
source

2

在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',
  ]
]

— 活泼的
source

0

我找到了使用Fences D7模块完成此操作的相对简单的方法。该模块附带了许多模板文件以自定义字段。编辑您要为其提供唯一类的字段，并将包装器标记更改为与您相关的内容。之后，在模块中找到相应的模板文件，然后将其复制到您的site / 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
source

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>

— 表意文字
source