Question

我在我的应用程序中使用了很多表单，并希望为各种情况提供通用的标记（和格式化）方案。同样重要的是，这些表单可以包含“只读”数据，因此只有文本，而不是某些表单控件。

为了解决这个问题，我想到了定义列表，并将它们与我的表单元素结合起来，如下所示：

<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>作为外层。然而，这会创建很多单个列表，只包含一个项目，但会为我节省一些标记：

<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？或者是否有更好的选项来表达包含可编辑元素和“只读”元素的混合形式？对我来说重要的是解决方案使用或多或少相同的布局和标记，并且从语义角度来看仍然有意义。

Answer 1

您的第二个示例无效，您不能将div元素作为dl元素的直接子元素。

理想情况下，您可以按原样使用dl，dt和dd元素，使用flexbox来对齐元素，但不幸的是，flexbox不是浏览器兼容性足以让我推荐它作为解决方案（但是，给它3 - 5年）。

如果您要使用<dl>元素，则应将其保留为一个一致的列表，因为这些项目属于同一列表的一部分：

<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 roles。

我认为此案件的适当角色是grid

<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 <table> *类似的语义，同时还为您提供CSS中<div>元素的灵活性。

重要的是要记住<label>和<input>元素将在语义上相互链接，因此即使没有ARIA角色，也可以理解表单字段是成对的。

_{*不幸的是，没有相当于键值列表的角色，否则我建议使用那个。}

使用定义列表和表单

1 个答案: