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

Question

在我们的应用程序中，有几个页面，用户可以在其中看到一些属性的列表，其中一些可以编辑。这些页面通常有一个标题，然后是标签和值的列表。前几个是不可编辑的，通常是元数据或名称/id，只有sysadmin才能更改。

什么是最好的方法来标记这个？

我现在有几个想法，就是使用一个表单并将只读值设置为只读字段：

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

如果我能帮上忙的话，...but我真的不想让所有的只读值看起来/行为像表单字段。(也许这是最好的方法，现在我只需按照我想要的方式使用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>

但是，我认为我们不能安全地说，两个可编辑的值之间永远不会有只读的值，而且只有一对<dt>和<dd>的<dt>元素也是错误的。

以前肯定有人解决过这样的问题。你建议我们怎么处理这件事？

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属性。