Basic Form for Validation Testing

by TJ VanToll

HTML

<meta name="viewport" content="width=device-width, initial-scale=1">
<form>
    <div>
        <label for="name">Name:</label>
        <input type="text" name="name" id="name">
    </div>
    <div>
        <label for="email">Email:</label>
        <input type="email" name="email" id="email">
    </div>
    <div>
        <button>Submit</button>
    </div>
</form>

CSS

* { box-sizing: border-box; }
body {
    font-size: 1.2em;
}
body input, body button {
    font-size: 1.2em;
}

form > div {
    margin: 1em;
}
form button {
    width: 100%;
}
label { display: block; }
input {
    width: 100%;
    padding: 0.2em;
}
button {
    padding: 0.2em;
}

input.error {
    background: red;
    color: white;
}
label.error {
    color: red;
}

JavaScript

document.querySelector( "form" ).addEventListener( "submit", function() {
    alert( "Successful submission" ); 
});