The new possibilities1 are just great.
"A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools." — Douglas Adams
Introduction
How many times have you left an online store because the checkout process was too complicated or it was even impossible to place an order?
Railroad websites seem to be particularly prone to bad UX for some reason.
Good forms not only work, but also make the website look more professional and mature.
Forms are the pinnacle of web design. A good form design will determine the success or failure of any website.
However, when designing forms, it is not only spacing, font or colors that matter, but also the underlying logic.
Even though many things are simpler today than they were 10 years ago, you still have to be careful what you do.
Two friends, vanilla Javascript & HTML
With vanilla Javascript2 and HTML, the web developer has everything he needs at his disposal. You can get started right away and define the starting <form> tag.
The input elements can exist alone, but their full effect only unfolds in conjunction with the form tag.
So you can access all form elements via HTMLFormElement.elements
.
document.querySelector('form').elements
In the past, you had to put a lot of manual work into such a form, but HTML5 offers the developer a large number of ready-made controls with appropriate validation to choose from.
Neither frameworks nor web components are needed!
Let's take a slider for example. This can be easily defined as an input element of type range using HTML.
<input type="range"
min="1"
max="100"
value="50"
class="slider">
With the attribute type="range"
the type is selected and with min
and max
the range is specified. The attribute value
finally specifies the current value.
With some CSS you can even adapt this to your wishes. Unfortunately, the corresponding classes are not yet standard, but with prefix already usable.
.slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 15px;
background: #dcdcdc;
outline: none
opacity: 0.8;
-webkit-transition: .3s;
transition: opacity .3s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: red;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 20px;
height: 20px;
background: red;
cursor: pointer;
}
The result already looks great. and the most important we have not yet needed Javascript
Another useful control are datalist
. How many projects have developed their own select because there was no search. With the datalist the webstandard now delivers.
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
There are many more opportunities to discover. Just browse the mdn MDN Web Docs.
References
- Monster Homepage
- mdn - webkit-slider-thumb
- codepen - slider example
- mdn - input control
- mdn - validation
- developer.mozilla.org/en-US/docs/Web/HTML/Element/form
1 these are not really that new
2 the ordinary JavaScript without extensions and frameworks
Top comments (0)