Skip to content

Instantly share code, notes, and snippets.

@neluttu

neluttu/form-input-validation.html

Last active August 16, 2024 20:52
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save neluttu/d11dee41fdb2c573a715fcd04fde12f3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save neluttu/d11dee41fdb2c573a715fcd04fde12f3 to your computer and use it in GitHub Desktop.
Download ZIP
Better forms @kevinpowell
Raw
form-input-validation.html
<!-- https://www.youtube.com/watch?v=awNYtIAu6pI -->
<form action="">
<div class="form-group">
<label for="name">Name</label>
<input required placeholder="Kevin" type="text" id="name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input required placeholder="email@address.com" type="email" id="email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input required placeholder="12+ characters" type="password" id="password" minlength="12">
</div>
<button>Submit</button>
</form>
<style>
input {
outline: 3px solid hsl(203, 30%, 26%);
}
input:not(:placeholder-shown):valid {
outline-color: var(--clr-success);
}
input:not(:placeholder-shown):invalid {
outline-color: var(--clr-error);
}
input:focus:invalid {
outline-color: var(--clr-warning)
}
@layer general-styling {
:root {
--clr-success: hsl(143, 100%, 26%);
--clr-warning: hsl(43, 100%, 66%);
--clr-error: hsl(348, 55%, 49%);
}
form {
display: grid;
gap: 0.75rem;
max-width: 30ch;
margin: 2rem auto;
}
.form-group {
display: grid;
gap: 0.25rem;
}
html {
font-size: 2rem;
font-family: system-ui;
color-scheme: dark;
}
label {
font-size: 0.75rem;
}
input,
button {
font: inherit;
}
input {
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
border: 0;
background-color: hsl(201, 31%, 11%);
}
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment