Преобразование формы в макет только для чтения

Question

Я пытаюсь создать макет для страницы профиля.

Когда пользователь редактирует свой профиль, я хочу отобразить такую ​​форму из библиотеки Bootstrap: https://getbootstrap.com/docs/4.4/components/forms/#form -row . Когда пользователь закончит редактирование, я хочу преобразовать форму в макет только для чтения, заменив поля ввода текстом, который был введен.

Я нашел пример в bootsnipp: https://bootsnipp.com/snippets/QoM7g (вкладка «Образование и карьера», например). Но, глядя на код, я заметил, что этот макет был создан с использованием класса группы форм и путем замены поля ввода полем абзаца.

Есть ли более чистое решение? Я не могу себе представить, как этот вид макета должен быть написан?

Answer 1

Нет необходимости заменять поля. Вы можете просто оформить их так, чтобы они выглядели как текст: скрыть границу и контур, сделать его доступным только для чтения, сделать фон таким же, как внешний фон.

Пример:

    <input value="Regular input" />
    <br>
    <input class="like-text" value="I look like a text" readonly />

    .like-text {
      border: none;
      outline: none;
    }

https://jsfiddle.net/z879pbcn/

Answer 2

Я бы сделал что-то вроде этого.

Добавьте набор полей с отключенным атрибутом, все элементы формы будут отключены.

Теперь добавьте стиль к элементам form-control по умолчанию, чтобы он выглядел как текст.

Пример ниже

fieldset[disabled] .form-control {
  color:red;
  border: none;
  background-color:inherit;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="p-3">
  <form>
    <fieldset disabled>
      <input class="form-control" type='text' value='John' />
      <input class="form-control" type='text' value='John' />
      <input class="form-control" type='text' value='John' />
      <input class="form-control" type='text' value='John' />
    </fieldset>
  </form>
</div>

Answer 3

Если вы хотите, чтобы элементы в вашей форме были стилизованы как простой текст, используйте класс .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