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

The answer is to use CSS with the html that you already have. It looks like you just want to change the radio buttons' display to 'inline' with 10px margins, which you can do. (And if you did break the radios up into separate elements within a fieldset, they'd no longer interact with each other.)

Answer 2

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