My usual method of styling forms involves organizing elements like this:
<label for="CompanyNameTextBox">
<span>Company</span>
<input name="CompanyNameTextBox" type="text" id="CompanyNameTextBox" />
</label>
This setup allows me to apply CSS styling as follows:
.input[type=text] span
{
display: inline-block;
width: 200px;
}
Resulting in a visually pleasing layout with labels positioned next to form elements. This approach has worked well for all my form fields so far.
However, I recently encountered an issue with the "Credit Card Expiry Date" field.
In this case, I need to include two select lists within a single label:
<label>
<span>Expiry Date</span>
<select name="ExpiryDateMonthDropDownList" id="ExpiryDateMonthDropDownList">
...
</select>
<select name="ExpiryDateYearDropDownList" id="ExpiryDateYearDropDownList">
...
</select>
</label>
Surprisingly, when trying to select the second (Year) dropdown, it always defaults back to selecting the first (Month), even without specifying a for attribute on the label.
Therefore, my question is how should I proceed? Should I rethink my form structure, maybe by not placing the input inside the label? Or should I resort to a workaround such as nesting the second select list within its own label?