🔥Input Enums for a better Development Experience 🔥 😋✂️

#enum #input #webdev #html

Auto Complete (REF)

The HTML autocomplete attribute lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.

It is available on <input> elements that take a text or numeric value as input, <textarea> elements, <select> elements, and <form> elements.

The source of the suggested values is generally up to the browser; typically values come from past values entered by the user, but they may also come from pre-configured values. For instance, a browser might let the user save their name, address, phone number, and email addresses for autocomplete purposes. Perhaps the browser offers the ability to save encrypted credit card information, for autocompletion following an authentication procedure.

If an <input>, <select> or <textarea> element has no autocomplete attribute, then browsers use the autocomplete attribute of the element's form owner, which is either the <form> element that the element is a descendant of, or the <form> whose id is specified by the form attribute of the element.

For more information, see the autocomplete attribute in <form>.

/**
 * @description HTML AutoComplete Types
 * @link https://wiki.whatwg.org/wiki/Autocomplete_Types
 */
export enum AutoComplete {
  Off = 'off',
  None = 'off',
  /**
   * @description full name
   */
  Name = 'name',
  /**
   * @description prefix or title (Mr., Mrs. Dr., etc.)
   */
  HonorificPrefix = 'honorific-prefix',
  /**
   * @description given or first name
   */
  GivenName = 'given-name',
  /**
   * @description additional or middle name
   */
  AdditionalName = 'additional-name',
  /**
   * @description additional or middle name initial
   */
  AdditionalNameInitial = 'additional-name-initial',
  /**
   * @description family name, surname, or last name
   */
  FamilyName = 'family-name',
  /**
   * @description suffix (Jr., II, etc.)
   */
  HonorificSuffix = 'honorific-suffix',
  /**
   * @description nickname
   */
  Nickname = 'nickname',
  /**
   * @description full street address condensed into one line
   */
  StreetAddress = 'street-address',
  /**
   * @description first line of street address
   */
  AddressLine1 = 'address-line1',
  /**
   * @description second line of street address
   */
  AddressLine2 = 'address-line2',
  /**
   * @description third line of street address
   */
  AddressLine3 = 'address-line3',
  /**
   * @description locality or city
   */
  Locality = 'locality',
  /**
   * @description same as locality
   */
  City = 'city',
  /**
   * @description administrative area, state, province, or region
   */
  AdministrativeArea = 'administrative-area',
  /**
   * @description same as administrative-area
   */
  State = 'state',
  /**
   * @description same as administrative-area
   */
  Province = 'province',
  /**
   * @description same as administrative-area
   */
  Region = 'region',
  /**
   * @description postal or ZIP code
   */
  PostalCode = 'postal-code',
  /**
   * @description country name
   */
  CountryName = 'country-name',
  /**
   * @description email address
   */
  Email = 'email',
  /**
   * @description full phone number, including country code
   */
  Tel = 'tel',
  /**
   * @description international country code
   */
  TelCountryCode = 'tel-country-code',
  /**
   * @description national phone number: full number minus country code
   */
  TelNational = 'tel-national',
  /**
   * @description area code
   */
  TelAreaCode = 'tel-area-code',
  /**
   * @description local phone number: full number minus country and area codes
   */
  TelLocal = 'tel-local',
  /**
   * @description phone extension number
   */
  TelExtension = 'tel-extension',
  /**
   * @description full fax number, including country code
   */
  Fax = 'fax',
  /**
   * @description international country code
   */
  FaxCountryCode = 'fax-country-code',
  /**
   * @description national fax number: full number minus country code
   */
  FaxNational = 'fax-national',
  /**
   * @description area code
   */
  FaxAreaCode = 'fax-area-code',
  /**
   * @description local fax number: full number minus country and area codes
   */
  FaxLocal = 'fax-local',
  /**
   * @description fax extension number
   */
  FaxExtension = 'fax-extension',
  /**
   * @description full name, as it appears on credit card
   */
  CcName = 'cc-name',
  /**
   * @description credit card number
   */
  CcNumber = 'cc-number',
  /**
   * @description month of expiration of credit card
   */
  CcExpMonth = 'cc-exp-month',
  /**
   * @description year of expiration of credit card (see note 3 below about formatting)
   */
  CcExpYear = 'cc-exp-year',
  /**
   * @description date of expiration of credit card (see note 4 below about formatting)
   */
  CcExp = 'cc-exp',
  /**
   * @description credit card security code
   */
  CcCsc = 'cc-csc',
  /**
   * @description preferred language
   */
  Language = 'language',
  /**
   * @description birthday (see note 4 below about formatting)
   */
  Bday = 'bday',
  /**
   * @description year of birthday (see note 3 below about formatting)
   */
  BdayYear = 'bday-year',
  /**
   * @description month of birthday
   */
  BdayMonth = 'bday-month',
  /**
   * @description day of birthday
   */
  BdayDay = 'bday-day',
  /**
   * @description company or organization
   */
  Org = 'org',
  /**
   * @description user's position or title within company or organization
   */
  OrganizationTitle = 'organization-title',
  /**
   * @description sex or gender
   */
  Sex = 'sex',
  /**
   * @description gender identity
   */
  GenderIdentity = 'gender-identity',
  /**
   * @description Website URL
   */
  Url = 'url',
  /**
   * @description photo or avatar
   */
  Photo = 'photo',
}

Input Mode (REF)

The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.

It is used primarily on elements, but is usable on any element in contenteditable mode.

It's important to understand that the inputmode attribute doesn't cause any validity requirements to be enforced on input. To require that input conforms to a particular data type, choose an appropriate <input> element type. For specific guidance on choosing <input> types, see the Values section.

/**
 * @description The inputmode content attribute is an enumerated attribute that specifies what kind of input mechanism would be most helpful for users entering content.
 * @documentation https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode
 */
export enum Modes {
  /**
   * @description The user agent should not display a virtual keyboard. This keyword is useful for content that renders its own keyboard control.
   */
  None = 'none',
  /**
   * @description The user agent should display a virtual keyboard capable of text input in the user's locale.
   */
  Text = 'text',
  /**
   * @description The user agent should display a virtual keyboard capable of telephone number input. This should including keys for the digits 0 to 9, the "#" character, and the "*" character. In some locales, this can also include alphabetic mnemonic labels (e.g., in the US, the key labeled "2" is historically also labeled with the letters A, B, and C).
   */
  Tel = 'tel',
  /**
   * @description The user agent should display a virtual keyboard capable of text input in the user's locale, with keys for aiding in the input of URLs, such as that for the "/" and "." characters and for quick input of strings commonly found in domain names such as "www." or ".com".
   */
  Url = 'url',
  /**
   * @description The user agent should display a virtual keyboard capable of text input in the user's locale, with keys for aiding in the input of email addresses, such as that for the "@" character and the "." character.
   */
  Email = 'email',
  /**
   * @description The user agent should display a virtual keyboard capable of numeric input. This keyword is useful for PIN entry.
   */
  Numeric = 'numeric',
  /**
   * @description The user agent should display a virtual keyboard capable of fractional numeric input. Numeric keys and the format separator for the locale should be shown.
   */
  Decimal = 'decimal',
  /**
   * @description The user agent should display a virtual keyboard optimized for search.
   */
  Search = 'search',
}

Enter Key Hints (REF)

Form controls (such as <textarea> or <input> elements) or elements using contenteditable can specify an inputmode attribute to control what kind of virtual keyboard will be used. To further improve the user's experience, the enter key can be customized specifically by providing an enterkeyhint attribute indicating how the enter key should be labeled (or which icon should be shown). The enter key usually represents what the user should do next; typical actions are: sending text, inserting a new line, or searching.

If no enterkeyhint attribute is provided, the user agent might use contextual information from the inputmode, type, or pattern attributes to display a suitable enter key label (or icon).

/**
 * @description The enterkeyhint content attribute is an enumerated attribute that specifies what action label (or icon) to present for the enter key on virtual keyboards. This allows authors to customize the presentation of the enter key in order to make it more helpful for users.
 * @documentation https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute
 */
export enum EnterKeyHints {
  /**
   * @description The user agent should present a cue for the operation 'enter', typically inserting a new line.
   */
  Enter = 'enter',
  /**
   * @description The user agent should present a cue for the operation 'done', typically meaning there is nothing more to input and the input method editor (IME) will be closed.
   */
  Done = 'done',
  /**
   * @description The user agent should present a cue for the operation 'go', typically meaning to take the user to the target of the text they typed.
   */
  Go = 'go',
  /**
   * @description The user agent should present a cue for the operation 'next', typically taking the user to the next field that will accept text.
   */
  Next = 'next',
  /**
   * @description The user agent should present a cue for the operation 'previous', typically taking the user to the previous field that will accept text.
   */
  Previous = 'previous',
  /**
   * @description The user agent should present a cue for the operation 'search', typically taking the user to the results of searching for the text they have typed.
   */
  Search = 'search',
  /**
   * @description The user agent should present a cue for the operation 'send', typically delivering the text to its target.
   */
  Send = 'send',
}

Auto Capitalization Hints (REF)

The autocapitalize global attribute is an enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user.

The attribute must take one of the following values:

off or none: No autocapitalization is applied (all letters default to lowercase)

on or sentences: The first letter of each sentence defaults to a capital letter; all other letters default to lowercase

words: The first letter of each word defaults to a capital letter; all other letters default to lowercase

characters: All letters should default to uppercase The autocapitalize attribute doesn't affect behavior when typing on a physical keyboard. Instead, it affects the behavior of other input mechanisms, such as virtual keyboards on mobile devices and voice input. The behavior of such mechanisms is that they often assist users by automatically capitalizing the first letter of sentences. The autocapitalize attribute enables authors to override that behavior per-element.

The autocapitalize attribute never causes autocapitalization to be enabled for an <input> element with a type attribute whose value is url, email, or password.

/**
 * @description The autocapitalize attribute is an enumerated attribute whose states are the possible autocapitalization hints. The autocapitalization hint specified by the attribute's state combines with other considerations to form the used autocapitalization hint, which informs the behavior of the user agent.
 * @documentation https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization
 */
export enum AutoCapitalizationHints {
  /**
   * @description The user agent and input method should use make their own determination of whether or not to enable autocapitalization.
   */
  Default = 'default',
  /**
   * @description No autocapitalization should be applied (all letters should default to lowercase).
   */
  None = 'none',
  /**
   * @description The first letter of each sentence should default to a capital letter; all other letters should default to lowercase.
   */
  Sentences = 'sentences',
  /**
   * @description The first letter of each word should default to a capital letter; all other letters should default to lowercase.
   */
  Words = 'words',
  /**
   * @description All letters should default to uppercase.
   */
  Characters = 'characters',
}

DEV Community

🔥Input Enums for a better Development Experience 🔥 😋✂️

Auto Complete (REF)

Input Mode (REF)

Enter Key Hints (REF)

Auto Capitalization Hints (REF)

Top comments (0)

Read next

Intro into Tailwind CSS

React Basics~unit test/user event

Singleton Design Pattern: Managing Global States in Your Applications

SQL Leetcode Questions