<label for="username">Username: (3-16 characters)</label>
<input id="username" name="username" type="text" value="Sasha" pattern="\w{3,16}" required />

<label for="pin">PIN: (4 digits)</label>
<input id="pin" name="pin" type="password" pattern="\d{4,4}" required />

label {
  display: block;
  margin-top: 1em;
}

input:valid {
  background-color: palegreen;
}

input:invalid {
  background-color: lightpink;
}