Attempting to work on a unique project here, creating an HTML calendar that allows users to select a day and submit the form without relying on javascript. Below is a snippet of the HTML code:
<body>
<form action="/Controller/Select" method="post">
<table>
<tr>
<td>
<div class="day">
<div>30</div>
<div>
<input type="radio" name="selectedDay" id="selectedDay_2011_10_30" value="2011-10-30" />
<label for="selectedDay_2011_10_30">$1.00</label>
</div>
</div>
</td>
<td>
<div class="day">
<div>31</div>
<div>
<input type="radio" name="selectedDay" id="selectedDay_2011_10_31" value="2011-10-31" />
<label for="selectedDay_2011_10_31">$1.00</label>
</div>
</div>
</td>
<td>
<div class="day">
<div>1</div>
<div>
<input type="radio" name="selectedDay" id="selectedDay_2011_11_01" value="2011-11-01" />
<label for="selectedDay_2011_10_01">$1.00</label>
</div>
</div>
</td>
</tr>
</table>
</form>
</body>
The CSS style applied is as follows:
.day input {
display: none;
}
In my testing phase, I noticed that upon clicking the label associated with a radio button, no change occurred in the "checked" attribute of the input element. However, modifying the CSS to:
.day input {
display: inline-block;
}
Resolved the issue and now the radio button gets checked when the corresponding label is clicked. Any insights or suggestions on how to improve this implementation?