Styling individual radio buttons in drupal form

Question

I have this group of radio buttons in which each of individual button has of its own position set through style attribute. I would like to how can I archive the same by using drupal form api. I found how to style as whole but, not as individual control within group. Here's how my html code look like -

<input type="radio" name="base_location" checked="checked" value="0" style="margin-left:70px;float:left;"/><span style="float:left;">District</span>
  <input type="radio" name="base_location" value="1" style="margin-left:50px;float:left;"/><span style="float:left;">MRT</span>
  <input type="radio" name="base_location" value="2" style="margin-left:60px;float:left;"/><span style="float:left;">Address</span>

And this is the drupal code I'm stuck at -

$form['base_location'] = array(
   '#type' => 'radios',
   '#title' => t('base location'),
   '#default_value' => variable_get('search_type', 0),
   '#options' => array(
'0'=>t('District'),
'1'=>t('MRT'),
'2'=>t('Address')),
   '#description' => t('base location'),

I'm aware of #type=>radio existence. However, I do not know how to group all my radio buttons together in this regard. If I use same array key for all of them, they would collide each other. If I don't, they aren't seen as part of the same group. I thank you in advance.

Answer 1

If you're using Drupal 6.x Form API and #type=>radios (http://api.drupal.org/api/function/theme_radios/6) each radio element will have its unique id which you can use to apply proper CSS.

The example you provided

$form['base_location'] = array(
  '#type' => 'radios',
  '#title' => t('base location'),
  '#default_value' => variable_get('search_type', 0),
  '#options' => array(
  '0'=>t('District'),
  '1'=>t('MRT'),
  '2'=>t('Address')),
  '#description' => t('base location'),
);

should output markup like so:

<div id="base-location-0-wrapper" class="form-item">
  <label for="base-location-0" class="option"><input type="radio" class="form-radio" value="0" name="base_location" id="base-location-0"> District</label>
</div>
<div id="base-location-1-wrapper" class="form-item">
  <label for="base-location-1" class="option"><input type="radio" class="form-radio" value="1" name="base_location" id="base-location-1"> MRT</label>
</div>
<div id="base-location-2-wrapper" class="form-item">
  <label for="base-location-2" class="option"><input type="radio" class="form-radio" value="2" name="base_location" id="base-location-2"> Address</label>
</div>

Apply the following CSS and you should be set.

  #base-location-0-wrapper,
  #base-location-1-wrapper,
  #base-location-2-wrapper {
    display:inline;
    margin-left:50px;
  }