While working on my website, I encountered an issue with a form that requires the user to input their name, email, gender, and date of birth. I utilized label for="" to ensure the CSS aligns accurately in each section.
<form>
<table>
<tr>
<td><label for="Email">Please enter e-mail:</label></td>
<td><input id="email" type="text" name="email" title="email address" align="right" size="40"/></td>
</tr>
<tr>
<td><label for="Name">Please enter your full name:</label></td>
<td><input id="name" type="text" name="name" title="name" align="right" size="40"/></td>
</tr>
<tr>
<td><label for="DOB">Please enter your date of birth</label></td>
<td><input id="DOB" type="date" name="DOB" title="DOB" align="right"/></td>
</tr>
<tr>
<td><label for="gender">Please select your gender</label></td>
<td><input id="male" type="radio" name="male" title="male"/>Male<td><input id="female" type="radio" name="female" title="female"/>Female</td>
</tr>
<tr>
<td>
<label for="submit"><input type ="submit" value="Submit"></label>
</td>
</tr>
</table>
</form>
My current CSS for labels is:
label {
margin-left:400px;
}
However, I am facing spacing issues with the radio buttons as they are too far apart. Despite my efforts, I can't seem to adjust them closer together. You can view the radio button alignment issue in this image.
If the image does not display properly, you can access it here: