問題
「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>
一列増やして、縦長にしちゃえば、なんとかなります。
これでボーダーを消してしまえば・・・
見た目は、「cancel」が左に「next」が右にあるでしょ。