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>

Updated on: 03-Mar-2020

207 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements