OpenPNE 3

Navigation and Profile setting forms are invalid markup as HTML (ナビゲーション設定とプロフィール設定のフォームのマークアップが不正)

Overview¶

現在、次のようなマークアップがされています。

<table>
<tr>
<form action="edit">
<td><input name="value1" /></td>
<td><input name="value2" /></td>
<td><input name="value3" /></td>
<td><input type="submit" value="EDIT" /></td>
</form>
<td><form action="delete"><input type="submit" value="DELETE" /></form></td>
</tr>
</table>

テーブルを用いて、1行ごとに（セルをまたぐ）フォームを設置することは HTML4.01/XHTML1.0 の仕様ではできません（HTML5の仕様ではform関連要素が拡張され可能になっています）。
上記は構文妥当性に反したマークアップであり、仕様に忠実なUAでは次のように解釈されるかもしれません。

<table>
<tr>
</tr>
</table>
<form action="edit">
</form>
<td><input name="value1" /></td>
<td><input name="value2" /></td>
<td><input name="value3" /></td>
<td><input type="submit" value="EDIT" /></td>
</form>
<td><form action="delete"><input type="submit" value="DELETE" /></form></td>
</tr>
</table>

現状では、各種ブラウザのエラー補正機能によって、始めのような不正なマークアップであってもフォームが想定通りに動作していますが、この動作は保障されるものではありません。

Way to fix¶

現在のテーブルで1行ごとにフォームを設置する設計を維持したまま、妥当なマークアップにすることはできません。
本件の対応として、そもそも現在の設計がUI的に使いやすいものではないという考えのもと、抜本的に設計を変え、その上で妥当なマークアップに改善することを提案します。

UI的により使いやすい要素として、例えば複数の項目を同時に編集できたり、新規項目を一度に複数追加できるようにするといった実装が考えられます。