如何标记标签和值列表，其中一些是可编辑的？

Question

在我们的应用程序中，有几个页面，用户可以在其中看到某物的属性列表，其中一些是他们可以编辑的。这些页面通常有一个 header，然后是标签和值的列表。前几个不可编辑；通常这些是元数据或 name/id 之类的东西，只有系统管理员才能更改。

最好的标记方法是什么？

我马上想到的几个想法是只使用一个表单并将 read-only 值设置为 read-only 字段：

<h1>Title of the page</h1>
<form action="whatever" method="whatever">
  <div class="form-group">
    <label for="readonly-1" class="control-label">Event name</label>
    <input id="readonly-1" type="text" readonly class="form-control" value="HTML Party">
  </div>
  <div class="form-group">
    <label for="readonly-2" class="control-label">Created by</label>
    <input type="text" id="readonly-2" readonly value="Nate Green">
  </div>
  <div class="form-group">
    <label for="editable-1" class="control-label">Event date</label>
    <input type="date" id="editable-1" class="form-control">
  </div>
  <div class="form-group">
    <label for="editable-2" class="control-label">Location</label>
    <select multiple type="date" id="editable-2" class="form-control">
      <option selected value="CLE">Cleveland</option>
      <option value="NYC">New York City</option>
      <option value="ORD">Chicago</option>
    </select>
  </div>
</form>

...但如果可以的话，我真的不想像表单字段那样拥有所有 read-only 值 look/act。（也许是最好的方法，现在我只需要按照我想要的方式使用 CSS 来设置它们的样式？）

我也想过把它标记为一个定义列表，像这样：

<h1>Title of the page</h1>
<dl>
  <dt>Event name</dt>
  <dd>HTML Party</dd>
  <dt>Created by</dt>
  <dd>Nate Green</dd>
</dl>
<form action="whatever" method="whatever">
  <div class="form-group">
    <label for="editable-1" class="control-label">Event date</label>
    <input type="date" id="editable-1" class="form-control">
  </div>
  <div class="form-group">
    <label for="editable-2" class="control-label">Location</label>
    <select multiple type="date" id="editable-2" class="form-control">
      <option selected value="CLE">Cleveland</option>
      <option value="NYC">New York City</option>
      <option value="ORD">Chicago</option>
    </select>
  </div>
</form>

但是，我认为我们不能有把握地说永远不会有 read-only 值介于两个可编辑的值之间，而且拥有一个<dl> 元素只有一对 <dt> 和 <dd>s.

肯定有人以前解决过这样的问题。您建议我们如何解决这个问题？

Answer 1

将值放在只读字段中在语义上并没有错。 <dd> 和 <dt> 不是用于此目的，因为您可以毫无问题地使用它，它们不是术语定义组合。

您可以对只读输入进行样式化以使其像文本一样显示，您将通过纯 CSS:

实现这一点

input[readonly] {
  border:0;
  background: transparent;
  box-shadow: 0 0 0 ;
  padding: 0;
  /* for mobile! */
  -webkit-appearance: none;
  -moz-appearance: none;
}

<input value="This is editable">
<br>
<input value="this is readonly" readonly>

通过这种方法，您不必更改 HTML 标记，只需在需要时添加 readonly 属性。

如何标记标签和值列表，其中一些是可编辑的？

How do I mark up a list of labels and values, some of which are editable?

html

twitter-bootstrap

semantic-markup