Home  »  HTML   »   input

Input is a tag that takes input from the user. There are many types of inputs that can be defined using the attributes of the input tag.

name

represents the name for the control submitted as a pair with its value.

  • text
type

represents type of the input element.

  • button - clickable button. Usually needs Javascript to activate
  • checkbox - check/tick box.
  • color - pickable color.
  • date - field to select date
  • datetime-local - date and time field (dd-mm-yyyy time)
  • email - email address field
  • file - browse button for file upload with select a file field.
  • hidden - hidden input field. Users cannot access this field but its value will be sent when a form is submitted.
  • image - image that acts as a submit button.
  • number - text field that allows only numeric values.
  • password - text field that displays asterisks when input added.
  • radio - radio button inputs
  • range - slider control to select numeric values to define range
  • reset - input control that acts as a reset button
  • search - text field that allows adding a search string
  • submit - submit button
  • tel - text field that allows only numeric values to add phone numbers
  • text - single-line text field. Default value.
  • time - field to select the time.
  • URL - text field that allows only absolute URL.
value

represents value of input element.

  • text
checked

represents an element that is already selected when the page loads, when the input type is checkbox or radio.

  • none
maxlength

represents the maximum number of characters allowed in the field.

  • number
minlength

represents the minimum number of characters allowed in the field.

  • number
src

represents the URL of an image that is used as a submit button when the input type is an image.

  • URL
alt

represents a text which is displayed when the images cannot display if the input type is an image.

  • text 
accept

represents which file is allowed to be attached with the form when the input type is the file.

  • audio - select audio file only.
  • video - select video file only.
  • image - select image file only.
  • media_type - MIME type file.
  • file_extension - select file with specific file extension such as .pdf, .doc, etc.
disabled

represents the input element is disabled.

  • none
readonly

represents the input element cannot be changed.

  • none
autocomplete

represents whether the input field should be filled automatically when a form is submitted.

  • on - browser automatically complete the values
  • off - the user has to fill the data by itself.
autofocus

represents the input field that is automatically focused when the page loads.

  • none
dirname

represents the name of the field that is used for sending text direction when the form is submitted.

  • inputname.dir - ltr (left to right) / rtl (right to left)
list

represents a list of data for an input element.

  • datalist_id
max

represents maximum value for an input element.

  • number, date
min

represents minimum value for an input element.

  • number, date
step

represents the increment or decrement value in which the number should increase or decrease.

  • number
multiple

represents one or more data can be entered in input field. Usually used when input type is email or file.

  • none
pattern

represents regular expression for which the value of input element is checked against.

  • regexp
placeholder

represents a visible text that describes what value to be entered in that input field.

  • text
required

represents that the data should be filled in input field compulsory.

  • none
size

represents the width as per characters of input field.

  • number

HTML input Example:

Edit Example