<form>
    <label for="email">Email Address:</label>
    <input name="email" type="email" value="na@me@example.com">

    <label for="secret">Secret Code: (lower case letters)</label>
    <input name="secret" type="text" value="test" pattern="[a-z]+">

    <label for="age">Your age: (18+)</label>
    <input name="age" type="number" value="5" min="18">

    <label><input name="tos" type="checkbox" required checked> - Do you agree to ToS?</label>
</form>

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

input:valid {
    background-color: ivory;
    border: none;
    outline: 2px solid deepskyblue;
    border-radius: 5px;
    accent-color: gold;
}