Form
I wanted to build a clean and basic "undesigned" form that I can use on this site, and as basic styling elsewhere. This ironically requires a lot of design code because the browser's styling defaults are horribly unappealing on form elements.
The way to do this right is to get a wishlist of small details right. I list them below the form.
Form design wishlist
- It’s going to have to work with responsive sizing without needing many breakpoints.
- Compact, but neatly spaced.
- Smooth, but fast transitions.
- Plain, boring and peaceful on the surface, but delightful once interacted with.
- Works with many colour schemes, especially dark mode.
- Accessible with touch screen and keyboard.
- Big hitspaces.
- Accessible in right-to-left languages while preserving the parts that must stay left-to-right.
- Accessible by working with styling the input elements instead of hiding them and creating something else.
- Small stylesheet and basic html (not many classes or div soup).
- Not conflict with the styling of other form elements on a page.
- Can place regular content within the form without it getting extra styling.
- Nicely animated radio buttons.
- Animated checkboxes that animate someone drawing a checkmark. This has never been done in a form input!!!
- Use SVGs
and clip-pathin ways to make them animatable and adjustable with CSS. - Adjustable to add more or less colour accents throughout.
- Aware of the iOS minimum font-size issue.
- There is an iOS issue/bug for checkboxes, radio controls and select boxes. If their data is invalid, they do not automatically get scrolled into focus when a form is attemting submission. JavaScript enhancement is added to automatically scroll to the invalid inputs.
- Invalid indicators on focus with a consistent look.
- A stylesheet for each input type to use less total CSS for simpler forms.
- Use of disabled styles like opacity and a not-allowed cursor.
- Waiting cursor as an indicator while a file is uploading.
- A range slider that instantly updates an input field and vice-versa, as well as fill in the start of the slider with a custom background. The range slider should also have a thumb that extends beyond the height of the range slider.
- A choice between rounded or sharp icons such as the select dropdown arrows and checkmarks.
- Valid HTML.
If you can think of anything else let me know. Every few years I make a new form with all the controls, trying to get things just right.
Works in both Light and Dark mode.
Source Code
HTML
<form>
<div class="form-albino">
<section>
<div class="table-label">
<label for="name">Text</label>
</div>
<div class="table-cell">
<input id="name" type="text" name="name" autocomplete="name" placeholder="Name">
</div>
</section>
</div>
</form>
CSS
form {display: block;}
.form-albino {
accent-color:var(--color2);
padding: .25em 0;
border-radius: .25em;
margin:auto;
max-width:35em;
--border-width:.125em;
--input-padding:.75em;
background: rgba(var(--color-rgb), var(--color-rgb), var(--color-rgb), .05);
}
.form-albino section {
display:flex;
flex-wrap:wrap;
margin: 0;
padding: 1em;
gap:0 1em;
}
.form-albino section:nth-child(even) {
background: rgba(var(--color-rgb), var(--color-rgb), var(--color-rgb), .3);
}
.form-albino .table-cell:has(input[type="email"],input[type="tel"],input[type="url"]) {direction:ltr}
.form-albino .table-label {
flex:0 0 4em;
align-content: flex-start;
display:flex;
flex-wrap: wrap;
margin-block: 1.25em 0;
line-height: 1.3;
}
.form-albino .full-width {flex-direction: column;}
.form-albino .full-width .table-label {flex:1; justify-content: flex-start;margin-block: 0;padding-inline: .25em;}
@media only screen and (max-width:350px){
.form-albino section {flex-direction: column;}
.form-albino .table-label {flex:1; justify-content: flex-start;margin-block: 0;padding-inline: .25em;}
}
.form-albino .table-label label {display: flex;align-items: center;gap:.25em;top:5em;position: sticky;}
.form-albino .table-label label i {width: 1em;height: 1em;display: inline-block;}
.form-albino .table-cell {
margin: 0;
flex: 1;
}
.form-albino .helper {margin: .5em;
display: inline-block;
line-height: 1.3;
font-size: .9em;}
/* FORM PARAGRAPH */
.form-albino p:first-child {margin-top:0;}
.form-albino p, .form-albino ul, .form-albino ol {margin-inline:.25em;}
/*
.form-albino p {margin-top:1em;} */
.form-albino .flex-list-inline {list-style:none;display:flex;gap:.35em;flex-wrap: wrap;margin:1em 0;padding:0;}
.form-albino .table-cell:has(input[type="email"]) .flex-list-inline {justify-content:end;}
/* FORM INPUT */
.form-albino progress,
.form-albino .select,
.form-albino textarea,
.form-albino input {
-webkit-appearance:none;
appearance:none;
touch-action:manipulation;
font:inherit;
font-weight:400;
line-height:1.3;
color: var(--color-primary,#000);
background-color: rgba(var(--color-rgb, 255),var(--color-rgb, 255),var(--color-rgb, 255),.8);
border: var(--border-width) solid rgba(var(--color-rgb, 255),var(--color-rgb, 255),var(--color-rgb, 255),.9);
box-shadow: .0625em .0625em .25em rgba(0,0,0,.1), inset .0625em .0625em .25em rgba(0,0,0,.25);
border-radius: .25em;
margin:0;
padding:.4em;padding:var(--input-padding) .5em;
transition: color .4s, background .4s, border .4s;
box-sizing: border-box;
max-width: 100%;
width:100%;
cursor:auto;
position:relative;
/* border-width:.15625rem;
border-radius:.3125rem;
padding:.5rem;
box-shadow: .078125rem .078125rem .3125em rgba(0,0,0,.1), inset .078125rem .078125rem .3125rem rgba(0,0,0,.25);
*/
}
.form-albino progress,
.form-albino .select,
.form-albino textarea,
.form-albino input,
.form-albino .placeholder i {
font-size:1.25em;
}
.dark-theme .form-albino progress,
.dark-theme .form-albino .select,
.dark-theme .form-albino textarea,
.dark-theme .form-albino input {
box-shadow: .078125rem .078125rem .3125em rgba(0,0,0,.2), inset .078125rem .078125rem .3125rem rgba(0,0,0,.5);
}
.form-albino progress:hover,
.form-albino input:hover,
.form-albino input:focus,
.form-albino textarea:hover,
.form-albino .select:hover,
.form-albino .select:focus-within,
.form-albino textarea:focus {
background-color: rgba(var(--color-rgb, 255),var(--color-rgb, 255),var(--color-rgb, 255),.99);
}
/* INVALID */
.form-albino input:invalid:focus-visible,
.form-albino input:invalid:focus,
.form-albino .select:has(select:invalid:focus) {outline: solid red;}
.form-albino input:invalid:focus + label,
.form-albino .select:has(select:invalid:focus) + label {color:red;}
.form-albino [disabled] {opacity:.5;cursor: not-allowed;pointer-events:all;}
.form-albino [disabled], .form-albino [disabled]:hover,
.form-albino input[type=file][disabled] {background-image:url(/webmaster/svg/icon-ux/disabled.svg) !important;background-repeat:no-repeat;background-position:center center;}
[disabled]::-webkit-color-swatch-wrapper,
[disabled]:checked:after {opacity:0 !important}
/* FORM TEXTAREA */
.form-albino textarea {
overflow: auto;
resize: vertical;
height: 6em;
}