The HTML <input>tag is used within a form to declare an input element - a control that allows the user to input data.

The following are the attributes −

How to include an input field in HTML?

The HTML <input>tag is used within a form to declare an input element - a control that allows the user to input data.

The following are the attributes −

Attribute
 Value
 Description
accept
 content types
 Specifies a comma-separated list of content types that the server accepts
align
 left
right
top
middle
bottom
 Deprecated − Defines the alignment of content
alt
 Text
 This specifies text to be used in case the browser/user agent can't render the input control
autocomplete
on
off
 Specifies for enabling or disabling of autocomplete in <input> element
autofocus
Autofocus
 specifies that <input> element should automatically get focus when the page loads
checked
 Checked
 If type = "radio" or type = "checkbox" it will already be selected when the page loads.
disabled
 Disabled
 Disables the input control. The button won't accept changes from the user. It also cannot receive focus and will be skipped when tabbing.
form
form_id
 Specifies one or more forms
formaction
URL
 Specifies the URL of the file that will process the input control when the form is submitted
formenctype 
 application/x-www-form-urlencoded

multipart/form-data

text/plain
 Specifies how the form-data should be encoded when submitting it to the serve
formmethod
post
get
 Defines the HTTP method for sending data to the action URL
formnovalidate
Formnovalidate
 Defines that form elements should not be validated when submitted
fromtarget
_blank
_self
_parent
_top
 Specifies the target where the response will be a display that is received after submitting the form
height
Pixels
 Specifies the height
list
datalist_id
 Specifies the <datalist> element that contains pre-defined options for an <input> element
max
Autofocus
 Specifies the maximum value.
maxlength
 Number
 Defines the maximum number of characters allowed in a text field
min
Number
 Specifies the minimum value
multiple
Multiple
 Specifies that a user can enter multiple values
name
 Text
 Assigns a name to the input control.
pattern
Regexp
 Specifies a regular expression that an <input> element's value is checked against
placeholder
Text
 Specifies a short hint that describes the expected value.
readonly
 Readonly
 Sets the input control to read-only. It won't allow the user to change the value. The control, however, can receive focus and are included when tabbing through the form controls
required
required
 Specifies that an input field must be filled out before submitting the form
size
 Number
 Specifies the width of the control. If type = "text" or type = "password" this refers to the width in characters. Otherwise, it's in pixels.
src
 URL
 Defines the URL of the image to display. Used only for type = "image".
step
Number
 Specifies the legal number intervals for an input field
type
 button checkboxcolor 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 control.
value
 Text
 Specifies the intial value for the control.If type = "checkbox" or type = "radio" this attribute is required.
width
Pixels
 Specifies the width

Example

You can try to run the following code to implement <input> element in HTML −

<!DOCTYPE html>
<html>
   <head>
      <title>HTML input Tag</title>
   </head>
   <body>
      <form action = "/cgi-bin/hello_get.cgi" method = "get">
         First name:
         <input type = "text" name = "first_name" value = "" maxlength = "100" />
         <br />
         Last name:
         <input type = "text" name = "last_name" value = "" maxlength = "100" />
         <input type = "submit" value = "Submit" />
      </form>
   </body>
</html>
vanithasree
vanithasree

Updated on: 2020-03-03T07:24:01+05:30