The many faces of the HTML Input element

Imagine, we have a React component (input form) and we need to validate the user input using a regex pattern. I did a little survey between my friends and here the result:

1. do it in onChange handler - 41%
2. delegate this task to back-end developers - 40%
3. use “react-validation” package - 19%
4. something else - 0

No one suggested "something else", but in fact there is another way. And it is not a mysterious knowledge that available only to the elite. The point is that we often spend a lot of time learning APIs of frameworks, packages and gems and we often don't have time to go deep. But sometimes knowing the basics 💤 can make your life easier, no worse than a good package would do.

The Input Element

This element can be called the main element of any form. It has many attributes, but the main one is the type attribute, which controls the data type of the element. Do you know how many values can take the type attribute? 22! It seems like dissociative personality disorder.

Let's look at some of them:

• number, url, email - a text control with auto validation
• password - a text control that obscures data entry
• date - easiest way to get a date control
• time - a time input with mask
• range - a slider control
• color - a color picker
• submit - a submit button
• reset - easiest way to reset the form
• file- file upload

Let's create a simple React Input component.

const Input = ({ name, type = “text”, label, placeholder, ...rest }) => (
  <label>
    {label}
    <input name={name} type={type} placeholder={placeholder} {...rest} />
  </label>
);

Putting the input tag into the label tag is one way to associate them. Another way is to use the for (or htmlFor) attribute.

Validation

Let's look at the attributes which help us validate the data in the control.

• max / min
• maxlength / minlength
• required
• pattern

The pattern attribute specifies a regular expression for validating user input. By the way, if we want to show a custom error message we can do it with the title attribute.

The max and min attributes indicate the allowed range of values for the element. By the way you can put date (or time) value into these attributes for a given range in the date (or time) picker.

The List attribute

The Input element has the list attribute. Put the id of the datalist element in this attribute and you will get a select control.

const Select = ({ label, options }) => (
  <Fragment>
    <Input list=”list” />
    <datalist id=”list”>
      {options.map(item => (
        <option key={item.value} value={item.value} label={item.label} />
      ))}
    </datalist>
  </Fragment>
);

And in conclusion let's play with another interesting attribute - multiple. It allows us to transform the Select into a Multiselect Control. Just add it! The great feature but it only works if your input is an email or file type. Therefore if you really need such functionality, then... you know... look for framework, package or gem.