如何制作可编辑的引导 html 表单答案

【问题标题】：How to make an editable bootstrap html form如何制作可编辑的引导 html 表单
【发布时间】：2018-01-09 21:45:12
【问题描述】：

我正在使用引导程序制作一个 html 表单。该表单将显示我存储在服务器端的一些个人用户详细信息。我希望用户能够查看他们的详细信息并根据需要进行编辑。

这是我的基本形式。它有两个字段，名称和邮政编码，它们都被禁用。它有两个按钮，编辑和保存，保存按钮是隐藏的。

<form class="form-horizontal">
  <div class="form-group">
    <label for="name" class="col-sm-2 control-label">Name</label>
    <div class="col-sm-10">
      <input class="form-control" id="name" disabled>
    </div>
  </div>
  <div class="form-group">
    <label for="postcode" class="col-sm-2 control-label">Postcode</label>
    <div class="col-sm-10">
      <input class="form-control" id="postcode" disabled>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default" id="save" hidden>Save</button>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="edit" class="btn btn-default" id="edit">Edit</button>
    </div>
  </div>
</form>

当用户点击我想要的编辑按钮时：

启用名称和邮政编码字段
取消隐藏“保存”按钮
隐藏“编辑”按钮

实现这一目标的最佳方法是什么？有我应该使用的 javascript 库吗？或者是定制功能？

另外，这通常是正确的方法吗？令我惊讶的是，我发现的“可编辑”html 表单的示例很少（即那些以禁用状态开始，然后通过编辑按钮启用的示例）。我认为 bootstrap 可能会提供开箱即用的功能，但找不到任何东西。

【问题讨论】：

每个表单都是可编辑的。我不明白你想要完成什么。启用、隐藏和取消隐藏控件是标准 JS。
如上所述，如果用户点击编辑按钮，表单应该开始禁用并启用。
就像我说的，禁用和启用控件是通过 JS 或 HTML 属性完成的。谷歌“禁用表单控件 html”。这已经成为网络的一部分很长时间了。
特别是查看disable属性，并使用JS设置或取消设置该属性。隐藏同样的事情，这相当于将其 CSS 设置为{display: none;}。您可以使用库，但我强烈建议您先学习基础知识。

标签： javascript html css

【解决方案1】：

我在https://codepen.io/anon/pen/vpdQmL整理了一个小例子

底层html/javascript如下：

<button
  type="edit"
  class="btn btn-default"
  id="edit"
  onclick="return handleEdit()">

  Edit
</button>

function handleEdit() {
  document.getElementById('name').disabled = false;
  document.getElementById('postcode').disabled = false;
  document.getElementById('edit').hidden = true;
  document.getElementById('save').hidden = false;

  return false;
}

【讨论】：

【解决方案2】：

这里解释了如何启用和禁用文本字段： How to enable a disabled text field?

要显示和隐藏按钮，我会使用 display： https://www.w3schools.com/jsref/prop_style_display.asp 就像这里描述的： JavaScript style.display="none" or jQuery .hide() is more efficient?

除了编辑按钮还需要一个 onClick="changeForm()"

您需要一个 Javascript 方法 changeForm 来更改按钮的显示值并启用文本字段。

【讨论】：