HTML CSS

<form>
  <h1>Learn Validation</h1>
  <!--implicit validation-->
  <fieldset>
    <legend>Implicit Validation</legend>
    <label>Email:<input type="email" name="email" placeholder="[email protected]" size="30"></label><br>
    <label>Website:<input type="url" name="website" placeholder="http://www.example.com" size="30"></label><br>
    <label>Random number:<input type="number" name="random"></label><br>
  </fieldset>
  <br><br>

  <!--specific validation-->
  <fieldset>
    <legend>Explicit Validation</legend>
    <label>Name (4-8 chars):<input type="text" id="name" name="name" minlength="4" maxlength="8" required=""></label><br>
    <label>Age (1-120):<input type="number" name="age" min="1" max="120" required=""></label><br>
    <label>Username <i>(letters and numbers only)</i>:
      <input name="username" id="username" pattern="[A-Za-z0-9]+" required=""></label><br>
    <label>Postal Code <i>(5 numbers, a dash, and 4 numbers)</i>:<input type="text" pattern="(\d{5}([\-]\d{4})?)" required=""></label><br>
  </fieldset>
  <br>

  <input type="submit" value="Submit">
</form>

form {
    background: black;
    width: 400px;
    margin: 0 auto;
    font-family: Roboto, Serif;
    padding: 10px;
    color: white;
  }

  input {
    margin: 20px;
  }

  input[type="submit"] {
    display: block;
    width: 100px;
    padding: 10px;
    margin: 0 auto;
    font-weight: bold;
    background: white;
  }

  h1 {
    text-align: center;
  }