Alterar classe no wrapper div de um elemento do formulário

Existe uma maneira de adicionar ou alterar uma classe para um wrapper de formulário (a div) usando a API do formulário?

Ou isso acabou de ser feito com a função de tema?

Em caso afirmativo, qual função do tema é usada para mudar isso?

Você pode substituir theme_form_element()normalmente se quiser alterar o tema globalmente. Se você estiver interessado em modificar apenas um elemento de formulário específico, conheço algumas opções.

1. Você pode registrar uma nova função de tema para o tipo específico de elemento de formulário no qual está interessado (por exemplo, campo de texto). Em seguida, você cria esta função de tema (com base no original, por exemplo. theme_textfield()), Mas isso não é chamado theme('form_element', ...)no final (você pode manipular o wrapper e o elemento na função de um tema ou criar uma função de tema de wrapper separada e use isso). Finalmente, você adiciona uma #themepropriedade a um elemento de formulário específico, e esse elemento obtém seu tema personalizado.

2. Você pode criar um arquivo de modelo chamado form_element.tpl.phpque apenas possui o comportamento padrão theme_form_element()e, em seguida, usá-lo hook_preprocess_form_element()para adicionar uma sugestão de modelo. Em seguida, você cria o novo modelo que corresponde à sugestão. Você costuma ouvir pessoas mencionando que os modelos são um pouco mais lentos que as funções e, para uma chamada de tema usada com frequência, posso imaginar pessoas se recusando a usar um modelo. Eu nunca fiz nenhuma medida para isso sozinho, no entanto. Além disso, você precisa ter contexto suficiente no estágio de pré-processo para poder fazer a sugestão.

Eu sei que esse é um tópico super antigo, mas eu tenho aprendido como alterar elementos de formulário e adicionar classes. Eu comecei a criar um módulo personalizado:

function yourtheme_custom_form_alter(&$form, &$form_state, $form_id) {
 case'webform_number_whatever':
   _yourtheme_form_add_wrapper($form['submitted']['yourfieldhere'], array('form-field-some-style', 'not-label', 'whatever-other-styles-you-want'));
 break;
}

function _yourtheme_form_add_wrapper(&$element, $classes = array(), $type = array('form-item', 'form-type-textfield'), $removeTitle = FALSE){
  $element['#prefix'] = '<div class="' . implode(" ", $classes) . '"><div class="' . implode(" ", $type) . '">';
  $element['#suffix'] = '</div></div>';
}

Para alterar o "invólucro", você precisa substituir form_element. Basicamente, todos os elementos do formulário são renderizados com o tema theme_form_element($element,$value);form_element (arquivo form.inc)

Então, para alterar como isso renderiza seus elementos de formulário, basta copiar essa função para a pasta template.php e renomeá-la para: phptemplate_form_element($element,$value)

agora você pode fazer alterações e elas serão usadas no lugar da função original

1. Copiar theme_form_element($element,$value);de form.inc
2. Cole-o no (seu tema) template.php
3. renomeie-o para: phptemplate_form_element($element,$value)
4. limpe todo o cache do tema
5. faça as alterações desejadas e elas serão usadas.

Você pode usar a propriedade wrapper_attributes .

$form['example'] = [
  '#type' => 'textfield',
  '#title' => $this->t('Example'),
  '#wrapper_attributes' => ['class' => ['wrapper-class']],
];

Importante, theme_form_element modifica apenas a div do wrapper pai direto e esse pode não ser o destino pretendido para os efeitos CSS.

[Embora não seja programático, se alguém simplesmente deseja aplicar uma classe ao invólucro superior de um campo de nó (é invólucro, invólucro, invólucro), posso supor que use o módulo "Grupo de campos" selecionando "Gerenciar campos" para um tipo de conteúdo específico e selecione "Adicionar novo grupo" como um DIV simples. Em seguida, o rótulo pode ser removido e as classes desejadas atribuídas ao wrapper adicional (mas agora temos ainda mais wrappers) - com aninhamento ilimitado]

Você poderia usar

'#prefix' => '<div class="new_class">', '#suffix' => '</div>'

e isso vai envolvê-lo

Torne os atributos do wrapper configuráveis!

Crie sua própria função de tema de elemento de formulário no seu tema ... sites/all/themes/MY_THEME/theme/form-element.theme.inc

function my_theme_form_element($variables) {
  $element = &$variables['element'];

  $attributes = isset($element['#my_theme_wrapper_attributes']) ?
    $element['#my_theme_wrapper_attributes'] : array();

  ...

  $output = '<div' . drupal_attributes($attributes) . '>' . "\n";

  ...
}

Então você pode fazer coisas assim ...

function my_module_form_alter(&$form, &$form_state, $form_id) {
  $form['account']['mail']['#my_theme_wrapper_attributes']['class'][] = 'form-field--inline';
}

Existem casos em que #prefix/#suffixnem #attributes => array('class')os resultados desejados nem são apresentados. Meu caso particular é adicionar uma classe ao div do ajax-wrapper em torno de um elemento managed_file. #prefix/#suffixcria um novo contêiner e #attributes/'class'modifica a classe de um elemento interno, não o mais externo.

A div externa mais externa é apenas

<div id="edit-doc1--XX-ajax-wrapper">

que é difícil de segmentar em CSS. Eu posso segmentar [id^="edit-doc"]ou [id$="-ajax-wrapper"]mas ambos direcionam mais do que apenas os elementos que eu queria.

A solução que encontrei é adicionar um #processelemento ao formulário e manipular manualmente o código do elemento. Aqui está o #processatributo adicionado à declaração do item de formulário:

$form['doc1'] = array(
  '#type' => 'managed_file',
  '#process' => array('mymodule_managed_file_process'),
);

E aqui está a mymodule_managed_file_process()função:

function mymodule_managed_file_process($element, &$form_state, $form) {

  // Call the original function to perform its processing.
  $element = file_managed_file_process($element, $form_state, $form);

  // Add our own class for theming.
  $element['#prefix'] = str_replace(
    'id=',
    'class="managed-file-wrapper" id=',
    $element['#prefix']
  );

  return $element;
}

Confiar na substituição de cadeias não é muito portátil, portanto, use str_replacepor seu próprio risco. Esse código, no entanto, realmente altera o DIV mais externo para adicionar a classe necessária:

<div class="managed-file-wrapper" id="edit-doc1--XX-ajax-wrapper">

<?php
    $form['#attributes'] = array('class' => 'your-class-name');
?> 

Você pode usar a maneira acima para adicionar uma classe ao elemento do formulário.