Forms, nothing but forms

The new possibilities¹ 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 Javascript² 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.

That's pretty nice.

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

¹ these are not really that new
² the ordinary JavaScript without extensions and frameworks