Computer >> Computer tutorials >  >> Programming >> HTML

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 How to include an input field in HTML?
on
off
Specifies for enabling or disabling of autocomplete in <input> element
autofocus How to include an input field in HTML?
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 How to include an input field in HTML?
form_id
Specifies one or more forms
formaction How to include an input field in HTML?
URL
Specifies the URL of the file that will process the input control when the form is submitted
formenctypeHow to include an input field in HTML? 
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 How to include an input field in HTML?
post
get
Defines the HTTP method for sending data to the action URL
formnovalidate How to include an input field in HTML?
Formnovalidate
Defines that form elements should not be validated when submitted
fromtarget How to include an input field in HTML?
_blank
_self
_parent
_top
Specifies the target where the response will be a display that is received after submitting the form
height How to include an input field in HTML?
Pixels
Specifies the height
list How to include an input field in HTML?
datalist_id
Specifies the <datalist> element that contains pre-defined options for an <input> element
max How to include an input field in HTML?
Autofocus
Specifies the maximum value.
maxlength
Number
Defines the maximum number of characters allowed in a text field
min How to include an input field in HTML?
Number
Specifies the minimum value
multiple How to include an input field in HTML?
Multiple
Specifies that a user can enter multiple values
name
Text
Assigns a name to the input control.
pattern How to include an input field in HTML?
Regexp
Specifies a regular expression that an <input> element's value is checked against
placeholder How to include an input field in HTML?
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 How to include an input field in HTML?
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 How to include an input field in HTML?
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 How to include an input field in HTML?
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>