DEV Community

Cover image for Forms, nothing but forms
Volker Schukai for schukai GmbH

Posted on

Forms, nothing but forms

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


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.

Enter fullscreen mode Exit fullscreen mode

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" 
Enter fullscreen mode Exit fullscreen mode

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.

That's pretty nice.

Slider example

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; 

Enter fullscreen mode Exit fullscreen mode

The result already looks great. and the most important we have not yet needed Javascript

Image description

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">
Enter fullscreen mode Exit fullscreen mode

There are many more opportunities to discover. Just browse the mdn MDN Web Docs.


1 these are not really that new
2 the ordinary JavaScript without extensions and frameworks

Top comments (0)