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元素。

理想情况下,您可以按原样使用dldtdd元素,使用 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 回答