2

アプリで多くのフォームを使用しており、あらゆる種類のケースに共通のマークアップ (および書式設定) スキームを使用したいと考えています。これらのフォームに「読み取り専用」データを含めることができることも重要です。これにより、一部のフォーム コントロールではなく、テキストのみが存在します。

これを解決するために、定義リストを考え、それらをフォーム要素と組み合わせます。

<form>
    <fieldset>
        <legend>The Legend</legend>
        <dl>
            <dt><label for="changeable">Label A</label></dt>
            <dd><input id="changeable" value="This can be changed"></dd>
            <dt>Label B</dt>
            <dd>Readonly value</dd>
        </dl>
    </fieldset>
    <fieldset> ... more ... </fieldset>
    <menu><input type="submit"> ... other actions ...</menu>
</form>

したがって、大きな利点は、さまざまな種類のデータでマークアップが変わらないことです。意味的にも正しいようです。

ただし、フォーマット上の理由により、各ペアをレイヤーでラップする必要があります。だから私はこのようにすることができます：

<dl>
    <div class="wrapper">
       <dt><label for="changeable">Label A</label></dt>
       <dd><input id="changeable" value="This can be changed"></dd>
    </div>
    <div class="wrapper">
        <dt>Label B</dt>
        <dd>Readonly value</dd>
    </div>
</dl>

しかし、別のリストを使用して<dl>、外側のレイヤーとして使用することもできます。ただし、これにより、1 つの項目のみを含む単一のリストが多数作成されますが、マークアップを節約できます。

<dl>
   <dt><label for="changeable">Label A</label></dt>
   <dd><input id="changeable" value="This can be changed"></dd>
</dl>
<dl>
    <dt>Label B</dt>
    <dd>Readonly value</dd>
</dl>

問題は、これは理にかなっていて、まだ有効な HTML5 なのかということです。または、編集可能な要素と「読み取り専用」要素を含む混合フォームを表現するためのより良いオプションはありますか? ソリューションが多かれ少なかれ同じレイアウトとマークアップを使用し、それでもセマンティックの観点から理にかなっていることが重要です。

4

1 に答える 1

0

div2 番目の例は無効です。要素を要素の直接の子として持つことはできませんdl。

dl、dt、および要素をそのまま使用して、要素を整列させるために flexbox を使用できるのが理想的ですがdd、残念ながら、flexbox は、私が解決策として推奨するほどクロスブラウザーと互換性がありません (まだ 3- 5年）。

要素を使用する場合は<dl>、項目が同じリストの一部として一緒に属しているため、1 つの一貫したリストとして残す必要があります。

<dl>
  <dt>...</dt>
  <dd>...</dd>
  <dt>...</dt>
  <dd>...</dd>
  ...
</dl>

構造を次のように見ると：

<parent>
  <wrapper>
    <key>
    <value>
  </wrapper>
  <wrapper>
    <key>
    <value>
  </wrapper>
  ...
</parent>

私はすぐに使用することを考えます<table>：

<table>
  <tbody>
    <tr>
      <th scope="row">...</th>
      <td>...</td>
    </tr>
    <tr>
      <th scope="row">...</th>
      <td>...</td>
    </tr>
    ...
  </tbody>
</table>

しかし、それはデータが表形式であるためです。

テーブルという CSS の悪夢を回避したい場合は (そうすれば、私はあなたを責めません)、必要<div>な構造を生成するために要素に固執することをお勧めします。

<div class="fields">
  <div class="wrapper">
    <div class="key">...</div>
    <div class="value">...</div>
  </div>
  <div class="wrapper">
    <div class="key">...</div>
    <div class="value">...</div>
  </div>
  ...
</div>

<div>要素はそれ自体では意味を持たないため、これらの要素とともに意味を伝えることに関心がある場合は、ARIA の役割を追加することをお勧めします。

この場合の適切な役割はグリッドだと思います

<div role="grid">
  <div role="row">
    <div role="rowheader">...</div>
    <div role="gridcell">...</div>
  </div>
  <div role="row">
    <div role="rowheader">...</div>
    <div role="gridcell">...</div>
  </div>
  ...
</div>

これにより、HTML * と同様のセマンティクスが得られると同時に、CSS の要素<table>の柔軟性も得られます。<div>

<label>and<input>要素は意味的に相互にリンクすることを覚えておくことが重要です。そのため、ARIA ロールがなくても、フォーム フィールドがペアになっていることが理解されます。

* 残念ながら、キーと値のリストに相当する役割はありません。それ以外の場合は、代わりにそれを使用することをお勧めします。

于 2013-10-11T13:30:13.697 に答える