How do I theme a form element?

Question

I was able to theme the form. Now I want to put a submission button into a <div>, but I can't theme the submission button.

This code worked for the form.

print "text text text";
print drupal_render_children($variables["form"]);

Here is the code I used to theme the submission button.

$form['submit'] = array(
  '#type' => 'submit',
  '#value' => t('Submit'),
  '#attributes' => array('style' => "padding: 0 10px;"),
  '#theme' => "submit",
);

function scores_theme($existing, $type, $theme, $path) {
  $path = drupal_get_path('module', 'scores');
  return array(
    'submit' => array(
      'render element' => 'submit',
      'template' => 'submit',
      'path' => $path,
    ),
  );
}

What should I put into submit.tpl.php? Any of these doesn't work.

print drupal_render_children($submit);

print drupal_render($variables['submit']);

print drupal_render($submit);

Answer 1

You should be able to wrap form elements with #prefix and #suffix:

$form['submit'] = array(
  '#type' => 'submit',
  '#value' => t('Submit'),
  '#attributes' => array('style' => "padding: 0 10px;"),
  '#theme' => "submit",
  '#prefix' => "<div class='submit-button-custom'>",
  '#suffix' => "</div>",
);

Answer 2

And, if you're using a horizontal form it REALLY gets outta whack if you don't include one more key field in the prefix/suffix...

So, do this... for horiz. type forms (typically ones that are floated left, with a submit at the end.. ):

instead of just this...

...
'#prefix' => "<div class='submit-button-custom'>",
'#suffix' => "</div>",
...

Do this...

...
'#prefix' => "<div class='submit-button-custom'>
              <label for=op>&nbsp;<label>",
'#suffix' => "</div>",
...

Where 'op' is the 'name' attribute (in this case) of your supposed submit button.

Hope this helps.

Answer 3

function YOUR_THEME_form_FORM_ID_alter(&$form, &$form_state) {
      $form['submit']['#prefix'] = '<div class="scores-submit-btn">';
      $form['submit']['#sufix'] = '</div>';
}

Answer 4

As each Drupal form has a submit button, if you want to style the submit button you can achieve it in 2 way by using #prefix and #suffix form properties. #prefix and #suffix will wrap the form element into a given HTML tag.

In a custom form, use the following.

$form['submit'] = array(
  '#type' => 'submit',
  '#value' => t('Submit'),
  '#prefix' => "<div class='scores-submit-btn'>",
  '#suffix' => "</div>",
);

In a form created by another module, you can use hook_form_alte() to add the form elements.

function hook_form_alter(&$form, &$form_state, $form_id) {
  switch ($form_id) {
    case 'FORM_ID':
      $form['submit']['#prefix'] = "<div class='scores-submit-btn'>";
      $form['submit']['#sufix'] = "</div>";
      break;
  }
}

In a CSS file, just give the style you want.

.scores-submit-btn {
  padding: 0 10px;
}

Answer 5

As you want to add span on below form mentioned on https://drupal.stackexchange.com/questions/100442/how-to-change-or-alter-the-html-code-generated-by-drupal-7-form-element].

You can use this

$form['item_name'] = array(
      '#title' => '<span>Pin Number</span>',
          '#type' => 'password',
      '#size' => 35,
          '#maxlength' => 40,
          '#required' => TRUE,
    );