html tutorial - <input> - Input Tag in HTML - html5 - html code - html form



input tag in html

Learn html - html tutorial - input tag in html - html examples - html programs

  • The <input> tag is used to accept the data from the user.
  • The <input> elements are used inside the <form> element.
  • It is used to declare the input controls that allows user to enter the data.
  • To depending on the type attribute, an input field can change in many different ways.
  • The <input> tag supports the Global Attributes and Event Attribute.

Syntax for <input> tag:

<input>content</input>

Differences between HTML 4.01 and HTML 5 for <input> tag:

HTML 4.0.1

  • HTML 4 is supports ”align” attribute.

HTML 5

  • HTML 5 is not support an “align” attribute.
  • The <input> tag has several new attributes in HTML 5.
  • The type attribute has several new values in HTML 5.

Sample Coding for <input> tag:

Tryit<!DOCTYPE html>
<html >
    <head>
        <title>Wikitechy input tag</title>
    </head>
    <body>
        <h2>input tag with example</h2>
        <form>
            First name:<br>
            <input type="text" name="FirstName" value="Wiki">
            <br>
            Last name:<br>
            <input type="text" name="LastName" value="techy">
            <br><br>
            <input type="submit" value="Submit">
        </form>
    </body>
</html>

Code Explanation for <input> tag:

<input> Tag Code Explanation

  1. The <input> tag is used to get the inputs from the user.

Output for <input> tag:

<input> Tag Output

  1. The output shows the input textbox with the value “Wiki”.

Attributes of <input> tag:

Attribute Value HTML4 HTML5 Description
accept file_extension
audio/*
video/*
image/*
media_type
Yes Yes It is used to specify more than one value. The values will be separate by using comma.
align left
right
top
middle
bottom
Yes No It is used to denotes the alignment of an image input.
maxlength number Yes Yes It Specifies the maximum number of characters allowed in an <input> element.
name text Yes Yes It Specifies the name of an <input> element.
value text Yes Yes It Specifies the value of an <input> element.
checked checked Yes Yes If type=”radio” or type=”checkbox” it will already be selected when the page loads.
disabled disabled Yes Yes Input control disable. The button won't accept changes from the user. It also can’t receive focus and will be skipped when tabbing.
alt text Yes Yes Defines an alternate text for images.
readonly readonly Yes Yes It Specifies that an input field is read-only.
size number Yes Yes It Specifies the width, in characters, of an <input> element.
src URL Yes Yes It Specifies the URL of the image to use as a submit button (only for type="image").
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
Yes Yes It Specifies the type <input> element to display
form form_id No Yes It specifies one or more forms.
formaction URL No Yes It denotes 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
No Yes It specifies how the form-data should be encoded when submitting it to the serve.
formmethod get
post
No Yes It defines the HTTP method for sending data to the action URL.
formnovalidate formnovalidate No Yes It defines that form elements should not be validated when submitted.
formtarget _blank
_self
_parent
_top
framename
No Yes It Specifies where to display the response that is received after submitting the form (for type="submit" and type="image").
height pixels No Yes It Specifies the height of an <input> element (only for type="image").
list datalist_id No Yes It refers to a <datalist> element that contains pre-defined options for an <input> element.
max number
date
No Yes It Specifies the maximum value for an <input> element.
autocomplete on
off
No Yes Defines whether an <input> element should have autocomplete enabled.
autofocus autofocus No Yes Denotes that <input> element should automatically get focus when the page loads.
min number
date
No Yes It Specifies a minimum value for an <input> element.
multiple multiple No Yes It Specifies that a user can enter more than one value in an <input> element.
pattern regexp No Yes It Specifies a regular expression that an <input> element's value is checked against.
placeholder text No Yes It Specifies a short hint that describes the expected value of an <input> element.
required required No Yes It Specifies that an input field must be filled out before submitting the form.
step number No Yes It Specifies the legal number intervals for an input field.
width pixels No Yes It Specifies the width of an <input> element (only for type="image").

Browser Support for <input> tag in HTML:

Yes Yes Yes Yes Yes

Related Searches to input tag in html