フォームを入れ子にできない問題

問題

「next」ボタンで、textという入力項目とともに/nextというにアドレスに飛ばし、「cancel」ボタンで/cancelというアドレスに飛ばすには、どのようにHTMLを書けばよいでしょうか? なお、ボーダー(テーブルの枠線)はなくてもよいものとします。




text:

問題点

入力欄とボタンの間に、別のところに飛ばしたいボタンがあります。ゆえに、どうやってフォームタグで囲もうか悩むことになります。

「next」を「cancel」の左側に持ってこれば記述できるのですが。

客の要望は、「cancel」を”左”に、「next」を”右”に!なのです。

誤答

<form action="/next">
<table>
	<tr>
		<td>text:</td>
		<td><input type="text" name="input"></td>
	</tr>
	<tr>
		<td>
			<form action="/cancel">
			<input type="submit" value="cancel">
			</form>
		</td>
		<td><input type="submit" value="next"></td>
	</tr>
</table>
</form>

フォームタグは入れ子にできません! 両方とも、/nextに飛びます。

正答?

<table>
	<form action="next">
		<tr>
			<td>text:</td>
			<td><input type="text" name="input"></td>
		</tr>
		<tr>
			<td></td>
			<td rowspan="2"><input type="submit" value="next"></td>
		</tr>
	</form>
		<tr>
			<td>
				<form action="cancel">
				<input type="submit" value="cancel">
				</form>
			</td>
		</tr>
</table>

一列増やして、縦長にしちゃえば、なんとかなります。

















text:




これでボーダーを消してしまえば・・・















text:




見た目は、「cancel」が左に「next」が右にあるでしょ。