<form class="flex">
  <p>
    <label for="input">Input without type</label><br />
    <input id="input" placeholder="Placeholder" />
  </p>
  <p>
    <label for="input-text">Input with type="text"</label><br />
    <input type="text" id="input-text" />
  </p>
  <p>
    <label for="input-date">Input with type="date"</label><br />
    <input type="date" id="input-date" />
  </p>
  <p>
    <label for="input-datetime-local">Input with type="datetime-local"</label><br />
    <input type="datetime-local" id="input-datetime-local" />
  </p>
  <p>
    <label for="input-email">Input with type="email"</label><br />
    <input type="email" id="input-email" />
  </p>
  <p>
    <label for="input-month">Input with type="month"</label><br />
    <input type="month" id="input-month" />
  </p>
  <p>
    <label for="input-number">Input with type="number"</label><br />
    <input type="number" id="input-number" />
  </p>
  <p>
    <label for="input-password">Input with type="password"</label><br />
    <input type="password" id="input-password" />
  </p>
  <p>
    <label for="input-search">Input with type="search"</label><br />
    <input type="search" id="input-search" />
  </p>
  <p>
    <label for="input-tel">Input with type="tel"</label><br />
    <input type="tel" id="input-tel" />
  </p>
  <p>
    <label for="input-time">Input with type="time"</label><br />
    <input type="time" id="input-time" />
  </p>
  <p>
    <label for="input-url">Input with type="url"</label><br />
    <input type="url" id="input-url" />
  </p>
  <p>
    <label for="input-week">Input with type="week"</label><br />
    <input type="week" id="input-week" />
  </p>
  <p>
    <span>Input with type="hidden" ;)</span><br />
    <input id="hidden" type="hidden" />
  </p>
</form>

<form class="flex">
  <p>
    <label for="input-text-standard">Standard</label><br />
    <input type="text" id="input-text-standard" />
  </p>
  <p>
    <label for="input-text-disabled">Disabled</label><br />
    <input type="text" id="input-text-disabled" disabled />
  </p>
  <p>
    <label for="input-text-invalid">Invalid</label><br />
    <input type="text" id="input-text-invalid" required value="" />
  </p>
  <p>
    <label for="input-text-readonly">Read Only</label><br />
    <input type="text" id="input-text-readonly" readonly />
  </p>
</form>

<p>
  <label for="input-range">Input Range</label><br />
  <input type="range" id="input-range" />
</p>

<p>
  <label for="input-color">Input Color</label><br />
  <input type="color" id="input-color" />
</p>

<p>
  <label for="input-file">Input File</label><br />
  <input type="file" id="input-file" />
</p>