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

<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

您的第二个示例无效，您不能将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 角色。

我相信这个案例的合适角色是网格

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

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

* 不幸的是，没有与键值列表等效的角色，否则我建议使用它。

于 2013-10-11T13:30:13.697 回答