<div class="container">
<form>
<div class="form-row">
<label for='scream-content'>Enter something to scream:</label>
<input id='scream-content' type='text' pattern='[A-Z]+' title='A word with all capital letters' required/>
</div>
<div class="form-row">
<label for='single-digit'>Enter a single digit:</label>
<input id='single-digit' type='number' min='0' max='9'/>
</div>
<div class="form-row">
<label for='scream-content'>Enter something in camelCase:</label>
<input id='scream-content' type='text' pattern='[a-z]+((\d)|([A-Z0-9][a-z0-9]+))*([A-Z])?' title='A phrase written so that each next word or abbreviation begins with a capital letter.' placeholder='thisIsAPhrase' required/>
</div>
<input class='submit-button' type="submit" value="Submit" />
</form>
</div>
body {
font-family: "Fira Sans", sans-serif;
}
.container {
max-width: 300px;
margin: 0 auto;
}
.form-row {
display: flex;
flex-direction: column;
margin-bottom: 30px;
input {
width: 100%;
&:invalid {
outline: none;
box-shadow: none;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.