Forms

Various ways to structure html forms.

Mozilla- How to structure a web form Tuts+- How to Build Web Form Layouts With CSS Grid Quackit- CSS Grid Form Examples

Hybrid Form

Grid layout for landscape and flexbox for portrait.

label {
 font-weight:bold;
}

#checkboxDIV {
  text-align:center;
  border:none;
}

@media screen and (orientation: landscape) {
  #hybridForm {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    grid-gap:1em .5ex;
  }
  label {
    justify-self:end;
  }
  textarea, input {
    grid-column:2/5;
  }
  input#date {
    margin-right:1em;
  }
  #checkboxDIV {
    grid-column:1/5;
  }
}

@media screen and (orientation: portrait) {
  #hybridForm {
    display:flex;
    flex-direction:column;
  }
  label {
    display:block;
    text-align:left;
  }
  label#checkboxLabel {
    display:inline;
  }
  textarea, input {
    margin-bottom:1em;
  }
}
</style>

<form id="hybridForm">
  <label for="name">Name</label>
  <input id="name">
  
  <label for="date">Date</label>
  <input type="date" id="date" style="grid-column:2/3">
  
  <label for="time">Time</label>
  <input type="text" id="time" style="grid-column:4/5">
  
  <label for="email">Email</label>
  <input type="text" id="email">
  
  <label for="notes">Notes</label>
  <input type="text" id="notes">
  
  <div id="checkboxDIV">
    <label for="checkbox" id="checkboxLabel">Checkbox</label>
    <input type="checkbox" id="checkbox">
  </div>
</form>

Grid Form

Form in a Flexbox

Definition list in a flexbox