The humble HTML input tag is actually an extremely useful and powerful HTML tag. Not only are they used for constructing forms, but they allow for all sorts of additional functionality to be added to your page.

Let's fund out what the input types are, what they do and when we should use them to provide our users with the best possible experience when using our websites.

## Text

The HTML input text type creates a single-line textbox. It is most commonly used in forms for capturing simple text entries like first names and last names.

## Password

The HTML input password type creates a single-line textbox like the text input above, however, when a user enters text into the textbox it is obfuscated by displaying the characters as asterisks or bullet points. This means the text entered is never readable to anyone viewing the website. The value itself is accessible via scripts in your website to send to an API to authenticate a user.

## Radio

The HTML input radio type creates a selectable option list like the below checkboxes, however, the radio differs from the checkboxes in two main areas. 

They are displayed as circular 'radio buttons' instead of a box and only one option can be selected at a time, unlike the checkboxes where multiple options can be selected.

It is possible to split the options into their own groups which allows one option from each group to be selected.

A common use case for these inputs would be an online quiz where the user needs to select one, and only one, answer to a question.

## Checkbox

Similar to the radio type above, the HTML input checkbox presents the user with a list of options to choose from. In the case of checkboxes, they do display a box to click and allow for multiple options to be selected.

## Button

The button type input transforms the input to have the appearance of a clickable button. This input type provides access to the "click" event so that the website can detect when the user clicks on this input and can then perform some desired logic. \
The button can be styled using standard CSS to move away from the standard grey button.

A common use case for the button input is to communicate with a server to retrieve or calculate some values to fill in additional components of a form or to send an email based upon other form values.

## Color

The color input type opens a custom color picker so that the user can select a color to use. These are quite often used in applications that allow theming by letting the user specify the colors that are used in CSS variables to style components of an application.

## Email

The email input type displays exactly the same as the text and password input types by default, however, the textbox automatically validates the text entered by the user to ensure that it is a properly formatted email address. The textbox is applied by CSS pseudo-classes, :valid or :invalid, to denote the status of the current value.

This input type is most commonly used in registration and login type forms to ensure that the user is entering a valid email address to create or locate an account in your database.

## File

The file input type displays a button and a text label. Clicking the button opens the file picker window on the user's computer so that they can select a file saved to their hard disk to submit to your application.

This is useful when you need a user to upload a profile picture or a resume/CV if you have a job application processing application. 

## Hidden

The hidden input is just that - hidden! These inputs cannot be seen by the user looking at your website. 

They are useful for auto-populating data that you don't want your users to see or modify. It might be a product code or security token value that is calculated based upon values that the user enters into other form fields.

## Image

This image input type allows an image to be used in place of a button. It's a fast/convenient way to be able to customise buttons for your forms and general UI.

Most modern CSS frameworks provide extensive customisation of the traditional button HTML element, so this input type is not frequently required.

## Number

The number input type restricts the user to only being able to enter actual numbers. If the user tries to type any alphabetic character, the input will not accept it. 

This input type is especially useful on e-commerce applications where the user needs to select a quantity of items.

The input is versatile in that it can be configured to allow decimals as well as providing up and down arrows with pre-defined increments and decrements. The input also allows control over what the minimum and maximum values entered can be. Again, this is useful in e-commerce in ensuring the order is at least one item and less than the total number of stock available, for example.

## Range

The range input is very similar to the number input in its functionality. The main difference is that the range input type presents the user with a slider they can drag to select the numeric value.

Again, this input provides the ability to set the minimum and maximum allowed values as well as how much the value changes for each step of the slide. The main drawback of the range compared to the number input is that it is less accurate for the user when choosing a value, so the user experience is not as good if very defined or specific values need to be selected.

## Search

The search input is a copy of the general text type input. The only real difference is that most modern internet browsers have built-in functionality to present the search type input with custom "Search styles" which may reduce the amount of customisation you as the developer need to perform to make it look different from the text and more like a specific search utility.

## Tel

The tel input type is used for capturing telephone numbers from the user. Unfortunately, because telephone formats vary so widely globally, this input type does not have any pre-configured value validation built-in. 

The input does have a "pattern" attribute that accepts a regular expression which will allow you to automatically validate the entered value for specific formats or to prevent junk values from being entered.

## Time

The time input is for recording the hours and minutes component of the time. When the user clicks on the time input, they are presented with a small pop-up that allows them to make a selection for the hours and minutes.

The input will default to the operating system locale when displaying either 12 or 24-hour time formats. Additionally, the time input type renders and behaves slightly differently in each browser. It will need to be styled accordingly to allow for these differences.

Similar to the numeric inputs, the time input can be restricted to only allow selections between certain times - business hours only as an example.

## Date

The date input allows a user to select a day, month and year value, with no time attached. Similar to the time input type, the user is presented with a small pop-up when they click on the input where they can select the desired date. 

Similar to the number input, the date range can be pre-defined to prevent users from selecting invalid dates for your application's purposes. 

## Datetime-Local

The datetime-local input type is basically the combination of the date and time input types. It allows the user to select the full date and specific time. Similar to the date input type, the date range can be restricted.

This sort of input is more efficient for calendar-booking type apps where both the date and time are relevant.

This input type can have some compatibility issues with some browsers and will fall back to a standard text input when the browser is unable to interpret the datetime-local input type.

## Week

The week input type allows the user to select a full week period from a calendar pop-up. The selection is then recorded as the week number of the year (1-52). 

The input allows for a minimum and maximum week to be selected and can span across multiple years. The input will display the week number and the year it falls within.

## Month

This input type presents the user with a customised calendar pop-up with the month names grouped into years. The user then can only select the whole month. The input displays the selected month and the year.

Again, the start and end month/years can be predefined when configuring the input.

## URL

The URL input type is specifically built to allow users to enter a website URL. Similar to the tel input type, the url input has the pattern attribute so that the user is forced into entering the url in the correct format. This can be useful to ensure the url is https or has a query string parameter added.

## Submit

The submit input type is a special button type input that automatically tries to submit an HTML form to a server (the URL for which should be configured in the form). This input type can be tricky to use if you have multiple forms and multiple submit buttons on a single page. Ensuring they are connected to the right form is critical.

## Reset

The reset input type is another special button type input. When clicked, the reset button will clear the values of all other inputs that are in the HTML form grouping that the reset button resides within.

It is a useful input to allow a user to restart a process.

The humble HTML input tag is actually an extremely useful and   powerful HTML tag. Not only are they used for constructing forms, but they   allow for all sorts of additional functionality to be added to your page.

The Complete Guide to HTML Input Types

## What is Memoization?

Memoization is a technique used in web development to speed up the execution of functions by caching the results of expensive function calls and returning the cached result when the same inputs occur again. The concept is very similar to caching on the server but done at a function level.

## Why Use Memoization?

Memoization is used to improve the performance of your code by reducing the number of times a function needs to execute. By caching the result of a function call, memoization can eliminate the need to perform complex calculations or expensive database queries every time a function is called with the same inputs.

T﻿he key here is to understand that the inputs to the function must match exactly for the function to use the memoized results instead of executing the function logic in its entirety again.

## How to Implement Memoization

To implement memoization, you need to create a cache that will store the results of function calls. How this is done depends on your technology stack and whether you have access to services like Redis for external caching of data.

At a base level, you can use an object or a Map to store the cached results. When a function is called, you check the cache to see if the result for the given inputs has already been computed. If it has, you return the cached result. If it hasn't, you compute the result and store it in the object or Map before returning it.

Here's an example of how to implement memoization in TypeScript:

```
const memoize = <T extends (...args: any[]) => any>(fn: T): T => {
  // Set up the cache map
  const cache = new Map();
  return ((...args: Parameters<T>): ReturnType<T> => {
    // Check if the key has already been cached and return the result if found
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      return cache.get(key);
    }
    // If not found, execute the memoized function cache and return the result
    const result = fn(...args);
    cache.set(key, result);
    return result;
  }) as T;
};
```

I﻿n this example, the memoize function receives another function as its only argument. This function is the one that is complex or time-consuming that you want to cache the results from.

T﻿he memoize function then checks the cache map object to see if the complex function has been called before with the same set of arguments. If it has, the result of the function execution with those arguments is returned immediately.

I﻿f the key is not found, the memoize function then executes the complex function, caches the result and returns the result.

## When to Use Memoization?

1. C﻿aching Database Queries\
   I﻿f you have a function in your API logic that executes frequently with the same filter parameters, it may be worth memoizing the results so that the API does not need to make unnecessary requests to the database for the same data sets.
2. R﻿educing CPU Consumption\
   I﻿f the function is very CPU intensive to complete or long-running that affects other parts of your application, it would be sensible to memoize it.
3. I﻿mproving Network Performance\
   If the application makes many requests to a 3rd-party API, but with the same parameters, memoizing the results from the API will help reduce the number of API requests as well as speed up the application.

Memoization is a term you will come across at some stage when reading about frontend frameworks, libraries and in various packages you may need to use. This post will explain what memoization is, why use memoization and how to implement memoization.