<form>
  
</form>

<form>
  
  <label>Label</label>
  
</form>

<form>
  
  <label>Label</label>
  <input>
  
</form>

<form>
  
  <label>Label</label>
  <input>
  <p>Error message</p>
  
</form>

<form>
  
  <label>Label</label>
  <input>
  <p>Error message</p>
  
  <button>Submit button</button>
  
</form>

<form>
  
  <label>Label</label>
  <input>
  <p>Error message</p>
  
  <button>Submit button</button>
  
</form>

<a href="#0" class="button">
  I am a fake unsemantic button
</a>

<button>
  <a href="#0" class="button">
    WTF?!
  </a>
</button>

<div
    class="btn"
    role="button"
    aria-pressed="false"
    tabindex="0">
</div>
<div
    class="btn"
    role="button"
    aria-pressed="false"
    tabindex="0">
</div>
<div
    class="btn"
    role="button"
    aria-pressed="false"
    tabindex="0">
</div>
<div
    class="btn"
    role="button"
    aria-pressed="false"
    tabindex="0">
</div>
<div
    class="btn"
    role="button"
    aria-pressed="false"
    tabindex="0">
</div>

<input type="submit" value="Send data">

<!-- or -->

<button type="submit">Send data</button>

<!-- or just -->

<button>Send data</button> <!-- default is submit -->

<button>Send data</button> <!-- default is submit -->

<button type="button">Send data</button> <!-- override the default -->

<input type="checkbox" id="my-id">
<label for="my-id">Whole row</label>

<label>
  <input type="checkbox">
  Whole row
</label>

<label for="my-id">
  <input id="my-id" type="checkbox">
  Whole row
</label>

<search>
  <label for=s>Site</label>
  <input type=search id=s>
  <button>Go!</button>
</search>

<label for="search" class="visually-hidden">Search</label>

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

<input type="        ">

<input type="        ">

<input type="        ">

<input type="        ">

<input type="        ">

<input type="        ">

<input type="        ">

<input type="        ">

<input list="list">
<datalist id="list">
  <option value="Gryffindor">
</datalist>

<select>
  <optgroup label="Theropods">
    <option>Tyrannosaurus</option>
...

<textarea>
  It was a dark and stormy night...
</textarea>

<select>
  <optgroup label="Theropods">
    <option>Tyrannosaurus</option>
...

<textarea>
  It was a dark and stormy night...
</textarea>

<input list="list">
<datalist id="list">
  <option value="Gryffindor">
</datalist>

<select>
  <optgroup label="Theropods">
    <option>Tyrannosaurus</option>
...

<textarea>
  It was a dark and stormy night...
</textarea>

<input list="list">
<datalist id="list">
  <option value="Gryffindor">
</datalist>

<form>
    <h3>Choose your interests</h3>
  
    <div class="form-control">
      <input type="checkbox" id="coding" name="interest" checked>
      <label for="coding">Coding</label>
    </div>
  
    <div class="form-control">
      <input type="checkbox" id="music" name="interest">
      <label for="music">Music</label>
    </div>
</form>

<form>
  <fieldset>
    <legend>Choose your interests</legend>
    <div class="form-control">
      <input type="checkbox" id="coding" name="interest" value="coding" checked>
      <label for="coding">Coding</label>
    </div>
    <div class="form-control">
      <input type="checkbox" id="music" name="interest" value="music">
      <label for="music">Music</label>
    </div>
  </fieldset>
</form>
<form>
  <fieldset>
    <legend>Choose your interests</legend>
    <div class="form-control">
      <input type="checkbox" id="coding" name="interest" value="coding" checked>
      <label for="coding">Coding</label>
    </div>
    <div class="form-control">
      <input type="checkbox" id="music" name="interest" value="music">
      <label for="music">Music</label>
    </div>
  </fieldset>
</form>
<form>
  <fieldset>
    <legend>Choose your interests</legend>
    <div class="form-control">
      <input type="checkbox" id="coding" name="interest" value="coding" checked>
      <label for="coding">Coding</label>
    </div>
    <div class="form-control">
      <input type="checkbox" id="music" name="interest" value="music">
      <label for="music">Music</label>
    </div>
  </fieldset>
</form>

<input type="tel">

<form>
  <label>Enter your email</label>
  <input
    type="email"
    >
</form>

<form>
  <label>Enter your email</label>
  <input
    type="email"
    name="email"
    >
</form>

<form>
  <label>Enter your email</label>
  <input
    type="email"
    name="email"
    placeholder="e.g. john@doe.com"
    >
</form>

<form>
  <label>Enter your email</label>
  <input
    type="email"
    name="email"
    placeholder="e.g. john@doe.com"
    value="Prefilled"
    >
</form>

<form>
  <label>Enter your email</label>
  <input
    type="email"
    name="email"
    placeholder="e.g. john@doe.com"
    value="Prefilled"
    class="email-field"
    >
</form>

<form>
  <label>Enter your email</label>
  <input
    type="email"
    name="email"
    placeholder="e.g. john@doe.com"
    value="Prefilled"
    class="email-field"
    required
    >
</form>

<form>
  <label>Enter your email</label>
  <input
    type="email"
    name="email"
    placeholder="e.g. john@doe.com"
    value="Prefilled"
    class="email-field"
    required
    readonly
    >
</form>

<form>
  <label>Enter your email</label>
  <input
    type="email"
    name="email"
    placeholder="e.g. john@doe.com"
    value="Prefilled"
    class="email-field"
    required
    readonly
    disabled>
</form>

<form>
  
    <h2>Sign up to our service</h2>
  
    <div class="form-group">
      <label for="email">Email address</label>
      
      <input
             id="email"
             name="email"
             type="email"
             required>
    </div>
 
    <div class="form-group">
      <label for="username">Username</label>
      <span>Must be between 5 and 10 characters long</span>
      <input
             id="username"
             name="username"
             type="text"
             minlength="5"
             maxlength="10"
             required>
    </div>
 
    <div class="form-group">
      <label for="password">Password</label>
      <span>Must be at least 8 characters with at least 1 digit, 1 lowercase and 1 uppercase character</span>
      <input
             id="password"
             name="password"
             type="password"
             pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
             required>
    </div>
 
  <button>Sign up</button>
</form>
 
 
 
 
 
 
 
 
<form>
  
    <h2>Sign up to our service</h2>
  
    <div class="form-group">
      <label for="email">Email address</label>
      
      <input
             id="email"
             name="email"
             type="email"
             required>
    </div>
 
    <div class="form-group">
      <label for="username">Username</label>
      <span>Must be between 5 and 10 characters long</span>
      <input
             id="username"
             name="username"
             type="text"
             minlength="5"
             maxlength="10"
             required>
    </div>
 
    <div class="form-group">
      <label for="password">Password</label>
      <span>Must be at least 8 characters with at least 1 digit, 1 lowercase and 1 uppercase character</span>
      <input
             id="password"
             name="password"
             type="password"
             pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
             required>
    </div>
 
  <button>Sign up</button>
</form>
 
 
 
 
 
 
 
 
<form>
  
    <h2>Sign up to our service</h2>
  
    <div class="form-group">
      <label for="email">Email address</label>
      
      <input
             id="email"
             name="email"
             type="email"
             required>
    </div>
 
    <div class="form-group">
      <label for="username">Username</label>
      <span>Must be between 5 and 10 characters long</span>
      <input
             id="username"
             name="username"
             type="text"
             minlength="5"
             maxlength="10"
             required>
    </div>
 
    <div class="form-group">
      <label for="password">Password</label>
      <span>Must be at least 8 characters with at least 1 digit, 1 lowercase and 1 uppercase character</span>
      <input
             id="password"
             name="password"
             type="password"
             pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
             required>
    </div>
 
  <button>Sign up</button>
</form>
 
 
 
 
 
 
 
 
<form>
  
    <h2>Sign up to our service</h2>
  
    <div class="form-group">
      <label for="email">Email address</label>
      
      <input
             id="email"
             name="email"
             type="email"
             required>
    </div>
 
    <div class="form-group">
      <label for="username">Username</label>
      <span>Must be between 5 and 10 characters long</span>
      <input
             id="username"
             name="username"
             type="text"
             minlength="5"
             maxlength="10"
             required>
    </div>
 
    <div class="form-group">
      <label for="password">Password</label>
      <span>Must be at least 8 characters with at least 1 digit, 1 lowercase and 1 uppercase character</span>
      <input
             id="password"
             name="password"
             type="password"
             pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
             required>
    </div>
 
  <button>Sign up</button>
</form>
 
 
 
 
 
 
 
 

<form>
  <label for="pass">Enter a password</label>
  <input
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
  type="password"
  id="pass"
  required>
  
  <button type="submit">Set password</button>
</form>

<input
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
  type="password"
  required
>