HTML Input Types:You Should Must Know

HTML Input element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.

Definition and Usage

The <input type=”text”> defines a single-line text field.

The default width of the text field is 20 characters.

Tip: Always add the <label> tag for best accessibility practices!

HTML Input Types

Here are the different input types you can use in HTML:

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">
  • <input type="time">
  • <input type="url">
  • <input type="week">

Attributes

The <input> element is so powerful because of its attributes; the type attribute, described with examples above, being the most important. Since every <input> element, regardless of type, is based on the HTMLInputElement interface, they technically share the exact same set of attributes. However, in reality, most attributes have an effect on only a specific subset of input types. In addition, the way some attributes impact an input depends on the input type, impacting different input types in different ways.

AttributeType or TypesDescription
acceptfileHint for expected file type in file upload controls
altimagealt attribute for the image type. Required for accessibility
autocompleteallHint for form autofill feature
autofocusallAutomatically focus the form control when the page is loaded
capturefileMedia capture input method in file upload controls
checkedradio, checkboxWhether the command or control is checked
dirnametext, searchName of form field to use for sending the element’s directionality in form submission
disabledallWhether the form control is disabled
formallAssociates the control with a form element
formactionimage, submitURL to use for form submission
formenctypeimage, submitForm data set encoding type to use for form submission
formmethodimage, submitHTTP method to use for form submission
formnovalidateimage, submitBypass form control validation for form submission
formtargetimage, submitBrowsing context for form submission
heightimageSame as height attribute for <img>; vertical dimension
listalmost allValue of the id attribute of the <datalist> of autocomplete options
maxnumeric typesMaximum value
maxlengthpassword, search, tel, text, urlMaximum length (number of characters) of value
minnumeric typesMinimum value
minlengthpassword, search, tel, text, urlMinimum length (number of characters) of value

Read also:How to Include CSS in HTML Pages

Exit mobile version