Input

<form>
  <fieldset>
    <label>
      Name
      <input name="name" placeholder="Name" autocomplete="name">
    </label>
    <label>
      Email
      <input name="email" placeholder="Email" autocomplete="email" aria-describedby="email-hint">
      <small id="email-hint">
        We’ll never share your email with anyone else.
      </small>
    </label>
    <label>
      <input type="checkbox" name="newsletter" aria-describedby="newsletter-hint" checked>
      Newsletter
    </label>
    <small id="newsletter-hint">
      We will send you a news letter every week
    </small>
  </fieldset>
  <div class="actions">
    <button class="outline" type="reset">
      Reset
    </button>
    <button class="solid" type="submit">
      Submit
    </button>
  </div>
</form>

<input type="text" name="text" aria-label="Text" placeholder="Text">
<input type="email" name="email" aria-label="Email" placeholder="Email" autocomplete="email">
<input type="number" name="number" aria-label="Number" placeholder="Number">
<input type="password" name="password" aria-label="Password" placeholder="Password">
<input type="tel" name="tel" aria-label="Tel" placeholder="Tel">
<input type="url" name="url" aria-label="Url" placeholder="Url">

<input type="date" name="date" aria-label="Date">
<input type="datetime-local" name="datetime-local" aria-label="Datetime local">
<input type="month" name="month" aria-label="Month">
<input type="week" name="week" aria-label="Week">
<input type="time" name="time" aria-label="Time">

<input type="search" name="search" aria-label="Search" placeholder="Search">

<input type="file" class="solid" name="file" aria-label="File" placeholder="File">

<input type="color" name="color" aria-label="Color" placeholder="Color">

<input type="text" name="text" aria-label="Text" placeholder="Text" disabled>

<input type="text" name="text" aria-label="Text" placeholder="Text" readonly value="Read-only value">

<input type="text" name="Hint" aria-label="Hint" placeholder="Email">
<small>
  We’ll never share your email with anyone else.
</small>

<input type="text" name="valid" aria-label="Valid" aria-invalid="false" aria-describedby="valid-hint" value="Valid">
<small id="valid-hint">
  Looks good!
</small>
<input type="text" name="invalid" aria-label="Invalid" aria-invalid="true" aria-describedby="invalid-hint" value="Invalid">
<small id="invalid-hint">
  Please provide a valid value!
</small>