我在我的应用程序中使用了很多表单,并且希望为各种情况提供一个通用的标记(和格式)方案。同样重要的是这些表单可以包含“只读”数据,以便只有文本,而不是某些表单控件。
为了解决这个问题,我想到了定义列表,并将它们与我的表单元素结合起来,如下所示:
<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?或者是否有更好的选择来表达包含可编辑元素和“只读”元素的混合表单?对我来说重要的是,该解决方案使用或多或少相同的布局和标记,并且从语义的角度来看仍然有意义。