Description

HTML element <input> is used to define an input field, which can be used to accept data from users.

It is one of the most useful form elements.

It can be used to accept different types of input based on its type attribute, and the default type is text if the attribute is not used.

The below table summarizes its usage.

Usage Details
Placement It is displayed as an Inline element.
Contents None. It is an empty element.
Tags Only an opening tag is required.
Versions HTML 2, 3.2, 4, 4.01, 5

Syntax

Here is the basic syntax of the <input> element.

<input>

Examples

Here is a list of different types of inputs, based on the type attribute value.

<input> (default type is "text", when it is not provided)
<input type="text">
<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="time">
<input type="url">
<input type="week">

In the below example, the <input> element is used to define input elements with types of text, email, and radio.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Element - form</title>
</head>
<body>
        <form action="http://www.example.com/" method="post">
        <fieldset>
            <legend>User Details</legend>
            <label for="name">Name:</label>
            <input type="text" id="name" name="name"><br><br>
            <label for="name">Email:</label>
            <input type="email" id="email" name="email"><br><br>
            <label for="male">Male</label>
            <input type="radio" name="gender" value="male" id="male">
            <label for="female">Female</label>            
            <input type="radio" name="gender" value="female" id="female">
        </fieldset>
    </form>
</body>
</html>

Attributes

The following table shows the list of supported and unsupported attributes for the <input> element.

Attribute Type Details
Element-Specific Attributes The tags <input> has some element-specific attributes listed in the below table.
Global Attributes Like all other HTML tags, the tag <input> supports the HTML Global Attributes.
Event Attributes The tags <input> also supports the HTML Event Attributes.

Here is a list of attributes that are specific to the <input> element.

Attribute Value Description
type button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week		 Specifies the type of input. Check the below links for more details.
accept file-extension
content-type
audio/*
video/*
image/*		 Specifies the types of files that the server accepts.
NOTE: This is applicable for type="file".
align left
right
top
middle
bottom		 Obsolete
Specifies the alignment of the image input.
NOTE: This is applicable for type="image".
alt text Specifies an alternative text to display when the image is not available.
NOTE: This is applicable for type="image".
autocomplete  on
off		 Specifies whether the browser autofill feature for an input element is on or off.
autofocus  autofocus This is a boolean attribute.
Specifies that the input is focused automatically when the document is loaded.
checked checked This is a boolean attribute.
Specifies that the input is selected by default.
NOTE: This is applicable for type="radio" and type="checkbox".
disabled disabled This is a boolean attribute.
Specifies that the input is disabled for user interaction.
form  form-id Specifies the element <form> that the input element is associated with (its form owner).
formaction  URL Specifies the URL of a program that processes the information submitted by the input.
NOTE: This is applicable to type="submit" and type="image".
formenctype  application/x-www-form-urlencoded
multipart/form-data
text/plain		 Specifies how the form data should be encoded when submitting the form data to the server.
NOTE: This is applicable to type="submit" and type="image".
formmethod  get
post		 Specifies the HTTP method that the browser will use to submit the form data
NOTE: This is applicable for type="submit" and type="image".
formnovalidate  formnovalidate This is a boolean attribute.
Specifies that the form control should not be validated when it is submitted.
NOTE: This is applicable to type="submit" and type="image".
formtarget  _blank
_self
_parent
_top
framename		 Specifies a target to display the response that is received after submitting the form.
NOTE: This is applicable to type="submit" and type="image".
height  pixels Specifies the height of the image displayed as a button.
NOTE: This is applicable for type="image".
list  datalist-id Refers to a list of pre-defined options to suggest to the user.
The value must be an id of a <datalist> element on the same page.
max  number
date-time		 Specifies the maximum value for input, which must not be less than its minimum (min attribute) value.
maxlength number Specifies the maximum number of characters that the user can enter in the input box.
min  number
date-time		 Specifies the minimum value for input, which must not be greater than its maximum (max attribute) value.
minlength  number Specifies the minimum number of characters required that the user should enter in the input box.
multiple  multiple This Boolean attribute indicates whether the user can enter more than one value.
name text Assign a name to the input control.
pattern  regexp Specifies a regular expression that an input element's value is checked against.
placeholder  text Provides a hint to the user of what can be entered in the input control.
The placeholder text must not contain line breaks.
readonly readonly This is a boolean attribute.
This indicates that the user cannot modify the input value and is a read-only value.
required  required This is a boolean attribute.
Specifies that the user must fill in a value before submitting the form.
size number Sets the initial width, in terms of characters, of the input.
If not specified, the default value 20 is used.
src URL Specifies the location of the image to use as a submit button.
NOTE: This is applicable for type="image".
step  number
date-time		 Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set.
value text Specifies the initial value of the input.
width  pixels Specifies the width of the image displayed as a button.
NOTE: This is applicable for type="image".

Browser Compatibility

The tags <input> is supported in all modern browsers.

  • Google Chrome 1+
  • Internet Explorer or Edge 2+
  • Firefox 1+
  • Apple Safari 1+
  • Opera 2.1+

Related Links