WebサイトのリニューアルプロジェクトでHTML/CSSコーディング・PowerCMS 6テンプレート設計に携わったのですが、フォーム項目テンプレートはよりよいマークアップがあるのでは？と考え始めました。フォーム項目作成時に表示される標準テンプレートを基にコーディングデータを合わせていくのですが、確認画面はlabel要素と紐付ける入力フィールドがなくなり単に入力値を表示することから、table要素で表示する方が妥当ではないかと思いました。
入力画面はdiv要素・input要素・label要素・fiedlset要素・legend要素等を使いマークアップをしています。入力フィールドのラベルが入力フィールドの左にあるからといってtable要素を使ってレイアウトをしなくても良いのかなと考えます。入力フィールドのラベルが入力フィールドの上にあったらtable要素は使わないですよね。見た目に引きづられてマークアップが変化するのはどうかなと思います。
それらを勘案して、1つのテキストフィールドに氏名を入力するという最もベーシックなフォーム項目のテンプレートを再考すると下記のようになりました。アクセシビリティも考慮し、aria-describedbyでエラーメッセージと入力フィールドを紐付けることも行っています。（「エラーの発生とエラーの内容が特定できる | ウェブアクセシビリティ簡易チェックリスト | SmartHR Design System」等にまとめられていますね。）
<mt:var name="field_name" regex_replace="/^Bootstrap:/","" setvar="field_name">
<mt:setvar name="display_description" value="0" />
<mt:unless name="field_mode">
<mt:setvar name="display_description" value="1" />
</mt:unless>
<mt:if name="field_error">
<mt:setvar name="display_description" value="1" />
</mt:if>
<mt:if name="confirm_ok">
<tr>
<th><mt:var name="field_name" escape="html" /></th>
<td><mt:var name="field_value" escape="html" /><input type="hidden" name="<mt:var name="field_basename" />" value="<mt:var name="field_value" escape="html">" /></td>
</tr>
<mt:else>
<div class="p-form__item">
<div class="p-form__labelContainer">
<label for="<mt:var name="field_basename" />" class="p-form__label"><mt:var name="field_name" escape="html" /><mt:if name="field_required"><strong class="p-form__required"><mt:trans phrase="*Required" component="ContactForm" /></strong></mt:if></label>
</div>
<div class="p-form__fieldContainer">
<mt:setvar name="aria_describedby_ids" value="" />
<mt:if name="field_error"><mt:setvarblock name="aria_describedby_ids" function="push"><mt:var name="field_basename" />_error</mt:setvarblock></mt:if>
<mt:if name="display_description"><mt:if name="field_description"><mt:setvarblock name="aria_describedby_ids" function="push"><mt:var name="field_basename" />_description</mt:setvarblock></mt:if></mt:if>
<mt:if name="field_error">
<mt:if name="field_error" eq="invalid">
<p id="<mt:var name="field_basename" />_error" class="p-form__errorMessage"><mt:trans phrase="Invalid '[_1]'." component="ContactForm" params="$field_name" /></p>
<mt:elseif name="field_error" eq="over_limit">
<p id="<mt:var name="field_basename" />_error" class="p-form__errorMessage"><mt:trans phrase="Input exceeds the limit number of characters'[_1]'." component="ContactForm" params="$field_name" /></p>
<mt:else>
<p id="<mt:var name="field_basename" />_error" class="p-form__errorMessage"><mt:trans phrase="'[_1]' is required." component="ContactForm" params="$field_name" /></p>
</mt:if>
</mt:if>
<input type="text" name="<mt:var name="field_basename">" id="<mt:var name="field_basename" />"<mt:if name="field_required"> required</mt:if> value="<mt:var name="field_raw" escape="html" />"<mt:if name="field_error"> aria-invalid="true"</mt:if><mt:if name="aria_describedby_ids"> aria-describedby="<mt:loop name="aria_describedby_ids" glue=" "><mt:var name="__value__" /></mt:loop>"</mt:if>>
<mt:if name="display_description">
<mt:if name="field_description"><p id="<mt:var name="field_basename" />_description" class="p-form__description"><mt:var name="field_description" /></p></mt:if>
</mt:if>
</div>
</div>
</mt:if>結果、入力画面のHTMLは下記のように出力されます。（送信ボタンは掲載省略）
<div class="p-form">
<div class="p-form__item">
<div class="p-form__labelContainer">
<label for="bootstrap_name" class="p-form__label">お名前<strong class="p-form__required">※必須</strong></label>
</div>
<div class="p-form__fieldContainer">
<p id="bootstrap_name_error" class="p-form__errorMessage">'お名前'の入力文字数制限を超えています。</p>
<input type="text" name="bootstrap_name" id="bootstrap_name" required value="寿限無、寿限無、五劫の擦り切れ" aria-invalid="true" aria-describedby="bootstrap_name_error bootstrap_name_description" />
<p id="bootstrap_name_description" class="p-form__description">フルネームでご記入ください。</p>
</div>
</div>
</div>また、確認画面のHTMLは下記のように出力されます。（送信ボタンは掲載省略）
<table class="p-formConfirm">
<tr>
<th>お名前</th>
<td>寿限無<input type="hidden" name="bootstrap_name" value="寿限無" /></td>
</tr>
</table>なお、このフォーム項目テンプレートを使用するにはaddons/ContactForm.pack/tmpl/module_mtml.tmplの代替テンプレートを作成し、確認画面ではフォーム項目のラッパーがdiv要素がtable要素になるようにカスタマイズする必要があります。