Tab order for php-based elements in a form

Question

I currently have a form that has a few elements that are php-based. In the form, these php-based elements are skipped over when I tab through the form. How do I set the tab order for a php-based element in a form?

Here is a subset of the code. I want the tab order of billing country to be 13 (in between zip and phone).

<div class="controls"><input placeholder="Zip Code" name="billing_zip"  tabindex="12"  type="text" class="medium" id="billing_zip" value="<?php echo $order['billing']['zip']; ?>" /></div>
<div class="controls"><?php echo country_box($order['billing']['country'], "billing_country"); //echo Html::state_box($order['billing']['state'], 'billing_state', 'state custom mini', array('display' => 'abbrev', 'display_case' => 'upper', 'optional' => true));?></div>
<div class="controls"><input placeholder="Phone" name="billing_phone"  tabindex="14"  type="text" id="billing_phone" value="<?php echo $order['billing']['phone']; ?>"/></div>

Answer 1

To really do this properly, you should be generating all of this HTML using a PHP script or function. However, if that is not possible or is too much trouble, you can at least use PHP to keep track of the tab index, and using a PHP variable like $tab_index to echo and increment like tab_index++; . An example:

<?php
$tab_index = 1;
?>
<input ... name='zip' tabindex='<?php echo $tab_index; $tab_index++; ?> type='text' />
<input ... name='country' tabindex='<?php echo $tab_index; $tab_index++; ?> type='text' />
<input ... name='phone' tabindex='<?php echo $tab_index; $tab_index++; ?> type='text' />

With each ++ , the tabindex will be updated and the next one correctly shown as incremented.