Make radio buttons mutually exclusive when not contained in the same form element?

Question

I'm making a calendar where each day has a radio button that allows you to select it. I want users to only be able to select one day. The issue I'm having is I've made the calendar as a table so each <td> has the following:

<td>
  <form>
    Mon 18
    <input type="radio" name="day" value="mon18" />
  </form>
</td>

So as all the radio buttons aren't contained in one form element, the normal behaviour that makes the selection mutually exclusive isn't occurring. If I create 1 form element around all my mark up then the table will be contained in it, would this be semantically correct?

Is there a semantically correct solution to my problem? I guess I could do it with javascript and server side validation.

Answer 1

It is perfectly semantically correct to have the form enclosing your table, that's actually the only sensible way to build your radiobutton-based calendar with mutually exclusive selection!

The following code does validate:

<form>
    <table>
        <tr>
            <td><input type="radio" name="day" value="1"></td>
            <td><input type="radio" name="day" value="2"></td>
            ...
        </tr>
    </table>
</form>