SO-74686800

by David Thomas

HTML

<form action="#">
  <div class="col-md-4">
    <label for="firstName">First Name
    </label>
    <input class="form-control name" name="firstName" id="firstName" type="text">
  </div>
  <div class="col-md-4">
    <label for="middleName">Middle Name
    </label>
    <input class="form-control name" name="middleName" id="middleName" type="text">
  </div>
  <div class="col-md-4">
    <label for="fullName">Last Name
    </label>
    <input class="form-control name" name="familyName" id="familyName" type="text">
  </div>
  <label>Complete Name</label>
  <textarea class="form-control" id="fullName" name="fullName" type="text" readonly></textarea>
</form>

CSS

:root {
  --commonSpacing: 1em;
  --flexBasis: 3;
}
form {
  display: grid;
  inline-size: clamp(20em, 60vw, 1000px);
  margin-block: var(--commonSpacing);
  margin-inline: auto;
}

form > div {
  display: flex;
  justify-content: space-between;
  gap: var(--commonSpacing);
}

label {
  text-align: end;
  flex-basis: calc((100%/var(--flexBasis)) - 0.75em);
}

label::after {
  content: ':';
}

input {
  flex-basis: calc(2*(100%/var(--flexBasis)) - 0.75em);
}

div + label {
  text-align: start;
}

textarea {
  height: 5em;
  resize: block;
}

JavaScript

function setAddress() {
  let name = [...document.querySelectorAll('.name')]
    .map(
      (el) => el.value.trim()
    ).filter((val) => val.trim().length);
  document.querySelector('#fullName').value = name.join(' ');
}

document.querySelectorAll('input.name').forEach(
  (el) => el.addEventListener('input', setAddress)
);