<form onsubmit="alert(JSON.stringify([...new FormData(this)]));return false">

	<h1>required mono-selection</h1>
	<table>
		<thead>
			<th></th>
			<th>mono-selection</th>
		</thead>
		<tbody>
			<tr>
				<td><input type=radio name=radio value=radio1 required></td>
				<td>radio1</td>
			</tr>
			<tr>
				<td><input type=radio name=radio value=radio2 required></td>
				<td>radio2</td>
			</tr>
			<tr>
				<td><input type=radio name=radio value=radio3 required></td>
				<td>radio3</td>
			</tr>
		</tbody>
	</table>

	<footer class=if-valid>
		<button name=do value=delete>You got me !</button>
	</footer>

	<h1>optional multichoice</h1>
	<table>
		<thead>
			<th><input type=checkbox
					onclick="[...closest('table').querySelectorAll('tbody [type=checkbox]')].forEach(box=>box.checked=checked)">
			</th>
			<th>title</th>
		</thead>
		<tbody>
			<tr>
				<td><input type=checkbox name=chk value=chk1></td>
				<td>chk1</td>
			</tr>
			<tr>
				<td><input type=checkbox name=chk value=chk2></td>
				<td>chk2</td>
			</tr>
			<tr>
				<td><input type=checkbox name=chk value=chk3></td>
				<td>chk3</td>
			</tr>
		</tbody>
	</table>

	<footer>
		<button name=do value=move>I'll always be here</button>
	</footer>
</form>

table {
	border-collapse: collapse;
}

tr {
	/* github.com/w3c/csswg-drafts/issues/1899 */
	transform: scale(1);
	position: relative;
}

td {
	border-top: 1px solid grey;
	border-bottom: 1px solid grey;
}

:invalid .if-valid{
	display: none;
}
/* Moz hack to enable :before on radio
input[type=radio]{appearance: none;}
input[type=radio]::before{content: '⚪';}
input[type=radio]:checked::before{content: '🔘';padding: 3px 5px;}
*/
:checked::before {
	/* add a background (webkit only)*/
	content: ' ';
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: yellow;
	opacity: .5;
	z-index: -1;
}