Изменение размера формы пользователем

Question

На сайте есть форма (по типу регистрации : введите меил, имя, зарегистрироваться и т.п.) в ней разные кнопки и инпуты. Нужно чтобы пользователь мог менять размеры самой формы , как бы растягивая ее. при наведении на края формы(углы) курсор меняет свой вид и позволяет растягивать форму. Подскажите, пожалуйста, как это реализовать? Чистый JS

Answer 1

Это возможно сделать без использования JS, для этого есть специальное свойство в CSS resize

Вот небольшой пример кода:

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.form {
  padding: 10px;
  height: 200px;
  width: 300px;
  border: 1px solid black;
  
  /* Вот сюда и добавляем */
  overflow: auto;
  resize: both;
}

.form label {
  display: block margin-bottom: 5px;
}

.form input {
  display: block;
}

<form class="form">
  <label for="name">Имя</label>
  <input id="name" placeholder="Введите имя">
  <br>
  <label for="surname">Фамилия</label>
  <input id="surname" placeholder="Введите фамилию">
  <h2 style="text-align: center">Какой-то текст посредине</h2>
</form>

БЛОГ НА HUSL

Изменение размера формы пользователем

Ответы (1 шт):