Forms, nothing but forms
Tags: javascript, forms, webdev, webdesign
Published: 2021-11-15 10:03:52

---
title: Forms, nothing but forms
published: true
description: Monster makes it quick and easy to create forms.
tags: javascript, forms, webdev, webdesign
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v5fdketexdca35zqlqhs.png
series: Manage Forms with Monster
---
  
The new possibilities<sup>1</sup> 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<sup>2</sup> and HTML, the web developer has everything he needs at his disposal. You can get started right away and define the starting &lt;form&gt; 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`.

```javascript
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.

```html
 <input type="range" 
        min="1" 
        max="100" 
        value="50"
        class="slider">
```
<br>
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.
<br>
![Slider example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jtwp3m72b7sxnzotel3w.png)
<br><br>

With some CSS you can even adapt this to your wishes. Unfortunately, the corresponding classes are not yet standard, but with prefix already usable.

```css
.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; 
}

```
<br>
The result already looks great. and the most important we have not yet needed Javascript
<br><br>
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/utqokmqhq8uiqicyhlav.png)
<br><br>

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.

```javascript
  <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](https://monsterjs.org/)
- [mdn - webkit-slider-thumb](https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-slider-thumb)
- [codepen - slider example](https://codepen.io/volker-schukai/pen/eYEQYPB)
- [mdn - input control](https://developer.mozilla.org/de/docs/Web/HTML/Element/Input)
- [mdn - validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
- [developer.mozilla.org/en-US/docs/Web/HTML/Element/form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)




<sup>1</sup> these are not really that new
<sup>2</sup> the ordinary JavaScript without extensions and frameworks