The Input element <input> CheatSheet part 1

Vincentservio
3 min readMay 12, 2021

The input element is my personal favorite and arguably one of the most important elements that exist. The input element can help the user interface look more clean and an overall better user experience. Excessive typing can be annoying, but the proper use of input can make forms or user interaction seamless and fun.

Definition

The Input element accepts the users input with control that allows the users to edit the field. For example <input value=” checkbox”/> allows the user to edit the field however they can only check a box if the value is truthy or falsy. In result there are no inputs for anything other than the box created to return a truthy or falsy value.

Why am I making a CheatSheet?

As a person who is still fairly new to software development, I found myself googling ways on building simple concepts to make my forms better. However often times the obvious answer was under my nose and i simply didn't know it existed . So those are the ones I’m going to attack first rather than the ones we already know and love.

Range

Range was one of the most interesting finds when i dug deeper into the input element. Range allows a user to manipulate the range using a slider. When given a min(imum)and a max(imum) The slider can be used to go traverse through the acceptable values.

Date

I found myself looking how to implement calendars on my forms, until i found out that there was one built in. Date drops down a calendar which allows the user to select a date as the input to the form field. This definitely eases the possibility of entering an invalid date , or if it is placed in an invalid format.

Color

Color can be very useful.Clicking on Color drops down a color gradient that the user can use to identify what color they would like to enter into the input field.

File

Many times the user will need to upload a file of some sort. File allows a user to upload one of more files from their storage device. The file is then uploaded to the server using submit or manipulated.

--

--