时间戳

首页 > 解决方案 > 将表单转换为只读布局

html - 将表单转换为只读布局

问题描述

我正在尝试为个人资料页面创建布局。

当用户正在编辑他的个人资料时，我想显示一个来自 Bootstrap 库的表单，例如：https ://getbootstrap.com/docs/4.4/components/forms/#form-row 。当用户完成编辑后，我想将表单转换为只读布局，方法是将输入字段替换为已输入的文本。

我在 bootsnipp 上找到了一个示例：https ://bootsnipp.com/snippets/QoM7g （例如，选项卡“Education&Career”）。但是在查看代码时，我注意到这个布局是使用 form-group 类构建的，并且将输入字段替换为段落字段。

有更清洁的解决方案吗？我无法想象这就是这种布局的写法？

标签： htmlcssbootstrap-4

解决方案

如果您想将表单中的元素设置为纯文本样式，请使用 .form-control-plaintext 类删除默认表单字段样式并保留正确的边距和填充。

例如：

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword">
    </div>
  </div>
</form>

参考这个：https ://getbootstrap.com/docs/4.4/components/forms/#readonly-plain-text

推荐阅读