Horje
What is HTML <input> Tag | HTML Tag Code
What is HTML <input> Tag

An HTML form with three input fields; two text fields and one submit button.

Definition and Usage

The <input> tag specifies an input field where the user can enter data.

The <input> element is the most important form element.

The <input> element can be displayed in several ways, depending on the type attribute.

The different input types are as follows:

  • <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="text"> (default value)
  • <input type="time">
  • <input type="url">
  • <input type="week">

Look at the type attribute to see examples for each input type!


Tips and Notes

Tip: Always use the <label> tag to define labels for <input type="text">, <input type="checkbox">, <input type="radio">, <input type="file">, and <input type="password">.


Browser Support

 

Attributes

Attribute Value Description
accept file_extension
audio/*
video/*
image/*
media_type
Specifies a filter for what file types the user can pick from the file input dialog box (only for type="file")
alt text Specifies an alternate text for images (only for type="image")
autocomplete on
off
Specifies whether an <input> element should have autocomplete enabled
autofocus autofocus Specifies that an <input> element should automatically get focus when the page loads
checked checked Specifies that an <input> element should be pre-selected when the page loads (for type="checkbox" or type="radio")
dirname inputname.dir Specifies that the text direction will be submitted
disabled disabled Specifies that an <input> element should be disabled
form form_id Specifies the form the <input> element belongs to
formaction URL Specifies the URL of the file that will process the input control when the form is submitted (for 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 it to the server (for type="submit" and type="image")
formmethod get
post
Defines the HTTP method for sending data to the action URL (for type="submit" and type="image")
formnovalidate formnovalidate Defines that form elements should not be validated when submitted
formtarget _blank
_self
_parent
_top
framename
Specifies where to display the response that is received after submitting the form (for type="submit" and type="image")
height pixels Specifies the height of an <input> element (only for type="image")
list datalist_id Refers to a <datalist> element that contains pre-defined options for an <input> element
max number
date
Specifies the maximum value for an <input> element
maxlength number Specifies the maximum number of characters allowed in an <input> element
min number
date
Specifies a minimum value for an <input> element
minlength number Specifies the minimum number of characters required in an <input> element
multiple multiple Specifies that a user can enter more than one value in an <input> element
name text Specifies the name of an <input> element
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 of an <input> element
popovertarget element_id Specifies which popover element to invoke (only for type="button")
popovertargetaction hide
show
toggle
Specifies what happens to the popover element when you click the button (only for type="button")
readonly readonly Specifies that an input field is read-only
required required Specifies that an input field must be filled out before submitting the form
size number Specifies the width, in characters, of an <input> element
src URL Specifies the URL of the image to use as a submit button (only for type="image")
step number
any
Specifies the interval between legal numbers in an input field
type button
checkbox
color
date
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
Specifies the type <input> element to display
value text Specifies the value of an <input> element
 
width pixels Specifies the width of an <input> element (only for type="image")

How to add HTML <input> Tag

An HTML form with three input fields; two text fields and one submit button
index.html
Example: HTML
<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form> 

Output should be:

How to add HTML <input> Tag

How to add HTML <input> accept Attribute

Specify what file types the user can pick from the file input dialog box.

Definition and Usage

The accept attribute specifies a filter for what file types the user can pick from the file input dialog box.

Note: The accept attribute can only be used with <input type="file">.

Tip: Do not use this attribute as a validation tool. File uploads should be validated on the server.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<input accept="file_extension|audio/*|video/*|image/*|media_type">

Tip: To specify more than one value, separate the values with a comma (e.g. <input accept="audio/*,video/*,image/*" />.

Attribute Values

Value Description
file_extension Specify the file extension(s) (e.g: .gif, .jpg, .png, .doc) the user can pick from
audio/* The user can pick all sound files
video/* The user can pick all video files
image/* The user can pick all image files
media_type A valid media type, with no parameters. Look at IANA Media Types for a complete list of standard media types
index.html
Example: HTML
<form action="/action_page.php">
  <label for="img">Select image:</label>
  <input type="file" id="img" name="img" accept="image/*">
  <input type="submit">
</form>

Output should be:

How to add HTML <input> accept Attribute

How to add HTML <input> accept file_extension Attribute

file_extension Specify the file extension(s) (e.g: .gif, .jpg, .png, .doc) the user can pick from
index.html
Example: HTML
<form action="/action_page.php">
  <label for="img">Select image:</label>
  <input type="file" id="img" name="img" accept="file_extension">
  <input type="submit">
</form>

Output should be:

How to add HTML <input> accept file_extension Attribute

How to add HTML <input> accept audio/* Attribute

audio/* The user can pick all sound files
index.html
Example: HTML
<form action="/action_page.php">
  <label for="img">Select image:</label>
  <input type="file" id="img" name="img" accept="audio/*">
  <input type="submit">
</form>

Output should be:

How to add HTML <input> accept audio/* Attribute

How to add HTML <input> accept video/* Attribute

video/* The user can pick all video files
index.html
Example: HTML
<form action="/action_page.php">
  <label for="img">Select image:</label>
  <input type="file" id="img" name="img" accept="video/*">
  <input type="submit">
</form>

Output should be:

How to add HTML <input> accept video/* Attribute

How to add HTML <input> accept image/* Attribute

image/* The user can pick all image files
index.html
Example: HTML
<form action="/action_page.php">
  <label for="img">Select image:</label>
  <input type="file" id="img" name="img" accept="image/*">
  <input type="submit">
</form>

Output should be:

How to add HTML <input> accept image/* Attribute

How to add HTML <input> accept media_type Attribute

media_type A valid media type, with no parameters. Look at IANA Media Types for a complete list of standard media types
index.html
Example: HTML
<form action="/action_page.php">
  <label for="img">Select image:</label>
  <input type="file" id="img" name="img" accept="media_type">
  <input type="submit">
</form>

Output should be:

How to add HTML <input> accept media_type Attribute

How to add HTML <input> alt Attribute

An HTML form with an image that represents the submit button.

alt text Specifies an alternate text for images (only for type="image")

Definition and Usage

The alt attribute provides an alternate text for the user, if he/she for some reason cannot view the image (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

Note: The alt attribute can only be used with <input type="image">.


Browser Support

Syntax

<input alt="text">

Attribute Values

Value Description
text Specifies an alternate text for the image
index.html
Example: HTML
<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname">
  <input type="image" src="https://horje.com/uploads/demo/2024-03-05-10-50-41-submit.gif" alt="Submit" width="48" height="48">
</form> 

Output should be:

How to add HTML <input> alt Attribute

How to add HTML <input> autocomplete Attribute

An HTML form where the username and password does NOT get autocompleted.

Definition and Usage

The autocomplete attribute specifies if browsers should try to predict the value of an input field or not. You can also specify which type of value you expect in the input field.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Tip: In some browsers you may need to activate an autocomplete function for this to work (Look under "Preferences" in the browser's menu).


Syntax

<input autocomplete="on|off|type-of-value">

Attribute Values

Value Description
on Default. Autocomplete is on (enabled)
off Autocomplete is off (disabled)
address-line1 Expects the first line of the street address
address-line2 Expects the second line of the street address
address-line3 Expects the third line of the street address
address-level1 Expects the first level of the address, e.g. the county
address-level2 Expects the second level of the address, e.g. the city
address-level3 Expects the third level of the address
address-level4 Expects the fourth level of the address
street-address Expects the full street address
country Expects the country code
country-name Expects the country name
postal-code Expects the post code
name Expects the full name
additional-name Expects the middle name
family-name Expects the last name
give-name Expects the first name
honoric-prefix Expects the title, like "Mr", "Ms" etc.
honoric-suffix Expects the suffix, like "5", "Jr." etc.
nickname Expects the nickname
organization-title Expects the job title
username Expects the username
new-password Expects a new password
current-password Expects the current password
bday Expects the full birthday date
bday-day Expects the day of the birthday date
bday-month Expects the month of the birthday date
bday-year Expects the year of the birthday date
sex Expects the gender
one-time-code Expects a one time code for verification etc.
organization Expects the company name
cc-name Expects the credit card owner's full name
cc-given-name Expects the credit card owner's first name
cc-additional-name Expects the credit card owner's middle name
cc-family-name Expects the credit card owner's full name
cc-number Expects the credit card's number
cc-exp Expects the credit card's expiration date
cc-exp-month Expects the credit card's expiration month
cc-exp-year Expects the credit card's expiration year
cc-csc Expects the CVC code
cc-type Expects the credit card's type of payment
transaction-currency Expects the currency
transaction-amount Expects a number, the amount
language Expects the preferred language
url Expects a we address
email Expects the email address
photo Expects an image
tel Expects the full phone number
tel-country-code Expects the country code of the phone number
tel-national Expects the phone number with no country code
tel-area-code Expects the area code of the phone number
tel-local Expects the phone number with no country code and no area code
tel-local-prefix Expects the local prefix of the phone number
tel-local-suffix Expects the local suffix of the phone number
tel-extension Expects the extension code of the phone number
impp Expects the url of an instant messaging protocol endpoint
index.html
Example: HTML
<form action="/action_page.php">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br><br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" autocomplete="new-password"><br><br>
  <input type="submit">
</form> 

Output should be:

How to add HTML <input> autocomplete Attribute

How to add HTML <input> autocomplete on Attribute

on Default. Autocomplete is on (enabled)
index.html
Example: HTML
<form action="/action_page.php">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br><br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" autocomplete="on"><br><br>
  <input type="submit">

Output should be:

How to add HTML <input> autocomplete on Attribute

How to add HTML <input> autocomplete off Attribute

off Autocomplete is off (disabled)
index.html
Example: HTML
<form action="/action_page.php">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br><br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" autocomplete="off"><br><br>
  <input type="submit">
</form>

Output should be:

How to add HTML <input> autocomplete off Attribute

How to add HTML <input> autocomplete address-line1 Attribute

address-line1 Expects the first line of the street address
index.html
Example: HTML
<form action="/action_page.php">
  <label for="address-line1">Address:</label>
  <input type="text" id="address-line1" name="address-line1"  autocomplete="address-line1"><br><br>
  <input type="submit">
</form>

Output should be:

How to add HTML <input> autocomplete address-line1 Attribute

How to add HTML <input> autocomplete address-line2 Attribute

address-line2 Expects the second line of the street address
index.html
Example: HTML
<form action="/action_page.php">
  <label for="address-line2">Address:</label>
  <input type="text" id="address-line2" name="address-line1"  autocomplete="address-line2"><br><br>
  <input type="submit">
</form>

Output should be:

How to add HTML <input> autocomplete address-line2 Attribute

How to add HTML <input> autocomplete address-line3 Attribute

address-line3 Expects the third line of the street address
index.html
Example: HTML
<form action="/action_page.php">
  <label for="address-line3">Address:</label>
  <input type="text" id="address-line3" name="address-line3"  autocomplete="address-line3"><br><br>
  <input type="submit">
</form>

Output should be:

How to add HTML <input> autocomplete address-line3 Attribute

How to add HTML <input> autocomplete address-level1 Attribute

address-level1 Expects the first level of the address, e.g. the county
index.html
Example: HTML
<form action="/action_page.php">
  <label for="address-line">Address:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="address-level1"><br><br>
  <input type="submit">
</form>

Output should be:

How to add HTML <input> autocomplete address-level1 Attribute

How to add HTML <input> autocomplete address-level2 Attribute

address-level2 Expects the second level of the address, e.g. the city
index.html
Example: HTML
<form action="/action_page.php">
  <label for="address-line">Address:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="address-level2"><br><br>
  <input type="submit">
</form>

Output should be:

How to add HTML <input> autocomplete address-level2 Attribute

How to add HTML <input> autocomplete address-level3 Attribute

address-level3 Expects the third level of the address
index.html
Example: HTML
<form action="/action_page.php">
  <label for="address-line">Address:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="address-level3"><br><br>
  <input type="submit">
</form>

Output should be:

How to add HTML <input> autocomplete address-level3 Attribute

How to add HTML <input> autocomplete address-line4 Attribute

address-level4 Expects the fourth level of the address
index.html
Example: HTML
<form action="/action_page.php">
  <label for="address-line">Address:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="address-level4"><br><br>
  <input type="submit">
</form>

Output should be:

How to add HTML <input> autocomplete address-line4 Attribute

How to add HTML <input> autocomplete street-address Attribute

street-address Expects the full street address
index.html
Example: HTML
<form action="/action_page.php">
  <label for="address-line">Address:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="street-address"><br><br>
  <input type="submit">
</form>

Output should be:

How to add HTML <input> autocomplete street-address Attribute

How to add HTML <input> autocomplete country Attribute

country Expects the country code
index.html
Example: HTML
<form action="/action_page.php">
  <label for="address-line">Address:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="country"><br><br>
  <input type="submit">
</form>

Output should be:

How to add HTML <input> autocomplete country Attribute

How to add HTML <input> autocomplete country-name Attribute

country-name Expects the country name
index.html
Example: HTML
<form action="/action_page.php">
  <label for="address-line">Address:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="country-name"><br><br>
  <input type="submit">
</form>

Output should be:

How to add HTML <input> autocomplete country-name Attribute

How to add HTML <input> autocomplete postal-code Attribute

postal-code Expects the post code
index.html
Example: HTML
<form action="/action_page.php">
  <label for="address-line">Address:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="postal-code"><br><br>
  <input type="submit">
</form>

Output should be:

How to add HTML <input> autocomplete postal-code Attribute

How to add HTML <input> autocomplete name Attribute

name Expects the full name
index.html
Example: HTML
<form action="/action_page.php">
  <label for="address-line">Name:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="name"><br><br>
  <input type="submit">
</form>

Output should be:

How to add HTML <input> autocomplete name Attribute

How to add HTML <input> autocomplete additional-name Attribute

additional-name Expects the middle name
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
  <label for="address-line">Name:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="additional-name"><br><br>
  <input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete additional-name Attribute

How to add HTML <input> autocomplete family-name Attribute

family-name Expects the last name
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
  <label for="address-line">Name:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="family-name"><br><br>
  <input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete family-name Attribute

How to add HTML <input> autocomplete give-name Attribute

give-name Expects the first name
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
  <label for="address-line">Name:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="give-name"><br><br>
  <input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete give-name Attribute

How to add HTML <input> autocomplete honoric-prefix Attribute

honoric-prefix Expects the title, like "Mr", "Ms" etc.
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
  <label for="address-line">Name:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="honoric-prefix"><br><br>
  <input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete honoric-prefix Attribute

How to add HTML <input> autocomplete name Attribute

honoric-suffix Expects the suffix, like "5", "Jr." etc.
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
  <label for="address-line">Name:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="honoric-suffix"><br><br>
  <input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete name Attribute

How to add HTML <input> autocomplete nickname Attribute

nickname Expects the nickname
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
  <label for="address-line">Name:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="nickname"><br><br>
  <input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete nickname Attribute

How to add HTML <input> autocomplete organization-title Attribute

organization-title Expects the job title
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
  <label for="address-line">Name:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="organization-title"><br><br>
  <input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete organization-title Attribute

How to add HTML <input> autocomplete username Attribute

username Expects the username
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
  <label for="address-line">Name:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="username"><br><br>
  <input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete username Attribute

How to add HTML <input> autocomplete new-password Attribute

new-password Expects a new password
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
  <label for="address-line">Name:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="new-password"><br><br>
  <input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete new-password Attribute

How to add HTML <input> autocomplete new-password Attribute

new-password Expects a new password
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
  <label for="address-line">Name:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="new-password"><br><br>
  <input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete new-password Attribute

How to add HTML <input> autocomplete current-password Attribute

current-password Expects the current password
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
  <label for="address-line">Name:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="current-password"><br><br>
  <input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete current-password Attribute

How to add HTML <input> autocomplete bday Attribute

bday Expects the full birthday date
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
  <label for="address-line">Name:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="bday"><br><br>
  <input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete bday Attribute

How to add HTML <input> autocomplete bday-day Attribute

bday-day Expects the day of the birthday date
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
  <label for="address-line">Name:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="bday-day"><br><br>
  <input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete bday-day Attribute

How to add HTML <input> autocomplete bday-month Attribute

bday-month Expects the month of the birthday date
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
  <label for="address-line">Name:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="bday-month"><br><br>
  <input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete bday-month Attribute

How to add HTML <input> autocomplete bday-year Attribute

bday-year Expects the year of the birthday date
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
  <label for="address-line">Name:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="bday-year"><br><br>
  <input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete bday-year Attribute

How to add HTML <input> autocomplete sex Attribute

sex Expects the gender
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
  <label for="address-line">Name:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="sex"><br><br>
  <input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete sex Attribute

How to add HTML <input> autocomplete one-time-code Attribute

one-time-code Expects a one time code for verification etc.
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
  <label for="address-line">Name:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="one-time-code"><br><br>
  <input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete one-time-code Attribute

How to add HTML <input> autocomplete organization Attribute

organization Expects the company name
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
  <label for="address-line">Name:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="organization"><br><br>
  <input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete organization Attribute

How to add HTML <input> autocomplete cc-name Attribute

cc-name Expects the credit card owner's full name
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
  <label for="address-line">Name:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="cc-name"><br><br>
  <input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete cc-name Attribute

How to add HTML <input> autocomplete cc-given-name Attribute

cc-given-name Expects the credit card owner's first name
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
  <label for="address-line">Name:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="cc-given-name"><br><br>
  <input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete cc-given-name Attribute

How to add HTML <input> autocomplete cc-additional-name Attribute

cc-additional-name Expects the credit card owner's middle name
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
  <label for="address-line">Name:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="cc-additional-name"><br><br>
  <input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete cc-additional-name Attribute

How to add HTML <input> autocomplete cc-family-name Attribute

cc-family-name Expects the credit card owner's full name
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
  <label for="address-line">Name:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="cc-family-name"><br><br>
  <input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete cc-family-name Attribute

How to add HTML <input> autocomplete cc-number Attribute

cc-number Expects the credit card's number
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
  <label for="address-line">Name:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="cc-number"><br><br>
  <input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete cc-number Attribute

How to add HTML <input> autocomplete cc-exp Attribute

cc-exp Expects the credit card's expiration date
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
  <label for="address-line">Name:</label>
  <input type="text" id="address-line" name="address-line"  autocomplete="cc-exp"><br><br>
  <input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete cc-exp Attribute

How to add HTML <input> autocomplete cc-exp-month Attribute

cc-exp-month Expects the credit card's expiration month
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
<label for="address-line">Name:</label>
<input type="text" id="address-line" name="address-line"  autocomplete="cc-exp-month"><br><br>
<input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete cc-exp-month Attribute

How to add HTML <input> autocomplete cc-exp-year Attribute

cc-exp-year Expects the credit card's expiration year
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
<label for="address-line">Name:</label>
<input type="text" id="address-line" name="address-line"  autocomplete="cc-exp-year"><br><br>
<input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete cc-exp-year Attribute

How to add HTML <input> autocomplete cc-csc Attribute

cc-csc Expects the CVC code
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
<label for="address-line">Name:</label>
<input type="text" id="address-line" name="address-line"  autocomplete="cc-csc"><br><br>
<input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete cc-csc Attribute

How to add HTML <input> autocomplete cc-type Attribute

cc-type Expects the credit card's type of payment
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
<label for="address-line">Name:</label>
<input type="text" id="address-line" name="address-line"  autocomplete="cc-type"><br><br>
<input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete cc-type Attribute

How to add HTML <input> autocomplete transaction-currency Attribute

transaction-currency Expects the currency
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
<label for="address-line">Name:</label>
<input type="text" id="address-line" name="address-line"  autocomplete="transaction-currency"><br><br>
<input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete transaction-currency Attribute

How to add HTML <input> autocomplete transaction-amount Attribute

transaction-amount Expects a number, the amount
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
<label for="address-line">Name:</label>
<input type="text" id="address-line" name="address-line"  autocomplete="transaction-amount"><br><br>
<input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete transaction-amount Attribute

How to add HTML <input> autocomplete language Attribute

language Expects the preferred language
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
<label for="address-line">Name:</label>
<input type="text" id="address-line" name="address-line"  autocomplete="language"><br><br>
<input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete language Attribute

How to add HTML <input> autocomplete url Attribute

url Expects a we address
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
<label for="address-line">Name:</label>
<input type="text" id="address-line" name="address-line"  autocomplete="url"><br><br>
<input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete url Attribute

How to add HTML <input> autocomplete email Attribute

email Expects the email address
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
<label for="address-line">Name:</label>
<input type="text" id="address-line" name="address-line"  autocomplete="email"><br><br>
<input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete email Attribute

How to add HTML <input> autocomplete photo Attribute

photo Expects an image
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
<label for="address-line">Name:</label>
<input type="text" id="address-line" name="address-line"  autocomplete="photo"><br><br>
<input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete photo Attribute

How to add HTML <input> autocomplete tel Attribute

tel Expects the full phone number
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
<label for="address-line">Name:</label>
<input type="text" id="address-line" name="address-line"  autocomplete="tel"><br><br>
<input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete tel Attribute

How to add HTML <input> autocomplete tel-country-code Attribute

tel-country-code Expects the country code of the phone number
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
<label for="address-line">Name:</label>
<input type="text" id="address-line" name="address-line"  autocomplete="tel-country-code"><br><br>
<input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete tel-country-code Attribute

How to add HTML <input> autocomplete tel-national Attribute

tel-national Expects the phone number with no country code
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
<label for="address-line">Name:</label>
<input type="text" id="address-line" name="address-line"  autocomplete="tel-national"><br><br>
<input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete tel-national Attribute

How to add HTML <input> autocomplete tel-area-code Attribute

tel-area-code Expects the area code of the phone number
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
<label for="address-line">Name:</label>
<input type="text" id="address-line" name="address-line"  autocomplete="tel-area-code"><br><br>
<input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete tel-area-code Attribute

How to add HTML <input> autocomplete tel-local Attribute

tel-local Expects the phone number with no country code and no area code
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
<label for="address-line">Name:</label>
<input type="text" id="address-line" name="address-line"  autocomplete="tel-local"><br><br>
<input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete tel-local Attribute

How to add HTML <input> autocomplete tel-local-prefix Attribute

tel-local-prefix Expects the local prefix of the phone number
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
<label for="address-line">Name:</label>
<input type="text" id="address-line" name="address-line"  autocomplete="tel-local-prefix"><br><br>
<input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete tel-local-prefix Attribute

How to add HTML <input> autocomplete tel-local-suffix Attribute

tel-local-suffix Expects the local suffix of the phone number
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
<label for="address-line">Name:</label>
<input type="text" id="address-line" name="address-line"  autocomplete="tel-local-suffix"><br><br>
<input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete tel-local-suffix Attribute

How to add HTML <input> autocomplete tel-extension Attribute

tel-extension Expects the extension code of the phone number
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
<label for="address-line">Name:</label>
<input type="text" id="address-line" name="address-line"  autocomplete="tel-extension"><br><br>
<input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete tel-extension Attribute

How to add HTML <input> autocomplete impp Attribute

impp Expects the url of an instant messaging protocol endpoint
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<form action="/action_page.php">
<label for="address-line">Name:</label>
<input type="text" id="address-line" name="address-line"  autocomplete="impp"><br><br>
<input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autocomplete impp Attribute

How to add HTML <input> autofocus Attribute

Let the "First name" input field automatically get focus when the page loads:

Definition and Usage

The autofocus attribute is a boolean attribute.

When present, it specifies that an <input> element should automatically get focus when the page loads.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<input autofocus>

index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The autofocus attribute</h1>

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname" autofocus><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> autofocus Attribute

How to add HTML <input> checked Attribute

Definition and Usage

The checked attribute is a boolean attribute.

When present, it specifies that an <input> element should be pre-selected (checked) when the page loads.

The checked attribute can be used with <input type="checkbox"> and <input type="radio">.

The checked attribute can also be set after the page load, with a JavaScript.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<input checked>

index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The input checked attribute</h1>

<form action="/action_page.php" method="get">
  <input type="checkbox" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" name="vehicle3" value="Boat" checked>
  <label for="vehicle3"> I have a boat</label><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> checked Attribute

How to add HTML <input> dirname Attribute

An HTML form where the field's text direction will be submitted:

Definition and Usage

The dirname attribute enables the submission of the text direction of the input field

The dirname attribute's value is always the name of the input field, followed by ".dir".


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The dirname attribute</h1>

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname" dirname="fname.dir">
  <input type="submit" value="Submit">
</form>

<p>When the form is being submitted, the text direction of the input field will also be submitted.</p>

</body>
</html>

Output should be:

How to add HTML <input> dirname Attribute

How to add HTML <input> disabled Attribute

An HTML form with a disabled input field:

Definition and Usage

The disabled attribute is a boolean attribute.

When present, it specifies that the <input> element should be disabled.

A disabled input element is unusable and un-clickable.

The disabled attribute can be set to keep a user from using the <input> element until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the disabled value, and make the <input> element usable.

Tip: Disabled <input> elements in a form will not be submitted!


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<input disabled>

index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The input disabled attribute</h1>

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname" disabled><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> disabled Attribute

How to add HTML <input> form Attribute

An input field located outside the HTML form (but still a part of the form):

Definition and Usage

The form attribute specifies the form the <input> element belongs to.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<input form="form_id">

Attribute Values

Value Description
form_id Specifies the form element the <input> element belongs to. The value of this attribute must be the id attribute of a <form> element in the same document.
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The form attribute</h1>

<form action="/action_page.php" id="form1">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
</form>

<p>The "Last name" field below is outside the form element, but still part of the form.</p>

<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">

</body>
</html>

Output should be:

How to add HTML <input> form Attribute

How to add HTML <input> formaction Attribute

An HTML form with two submit buttons, with different actions:

Definition and Usage

The formaction attribute specifies the URL of the file that will process the input control when the form is submitted.

The formaction attribute overrides the action attribute of the <form> element.

Note: The formaction attribute is used with type="submit" and type="image".


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<input formaction="URL">

Attribute Values

Value Description
URL Specifies the URL of the file that will process the input control when the form is submitted.

Possible values:

  • An absolute URL - the full address of a page (like href="http://www.example.com/formresult.asp")
  • A relative URL - points to a file within the current site (like href="formresult.asp")
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The formaction attribute</h1>

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formaction="/action_page2.php" value="Submit to another page">
</form>

</body>
</html>

Output should be:

How to add HTML <input> formaction Attribute

How to add HTML <input> formenctype Attribute

Send form-data that is default encoded (the first submit button), and encoded as "multipart/form-data" (the second submit button):

Definition and Usage

The formenctype attribute specifies how the form-data should be encoded when submitting it to the server (only for forms with method="post")

The formenctype attribute overrides the enctype attribute of the <form> element.

Note: The formenctype attribute is used with type="submit" and type="image".


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<input formenctype="value">

Attribute Values

Value Description
application/x-www-form-urlencoded Default. All characters are encoded before sent (spaces are converted to "+" symbols, and special characters are converted to ASCII HEX values)
multipart/form-data  This value is necessary if the user will upload a file through the form
text/plain Sends data without any encoding at all. Not recommended
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The formenctype attribute</h1>

<form action="/action_page_binary.asp" method="post">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data">
</form>

</body>
</html>

Output should be:

How to add HTML <input> formenctype Attribute

How to add HTML <input> formmethod Attribute

The second submit button overrides the HTTP method of the form:

Definition and Usage

The formmethod attribute defines the HTTP method for sending form-data to the action URL.

The formmethod attribute overrides the method attribute of the <form> element.

Note: The formmethod attribute can be used with type="submit" and type="image".

The form-data can be sent as URL variables (method="get") or as an HTTP post transaction (method="post").

Notes on the "get" method:

Notes on the "post" method:


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<input formmethod="get|post">

Attribute Values

Value Description
get Default. Appends the form-data to the URL in name/value pairs: URL?name=value&name=value
post Sends the form-data as an HTTP post transaction
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The formmethod attribute</h1>

<form action="/action_page.php" method="get" target="_blank">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formmethod="post" value="Submit using POST">
</form>

</body>
</html>

Output should be:

How to add HTML <input> formmethod Attribute

How to add HTML <input> formmethod get Attribute

get Default. Appends the form-data to the URL in name/value pairs: URL?name=value&name=value
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The formmethod attribute</h1>

<form action="/action_page.php" method="get" target="_blank">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formmethod="post" value="Submit using POST">
</form>

</body>
</html>

Output should be:

How to add HTML <input> formmethod get Attribute

How to add HTML <input> formmethod post Attribute

post Sends the form-data as an HTTP post transaction
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The formmethod attribute</h1>

<form action="/action_page.php" method="post" target="_blank">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formmethod="post" value="Submit using POST">
</form>

</body>
</html>

Output should be:

How to add HTML <input> formmethod post Attribute

How to add HTML <input> formnovalidate Attribute

A form with two submit buttons (with and without validation):

Definition and Usage

The formnovalidate attribute is a boolean attribute.

When present, it specifies that the <input> element should not be validated when submitted.

The formnovalidate attribute overrides the novalidate attribute of the <form> element.

Note: The formnovalidate attribute can be used with type="submit".


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<input formnovalidate="formnovalidate">

Note: The formnovalidate attribute is a boolean attribute, and can be set in the following ways:

index.html
Example: HTML
<form action="/action_page.php">
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formnovalidate="formnovalidate" value="Submit without validation">
</form> 

Output should be:

How to add HTML <input> formnovalidate Attribute

How to add HTML <input> formtarget Attribute

A form with two submit buttons, with different target windows.

Definition and Usage

The formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.

The formtarget attribute overrides the target attribute of the <form> element.

Note: The formtarget attribute can be used with type="submit" and type="image".


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<input formtarget="_blank|_self|_parent|_top|framename">

Attribute Values

Value Description
_blank The response is displayed in a new window or tab
_self The response is displayed in the same frame (this is default)
_parent The response is displayed in the parent frame
_top The response is displayed in the full body of the window
framename The response is displayed in a named iframe
index.html
Example: HTML
<form action="/action_page.php">
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="_blank" value="Submit to a new window">
</form> 

Output should be:

How to add HTML <input> formtarget Attribute

How to add HTML <input> formtarget _blank Attribute

_blank The response is displayed in a new window or tab
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The formtarget attribute</h1>

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>

</body>
</html>

Output should be:

How to add HTML <input> formtarget _blank Attribute

How to add HTML <input> formtarget _self Attribute

_self The response is displayed in the same frame (this is default)
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The formtarget attribute</h1>

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="_self" value="Submit to a new window/tab">
</form>

</body>
</html>

Output should be:

How to add HTML <input> formtarget _self Attribute

How to add HTML <input> formtarget _parent Attribute

_parent The response is displayed in the parent frame
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The formtarget attribute</h1>

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="_parent" value="Submit to a new window/tab">
</form>

</body>
</html>

Output should be:

How to add HTML <input> formtarget _parent Attribute

How to add HTML <input> formtarget _top Attribute

_top The response is displayed in the full body of the window
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The formtarget attribute</h1>

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="_top" value="Submit to a new window/tab">
</form>

</body>
</html>

Output should be:

How to add HTML <input> formtarget _top Attribute

How to add HTML <input> formtarget framename Attribute

framename The response is displayed in a named iframe
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The formtarget attribute</h1>

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="framename" value="Submit to a new window/tab">
</form>

</body>
</html>

Output should be:

How to add HTML <input> formtarget framename Attribute

How to set HTML <input> height Attribute

Define an image as the submit button, with height and width attributes:

Definition and Usage

The height attribute specifies the height of the <input> element.

Note: The height attribute is used only with <input type="image">.

Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<input height="pixels">

Attribute Values

Value Description
pixels The height in pixels (e.g. height="100")
index.html
Example: HTML
<input type="image" src="https://horje.com/uploads/demo/2024-03-13-15-04-45-img_submit.gif" alt="Submit" width="48" height="48">

Output should be:

How to set HTML <input> height Attribute

How to set HTML <input> list Attribute

An <input> element with pre-defined values in a <datalist>:

Definition and Usage

The list attribute refers to a <datalist> element that contains pre-defined options for an <input> element.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<input list="datalist_id">

Attribute Values

Value Description
datalist_id Specifies the id of the datalist to bind the <input> element to
index.html
Example: HTML
<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Google Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist> 

Output should be:

How to set HTML <input> list Attribute

How to add HTML <input> max Attribute

Use of the min and max attributes.

Definition and Usage

The max attribute specifies the maximum value for an <input> element.

Tip: Use the max attribute together with the min attribute to create a range of legal values.

Note: The max and min attributes works with the following input types: number, range, date, datetime-local, month, time and week.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<input max="number|date">

Attribute Values

Value Description
number Specifies the maximum value allowed
date Specifies the maximum date allowed
index.html
Example: HTML
<form action="/action_page.php">
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>

  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5"><br><br>

  <input type="submit">
</form>

Output should be:

How to add HTML <input> max Attribute

How to add HTML <input> max number Attribute

number Specifies the maximum value allowed
index.html
Example: HTML
<input type="number" id="quantity" name="quantity" min="1" max="5">

Output should be:

How to add HTML <input> max number Attribute

How to add HTML <input> max date Attribute

date Specifies the maximum date allowed
index.html
Example: HTML
<input type="date" id="quantity" name="quantity" min="1" max="5">

Output should be:

How to add HTML <input> max date Attribute

How to add HTML <input> maxlength Attribute

An <input> element with a maximum length of 10 characters:

Definition and Usage

The maxlength attribute specifies the maximum number of characters allowed in the <input> element.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<input maxlength="number">

Attribute Values

Value Description
number The maximum number of characters allowed in the <input> element. Default value is 524288
index.html
Example: HTML
<form action="/action_page.php">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" maxlength="10"><br><br>
  <input type="submit" value="Submit">
</form> 

Output should be:

How to add HTML <input> maxlength Attribute

How to add HTML <input> min Attribute

Use of the min and max attributes.

Definition and Usage

The min attribute specifies the minimum value for an <input> element.

Tip: Use the min attribute together with the max attribute to create a range of legal values.

Note: The max and min attributes works with the following input types: number, range, date, datetime-local, month, time and week.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<input min="number|date">

Attribute Values

Value Description
number Specifies the minimum value allowed
date Specifies the minimum date allowed
index.html
Example: HTML
<form action="/action_page.php">

  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>

  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5"><br><br>

  <input type="submit">

</form> 

Output should be:

How to add HTML <input> min Attribute

How to add HTML <input> min number Attribute

number Specifies the minimum value allowed
index.html
Example: HTML
<input type="number" id="quantity" name="quantity" min="1" max="5">

Output should be:

How to add HTML <input> min number Attribute

How to add HTML <input> min date Attribute

date Specifies the minimum date allowed
index.html
Example: HTML
<input type="date" id="quantity" name="quantity" min="1" max="5">

Output should be:

How to add HTML <input> min date Attribute

How to add HTML <input> minlength Attribute

An <input> element with a minimum length of 8 characters:

Definition and Usage

The minlength attribute specifies the minimum number of characters required in an input field.

Note: The minlength attribute can be used with input type: text, search, url, tel, email, and password.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<input minlength="number">

Attribute Values

Value Description
number The minimum number of characters required in an <input> element
index.html
Example: HTML
<input type="password" id="password" name="password" minlength="8">

Output should be:

How to add HTML <input> minlength Attribute

How to add HTML <input> multiple Attribute

A file upload field that accepts multiple values.

Definition and Usage

The multiple attribute is a boolean attribute.

When present, it specifies that the user is allowed to enter more than one value in the <input> element.

Note: The multiple attribute works with the following input types: email, and file.

Tip: For <input type="file">: To select multiple files, hold down the CTRL or SHIFT key while selecting.

Tip: For <input type="email">: Separate each email with a comma, like: [email protected], [email protected], [email protected] in the email field.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<input multiple>

index.html
Example: HTML
<input type="file" id="files" name="files" multiple>

Output should be:

How to add HTML <input> multiple Attribute

How to add HTML <input> name Attribute

An HTML form with three input fields; two text fields and one submit button.

Definition and Usage

The name attribute specifies the name of an <input> element.

The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted.

Note: Only form elements with a name attribute will have their values passed when submitting a form.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<input name="text">

Attribute Values

Value Description
text Specifies the name of the <input> element
index.html
Example: HTML
<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form> 

Output should be:

How to add HTML <input> name Attribute

How to add HTML <input> pattern Attribute

An HTML form with an input field that can contain only three letters (no numbers or special characters).

Definition and Usage

The pattern attribute specifies a regular expression that the <input> element's value is checked against on form submission.

Note: The pattern attribute works with the following input types: text, date, search, url, tel, email, and password.

Tip: Use the global title attribute to describe the pattern to help the user.

Tip: Learn more about regular expressions in our JavaScript tutorial.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<input pattern="regexp">

Attribute Values

Value Description
regexp Specifies a regular expression that the <input> element's value is checked against

 

index.html
Example: HTML
<form action="/action_page.php">
  <label for="country_code">Country code:</label>
  <input type="text" id="country_code" name="country_code"
  pattern="[A-Za-z]{3}" title="Three letter country code"><br><br>
  <input type="submit">
</form> 

Output should be:

How to add HTML <input> pattern Attribute

How to add HTML <input> pattern Specific characters Attribute

An <input> element with type="password" that must contain 8 or more characters:

index.html
Example: HTML
<form action="/action_page.php">
  <label for="pwd">Password:</label>
  <input type="password" id="pwd" name="pwd"
  pattern=".{8,}" title="Eight or more characters">
  <input type="submit">
</form>

Output should be:

How to add HTML <input> pattern Specific characters Attribute

How to add HTML <input> pattern uppercase and lowercase letter Attribute

An <input> element with type="password" that must contain 8 or more characters that are of at least one number, and one uppercase and lowercase letter.

index.html
Example: HTML
<form action="/action_page.php">
  <label for="pwd">Password:</label>
  <input type="password" id="pwd" name="pwd"
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
  title="Must contain at least one  number and one uppercase and lowercase letter, and at least 8 or more characters">
  <input type="submit">
</form>

Output should be:

How to add HTML <input> pattern uppercase and lowercase letter Attribute

How to add HTML <input> pattern characters @,.;''#$%^&8 Attribute

An <input> element with type="email" that must be in the following order: characters@characters.domain (characters followed by an @ sign, followed by more characters, and then a "."

After the "." sign, add at least 2 letters from a to z

index.html
Example: HTML
<form action="/action_page.php">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"
  pattern="[a-z0-9._%+\-]+@[a-z0-9.\-]+\.[a-z]{2,}$">
  <input type="submit">
</form>

Output should be:

How to add HTML <input> pattern characters @,.;''#$%^&8 Attribute

How to add HTML <input> pattern characters [^'\x22]+

An <input> element with type="search" that CANNOT contain the following characters: ' or "

index.html
Example: HTML
<form action="/action_page.php">
  <label for="search">Search:</label>
  <input type="search" id="search" name="search"
  pattern="[^'\x22]+" title="Invalid input">
  <input type="submit">
</form>

Output should be:

How to add HTML <input> pattern characters [^'\x22]+

How to add HTML <input> pattern characters http:// or https://

An <input> element with type="url" that must start with http:// or https:// followed by at least one character.

If you enter the characters: jahddd then you will get warning: characters Please Enter a URL.

index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The input pattern attribute</h1>

<p>A form with a URL field that must start with http:// or https:// followed by at least one character:</p>

<form action="/action_page.php">
  <label for="website">Homepage:</label>
  <input type="url" id="website" name="website" pattern="https?://.+" title="Include http://">
  <input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> pattern characters http:// or https://

How to add HTML <input> placeholder Attribute

A telephone input field with a placeholder text.

Definition and Usage

The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).

The short hint is displayed in the input field before the user enters a value.

Note: The placeholder attribute works with the following input types: text, search, url, tel, email, and password.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<input placeholder="text">

Attribute Values

Value Description
text Specifies a short hint that describes the expected value of the input field
index.html
Example: HTML
<input type="tel" id="phone" name="phone" placeholder="123-45-678"
  pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">

Output should be:

How to add HTML <input> placeholder Attribute

How to add HTML <input> popovertarget Attribute

Refer to a popover element with the popovertarget attribute to show/hide the specified popover element:

Definition and Usage

With the popovertarget attribute you can refer to the popover element with the specified id, and toggle between showing and hiding it:

The popovertarget only works when type="button".

Browser Support

Syntax

<input type="button" popovertarget="element_id">


Attribute Values

Value Description
element_id The id of the popover element related to this button
index.html
Example: HTML
<h1 popover id="myheader">Hello</h1>
<input type="button" popovertarget="myheader" value="Click me!"> 

Output should be:

How to add HTML <input> popovertarget Attribute

How to add HTML <input> popovertargetaction Attribute

When the input button is clicked, the popover element will show.

Definition and Usage

The popovertargetaction attribute allows you to define what happens when you click the button.

You can choose between the values "show", "hide", and "toggle".

The popovertargetaction only works when type="button".

If the popovertargetaction attribute is not specified, the default "toggle" value will be used.


Browser Support

Syntax

<input type="button" popovertarget="element_id popovertargetaction="hide|show|toggle"">


Attribute Values

Value Description  
hide The popover element is hidden when you click the button  
show The popover element is showed when you click the button  
toggle Default value. The popover element is toggled between hidding and showing when you click the button  
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The input popovertargetaction Attribute</h1>

<h1 popover id="myheader">Hello</h1>

<input type="button" popovertarget="myheader" popovertargetaction="show" value="Show popover">

<p>Click the button and it will show the popover element.</p>

</body>
</html>

Output should be:

How to add HTML <input> popovertargetaction Attribute

How to add HTML <input> popovertargetaction hide Attribute

hide The popover element is hidden when you click the button
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The input popovertargetaction Attribute</h1>

<h1 popover id="myheader">Hello</h1>

<input type="button" popovertarget="myheader" popovertargetaction="show" value="Show">
<input type="button" popovertarget="myheader" popovertargetaction="hide" value="Hide">
<input type="button" popovertarget="myheader" popovertargetaction="toggle" value="Toggle">

<p>Click the buttons to show/hide the popover element.</p>

</body>
</html>

Output should be:

How to add HTML <input> popovertargetaction hide Attribute

How to add HTML <input> popovertargetaction show Attribute

show The popover element is showed when you click the button
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The input popovertargetaction Attribute</h1>

<h1 popover id="myheader">Hello</h1>

<input type="button" popovertarget="myheader" popovertargetaction="show" value="Show">
<input type="button" popovertarget="myheader" popovertargetaction="hide" value="Hide">
<input type="button" popovertarget="myheader" popovertargetaction="toggle" value="Toggle">

<p>Click the buttons to show/hide the popover element.</p>

</body>
</html>

Output should be:

How to add HTML <input> popovertargetaction show Attribute

How to add HTML <input> popovertargetaction toggle Attribute

toggle Default value. The popover element is toggled between hidding and showing when you click the button
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The input popovertargetaction Attribute</h1>

<h1 popover id="myheader">Hello</h1>

<input type="button" popovertarget="myheader" popovertargetaction="show" value="Show">
<input type="button" popovertarget="myheader" popovertargetaction="hide" value="Hide">
<input type="button" popovertarget="myheader" popovertargetaction="toggle" value="Toggle">

<p>Click the buttons to show/hide the popover element.</p>

</body>
</html>

Output should be:

How to add HTML <input> popovertargetaction toggle Attribute

How to add HTML <input> readonly Attribute

An HTML form with a read-only input field.

Definition and Usage

The readonly attribute is a boolean attribute.

When present, it specifies that an input field is read-only.

A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it).

The readonly attribute can be set to keep a user from changing the value until some other conditions have been met (like selecting a checkbox, etc.). Then, a JavaScript can remove the readonly value, and make the input field editable.

Note: A form will still submit an input field that is readonly, but will not submit an input field that is disabled!


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<input readonly>

index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The input readonly attribute</h1>

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="country">Country:</label>  
  <input type="text" id="country" name="country" value="Norway" readonly><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> readonly Attribute

How to add HTML <input> required Attribute

An HTML form with a required input field.

Definition and Usage

The required attribute is a boolean attribute.

When present, it specifies that an input field must be filled out before submitting the form.

Note: The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<input required>

index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The input required attribute</h1>

<form action="/action_page.php">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
  <input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input> required Attribute

How to add HTML <input> size Attribute

An HTML form with two input fields with a width of 50 and 4 characters.

Definition and Usage

The size attribute specifies the visible width, in characters, of an <input> element.

Note: The size attribute works with the following input types: text, search, tel, url, email, and password.

Tip: To specify the maximum number of characters allowed in the <input> element, use the maxlength attribute.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<input size="number">

Attribute Values

Value Description
number Specifies the width of an <input> element, in characters. Default value is 20
index.html
Example: HTML
<label for="fname">First name:</label>
  <input type="text" id="fname" name="fname" size="50"><br><br>
  <label for="pin">PIN:</label>
  <input type="text" id="pin" name="pin" maxlength="4" size="4">

Output should be:

How to add HTML <input> size Attribute

How to add HTML <input> src Attribute

An HTML form with an image that represents the submit button.

Definition and Usage

The src attribute specifies the URL of the image to use as a submit button.

Note: The src attribute can only be used with (and is required for) <input type="image">.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<input src="URL">

Attribute Values

Value Description
URL Specifies the URL of the image to use as a submit button.

Possible values:

  • An absolute URL - points to another web site (like src="http://www.example.com/submit.gif")
  • A relative URL - points to a file within a web site (like src="submit.gif")
index.html
Example: HTML
<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="image" src="submit.gif" alt="Submit" width="48" height="48">
</form>

Output should be:

How to add HTML <input> src Attribute

How to add HTML <input> step Attribute

An HTML form with an input field with a specified legal number intervals:

Definition and Usage

The step attribute specifies the interval between legal numbers in an <input> element.

Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.

Tip: The step attribute can be used together with the max and min attributes to create a range of legal values.

Note: The step attribute works with the following input types: number, range, date, datetime-local, month, time and week.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<input step="number">

Attribute Values

Value Description
number Specifies the interval between legal numbers in the input field. Default is 1
any  
index.html
Example: HTML
<form action="/action_page.php">
  <label for="points">Points:</label>
  <input type="number" id="points" name="points" step="3">
  <input type="submit">
</form> 

Output should be:

How to add HTML <input> step Attribute

How to add HTML <input> type Attribute

An HTML form with two input fields; one text field and one submit button.

Definition and Usage

The type attribute specifies the type of <input> element to display.

If the type attribute is not specified, the default type is "text".


Browser Support

Syntax

<input type="value">

Attribute Values

Value Description
button Defines a clickable button (mostly used with a JavaScript to activate a script)
checkbox Defines a checkbox
color Defines a color picker
date Defines a date control (year, month, day (no time))
datetime-local Defines a date and time control (year, month, day, time (no timezone)
email Defines a field for an e-mail address
file Defines a file-select field and a "Browse" button (for file uploads)
hidden Defines a hidden input field
image Defines an image as the submit button
month Defines a month and year control (no timezone)
number Defines a field for entering a number
password Defines a password field
radio Defines a radio button
range Defines a range control (like a slider control)
reset Defines a reset button
search Defines a text field for entering a search string
submit Defines a submit button
tel Defines a field for entering a telephone number
text Default. Defines a single-line text field
time Defines a control for entering a time (no timezone)
url Defines a field for entering a URL
week Defines a week and year control (no timezone)
index.html
Example: HTML
<input type="text" id="username" name="username">

Output should be:

How to add HTML <input> type Attribute

How to add HTML <input> type button Attribute

A push button that activates a JavaScript when it is clicked.

index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>Show a Push Button</h1>

<p>The button below activates a JavaScript function when it is clicked.</p>
<form>
  <input type="button" value="Click me" onclick="msg()">
</form>

<script>
function msg() {
  alert("Hello world!");
}
</script>

</body>
</html>

Output should be:

How to add HTML <input> type button Attribute

How to add HTML <input> type checkbox Attribute

Input type: checkbox

Checkboxes let a user select one or more options of a limited number of choices.

index.html
Example: HTML
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br> 

Output should be:

How to add HTML <input> type checkbox Attribute

How to add HTML <input> type color Attribute

Input type: color

Select a color from a color picker.

index.html
Example: HTML
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor"> 

Output should be:

How to add HTML <input> type color Attribute

How to add HTML <input> type date Attribute

Input type: date

Define a date control:

index.html
Example: HTML
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"> 

Output should be:

How to add HTML <input> type date Attribute

How to add HTML <input> type datetime-local Attribute

Input type: datetime-local

Define a date and time control (no time zone):

index.html
Example: HTML
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime"> 

Output should be:

How to add HTML <input> type datetime-local Attribute

How to add HTML <input> type email Attribute

Input type: email

Define a field for an e-mail address (will be automatically validated when submitted).

index.html
Example: HTML
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"> 

Output should be:

How to add HTML <input> type email Attribute

How to add HTML <input> type file Attribute

Define a file-select field and a "Browse..." button (for file uploads).

index.html
Example: HTML
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile"> 

Output should be:

How to add HTML <input> type file Attribute

How to add HTML <input> type hidden Attribute

Define a hidden field (not visible to a user).

A hidden field often stores what database record that needs to be updated when the form is submitted.

index.html
Example: HTML
<input type="hidden" id="custId" name="custId" value="3487"> 

Output should be:

How to add HTML <input> type hidden Attribute

How to add HTML <input> type image Attribute

Input type: image

Define an image as a submit button:

index.html
Example: HTML
<input type="image" src="img_submit.gif" alt="Submit">

Output should be:

How to add HTML <input> type image Attribute

How to add HTML <input> type month Attribute

Input type: month

Define a month and year control (no time zone).

index.html
Example: HTML
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth"> 

Output should be:

How to add HTML <input> type month Attribute

How to add HTML <input> type number Attribute

Input type: number

Define a field for entering a number (You can also set restrictions on what numbers are accepted).

index.html
Example: HTML
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5"> 

Output should be:

How to add HTML <input> type number Attribute

How to add HTML <input> type password Attribute

Input type: password

Define a password field (characters are masked).

index.html
Example: HTML
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd"> 

Output should be:

How to add HTML <input> type password Attribute

How to add HTML <input> type radio Attribute

Input type: radio

Radio buttons let a user select only one of a limited number of choices.

index.html
Example: HTML
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label> 

Output should be:

How to add HTML <input> type radio Attribute

How to add HTML <input> type range Attribute

Input type: range

Define a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max, and step attributes.

index.html
Example: HTML
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50"> 

Output should be:

How to add HTML <input> type range Attribute

How to add HTML <input> type reset Attribute

Input type: reset

Define a reset button (resets all form values to default values).

Tip: Use the reset button carefully! It can be annoying for users who accidentally activate the reset button.

index.html
Example: HTML
<input type="reset"> 

Output should be:

How to add HTML <input> type reset Attribute

How to add HTML <input> type search Attribute

Input type: search

Define a search field (like a site search, or Google search).

index.html
Example: HTML
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch"> 

Output should be:

How to add HTML <input> type search Attribute

How to add HTML <input> type submit Attribute

Input type: submit

Define a submit button:

index.html
Example: HTML
<input type="submit"> 

Output should be:

How to add HTML <input> type submit Attribute

How to add HTML <input> type tel Attribute

Input type: tel

Define a field for entering a telephone number.

index.html
Example: HTML
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"> 

Output should be:

How to add HTML <input> type tel Attribute

How to add HTML <input> type text Attribute

Input type: text

Define two single-line text fields that a user can enter text into.

index.html
Example: HTML
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br>

Output should be:

How to add HTML <input> type text  Attribute

How to add HTML <input> type time Attribute

Input type: time

Define a control for entering a time (no time zone).

index.html
Example: HTML
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt"> 

Output should be:

How to add HTML <input> type time Attribute

How to add HTML <input> type url Attribute

Input type: url

Define a field for entering a URL.

Tip: Safari on iPhone recognizes the url input type, and changes the on-screen keyboard to match it (adds .com option).

index.html
Example: HTML
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage"> 

Output should be:

How to add HTML <input> type url Attribute

How to add HTML <input> type week Attribute

Input type: week

Define a week and year control (no time zone).

index.html
Example: HTML
<label for="week">Select a week:</label>
<input type="week" id="week" name="week"> 

Output should be:

How to add HTML <input> type week Attribute

How to add HTML <input type="button">

button Defines a clickable button (mostly used with a JavaScript to activate a script)

A push button that activates a JavaScript function when it is clicked.

Definition and Usage

The <input type="button"> defines a clickable button (mostly used with a JavaScript to activate a script).


Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Syntax

<input type="button">

index.html
Example: HTML
<input type="button" value="Click me" onclick="msg()">

Output should be:

How to add HTML <input type=">

How to add HTML <input type="checkbox">

checkbox Defines a checkbox

Let the user select one or more options of a limited number of choices.

Definition and Usage

The <input type="checkbox"> defines a checkbox.

The checkbox is shown as a square box that is ticked (checked) when activated.

Checkboxes are used to let a user select one or more options of a limited number of choices.

Tip: Always add the <label> tag for best accessibility practices!


Browser Support

Syntax

<input type="checkbox">

index.html
Example: HTML
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br> 

Output should be:

How to add HTML <input type=">

How to add HTML <input type="color">

Show a color picker (with a predefined red value).

color Defines a color picker

Definition and Usage

The <input type="color"> defines a color picker.

The default value is #000000 (black). The value must be in seven-character hexadecimal notation.

Tip: Always add the <label> tag for best accessibility practices!


Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Syntax

<input type="color">

index.html
Example: HTML
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000">

Output should be:

How to add HTML <input type=">

How to add HTML <input type="date">

Show a date control.

Definition and Usage

The <input type="date"> defines a date picker.

The resulting value includes the year, month, and day.

Tip: Always add the <label> tag for best accessibility practices!


Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Syntax

<input type="date">

index.html
Example: HTML
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"> 

Output should be:

How to add HTML <input type=">

How to add HTML <input type="datetime-local">

Show a date and time control (no timezone).

Definition and Usage

The <input type="datetime-local"> defines a date picker.

The resulting value includes the year, month, day, and time.

Tip: Always add the <label> tag for best accessibility practices! 


Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Syntax

<input type="datetime-local">

index.html
Example: HTML
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime"> 

Output should be:

How to add HTML <input type=">

How to add HTML <input type="email">

Define a field for an e-mail address (validates automatically when submitted).

email Defines a field for an e-mail address

Definition and Usage

The <input type="email"> defines a field for an e-mail address.

The input value is automatically validated to ensure it is a properly formatted e-mail address.

To define an e-mail field that allows multiple e-mail addresses, add the "multiple" attribute.

Tip: Always add the <label> tag for best accessibility practices!


Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Syntax

<input type="email">

index.html
Example: HTML
<input type="email" id="email" name="email">

Output should be:

How to add HTML <input type=">

How to add HTML <input type="file">

Define a file-select field.

Definition and Usage

The <input type="file"> defines a file-select field and a "Browse" button for file uploads.

To define a file-select field that allows multiple files to be selected, add the multiple attribute.

Tip: Always add the <label> tag for best accessibility practices!


Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Syntax

<input type="file">

index.html
Example: HTML
<input type="file" id="myfile" name="myfile"> 

Output should be:

How to add HTML <input type=">

How to add HTML <input type="hidden">

Define a hidden field.

Definition and Usage

The <input type="hidden"> defines a hidden input field.

A hidden field lets web developers include data that cannot be seen or modified by users when a form is submitted.

A hidden field often stores what database record that needs to be updated when the form is submitted.

Note: While the value is not displayed to the user in the page's content, it is visible (and can be edited) using any browser's developer tools or "View Source" functionality. Do not use hidden inputs as a form of security!


Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Syntax

<input type="hidden">

index.html
Example: HTML
<input type="hidden" id="custId" name="custId" value="3487">

Output should be:

How to add HTML <input type=">

How to add HTML <input type="image">

Define an image as a submit button.

Definition and Usage

The <input type="image"> defines an image as a submit button.

The path to the image is specified in the src attribute.


Browser Support

Syntax

<input type="image">

index.html
Example: HTML
<input type="image" src="https://horje.com/uploads/demo/2024-03-20-15-18-38-img_submit.gif" alt="Submit" width="48" height="48">

Output should be:

How to add HTML <input type=">

How to add Align input image (with CSS) on Submit Button

See the Example.

index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname">
  <input type="image" src="https://horje.com/uploads/demo/2024-03-20-15-18-38-img_submit.gif" alt="Submit" style="float:right" width="48" height="48">
</form>

<p>Click on the image, and the input will be sent to a page on the server called "/action_page.php".</p>

</body>
</html>

Output should be:

How to add Align input image (with CSS) on Submit Button

How to add HTML <input type="month">

Define a month and year control (no time zone).

Definition and Usage

The <input type="month"> defines a month and year control.

The format is "YYYY-MM".

Tip: Always add the <label> tag for best accessibility practices!


Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Syntax

<input type="month">

index.html
Example: HTML
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth"> 

Output should be:

How to add HTML <input type=">

How to add HTML <input type="number">

Define a field for entering a number (You can also set restrictions on what numbers are accepted).

Definition and Usage

The <input type="number"> defines a field for entering a number.

Use the following attributes to specify restrictions:

Tip: Always add the <label> tag for best accessibility practices!


Browser Support

Syntax

<input type="number">

index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>Display a Number Field</h1>

<form action="/action_page.php">
  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
  <input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <input type=">

How to add HTML <input type="password">

Define a password field (characters are masked).

Definition and Usage

The <input type="password"> defines a password field (characters are masked).

Note: Any forms involving sensitive information like passwords should be served over HTTPS.

Tip: Always add the <label> tag for best accessibility practices!


Browser Support

Syntax

<input type="password">

index.html
Example: HTML
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd"> 

Output should be:

How to add HTML <input type=">

How to add HTML <input type="radio">

Radio buttons let a user select only one of a limited number of choices.

Definition and Usage

The <input type="radio"> defines a radio button.

Radio buttons are normally presented in radio groups (a collection of radio buttons describing a set of related options). Only one radio button in a group can be selected at the same time.

Note: The radio group must share the same name (the value of the name attribute) to be treated as a group. Once the radio group is created, selecting any radio button in that group automatically deselects any other selected radio button in the same group. You can have as many radio groups on a page as you want, as long as each group has its own name.

Note: The value attribute defines the unique value associated with each radio button. The value is not shown to the user, but is the value that is sent to the server on "submit" to identify which radio button that was selected.

Tip: Always add the <label> tag for best accessibility practices!


Browser Support

Syntax

<input type="radio">

index.html
Example: HTML
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label> 

Output should be:

How to add HTML <input type=">

How to add HTML <input type="range">

Define a range control (like a slider control).

Definition and Usage

The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control).

Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the attributes below.

Tip: Always add the <label> tag for best accessibility practices!


Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Syntax

<input type="range">

index.html
Example: HTML
<input type="range" id="points" name="points" min="0" max="10">

Output should be:

How to add HTML <input type=">

How to add HTML <input type="reset">

Define a reset button.

Definition and Usage

The <input type="reset"> defines a reset button which resets all form values to its initial values.

Tip: Avoid reset buttons in your forms! It is frustrating for users if they click them by mistake.


Browser Support

Syntax

<input type="reset">

index.html
Example: HTML
<input type="reset">

Output should be:

How to add HTML <input type=">

How to add HTML <input type="search">

Define a search field (like a site search, or Google search).

Definition and Usage

The <input type="search"> defines a text field for entering a search string.

Note: Remember to set a name for the search field, otherwise nothing will be submitted. The most common name for search inputs is q.

Tip: Always add the <label> tag for best accessibility practices!


Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Syntax

<input type="search">

index.html
Example: HTML
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch"> 

Output should be:

How to add HTML <input type=">

How to add HTML <input type="submit">

Define a submit button.

Definition and Usage

The <input type="submit"> defines a submit button which submits all form values to a form-handler.

The form-handler is typically a server page with a script for processing the input data.

The form-handler is specified in the form's action attribute.


Browser Support

Syntax

<input type="submit">

index.html
Example: HTML
<input type="submit"> 

Output should be:

How to add HTML <input type=">

How to add HTML <input type="tel">

Define a field for entering a telephone number.

Definition and Usage

The <input type="tel"> defines a field for entering a telephone number.

Note: Browsers that do not support "tel" fall back to being a standard "text" input.

Tip: Always add the <label> tag for best accessibility practices!


Browser Support

Syntax

<input type="tel">

index.html
Example: HTML
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"> 

Output should be:

How to add HTML <input type=">

How to add HTML <input type="text">

Define a single-line text field that a user can enter text into.

Definition and Usage

The <input type="text"> defines a single-line text field.

The default width of the text field is 20 characters.

Tip: Always add the <label> tag for best accessibility practices!


Browser Support

Syntax

<input type="text">

index.html
Example: HTML
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"> 

Output should be:

How to add HTML <input type=">

How to add HTML <input type="time">

Define a control for entering a time (no time zone).

Definition and Usage

The <input type="time"> defines a control for entering a time (no time zone).

Tip: Always add the <label> tag for best accessibility practices!


Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Syntax

<input type="time">

index.html
Example: HTML
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt"> 

Output should be:

How to add HTML <input type=">

How to add HTML <input type="url">

Define a field for entering a URL.

Definition and Usage

The <input type="url"> defines a field for entering a URL.

The input value is automatically validated before the form can be submitted.

Tip: Always add the <label> tag for best accessibility practices!


Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Syntax

<input type="url">

index.html
Example: HTML
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage"> 

Output should be:

How to add HTML <input type=">

How to add HTML <input type="week">

Define a week and year control (no time zone).

Definition and Usage

The <input type="week"> defines a week and year control (no time zone).

Tip: Always add the <label> tag for best accessibility practices!


Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Syntax

<input type="week">

index.html
Example: HTML
<label for="week">Select a week:</label>
<input type="week" id="week" name="week"> 

Output should be:

How to add HTML <input type=">

How to add HTML <input> value Attribute

An HTML form with initial (default) values.

Definition and Usage

The value attribute specifies the value of an <input> element.

The value attribute is used differently for different input types:

Note: The value attribute cannot be used with <input type="file">.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<input value="text">

Attribute Values

Value Description
text Specifies the value of the <input> element
index.html
Example: HTML
<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname" value="John"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form> 

Output should be:

How to add HTML <input> value Attribute

How to add HTML <input> width Attribute

Define an image as the submit button, with height and width attributes.

Definition and Usage

The width attribute specifies the width of the <input> element.

Note: The width attribute is used only with <input type="image">.

Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The input height and width attributes</h1>

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="image" src="https://horje.com/uploads/demo/2024-03-26-04-36-33-img_submit.gif" alt="Submit" width="48" height="48">
</form>

<p><b>Note:</b> The input type="image" sends the X and Y coordinates of the click that activated the image button.</p>

</body>
</html>

Output should be:

How to add HTML <input> width Attribute



Read Full::
HTML Tag Code
Category:
HTML Code
Sub Category:
HTML Tag Code
Uploaded:
1 month ago
Uploaded by:
Admin
Views:
1

Related Articles
What is HTML <!--...--> Tag HTML Tag Code
What is HTML <!DOCTYPE> Declaration HTML Tag Code
What is HTML Elements and Doctypes HTML Tag Code
What is HTML <a> Tag HTML Tag Code
What is HTML <abbr> Tag HTML Tag Code
What is HTML <address> Tag HTML Tag Code
What is HTML <applet> Tag HTML Tag Code
What is HTML <area> Tag HTML Tag Code
What is HTML <article> Tag HTML Tag Code
What is HTML <aside> Tag HTML Tag Code
What is HTML <audio> Tag HTML Tag Code
What is HTML <b> Tag HTML Tag Code
What is HTML <base> Tag HTML Tag Code
What is HTML <basefont> Tag HTML Tag Code
What is HTML <bdi> Tag HTML Tag Code
What is HTML <bdo> Tag HTML Tag Code
What is HTML <big> Tag HTML Tag Code
What is HTML <blockquote> Tag HTML Tag Code
What is HTML <body> Tag HTML Tag Code
What is HTML <br> Tag HTML Tag Code
What is HTML <button> Tag HTML Tag Code
What is HTML <canvas> Tag HTML Tag Code
What is HTML <caption> Tag HTML Tag Code
What is HTML <center> Tag HTML Tag Code
What is HTML <cite> Tag HTML Tag Code
What is HTML <code> Tag HTML Tag Code
What is HTML <col> Tag HTML Tag Code
How to create HTML <colgroup> Tag HTML Tag Code
What is HTML <data> Tag HTML Tag Code
What is HTML <datalist> Tag HTML Tag Code
What is HTML <dd> Tag HTML Tag Code
What is HTML <del> Tag HTML Tag Code
What is HTML <details> Tag HTML Tag Code
What is HTML <dfn> Tag HTML Tag Code
What is HTML <dialog> Tag HTML Tag Code
What is HTML <dir> Tag HTML Tag Code
What is HTML <div> Tag HTML Tag Code
What is HTML <dl> Tag HTML Tag Code
What is HTML <dt> Tag HTML Tag Code
What is HTML <em> Tag HTML Tag Code
What is HTML <embed> Tag HTML Tag Code
What is HTML <fieldset> Tag HTML Tag Code
What is HTML <figcaption> Tag HTML Tag Code
What is HTML <figure> Tag HTML Tag Code
What is HTML <font> Tag HTML Tag Code
What is HTML <footer> Tag HTML Tag Code
What is HTML <form> Tag HTML Tag Code
What is HTML <frame> Tag HTML Tag Code
What is HTML <frameset> Tag HTML Tag Code
What is HTML <h1> to <h6> Tags HTML Tag Code
What is HTML <head> Tag HTML Tag Code
What is HTML <header> Tag HTML Tag Code
What is HTML <hgroup> Tag HTML Tag Code
What is HTML <hr> Tag HTML Tag Code
What is HTML <html> Tag HTML Tag Code
What is HTML <i> Tag HTML Tag Code
What is HTML <iframe> Tag HTML Tag Code
What is HTML <img> Tag HTML Tag Code
What is HTML <input> Tag HTML Tag Code
What is HTML <ins> Tag HTML Tag Code
What is HTML <kbd> Tag HTML Tag Code
What is HTML <label> Tag HTML Tag Code

Single Articles
How to add HTML <input> Tag
How to add HTML <input> accept Attribute
How to add HTML <input> accept file_extension Attribute
How to add HTML <input> accept audio/* Attribute
How to add HTML <input> accept video/* Attribute
How to add HTML <input> accept image/* Attribute
How to add HTML <input> accept media_type Attribute
How to add HTML <input> alt Attribute
How to add HTML <input> autocomplete Attribute
How to add HTML <input> autocomplete on Attribute
How to add HTML <input> autocomplete off Attribute
How to add HTML <input> autocomplete address-line1 Attribute
How to add HTML <input> autocomplete address-line2 Attribute
How to add HTML <input> autocomplete address-line3 Attribute
How to add HTML <input> autocomplete address-level1 Attribute
How to add HTML <input> autocomplete address-level2 Attribute
How to add HTML <input> autocomplete address-level3 Attribute
How to add HTML <input> autocomplete address-line4 Attribute
How to add HTML <input> autocomplete street-address Attribute
How to add HTML <input> autocomplete country Attribute
How to add HTML <input> autocomplete country-name Attribute
How to add HTML <input> autocomplete postal-code Attribute
How to add HTML <input> autocomplete name Attribute
How to add HTML <input> autocomplete additional-name Attribute
How to add HTML <input> autocomplete family-name Attribute
How to add HTML <input> autocomplete give-name Attribute
How to add HTML <input> autocomplete honoric-prefix Attribute
How to add HTML <input> autocomplete name Attribute
How to add HTML <input> autocomplete nickname Attribute
How to add HTML <input> autocomplete organization-title Attribute
How to add HTML <input> autocomplete username Attribute
How to add HTML <input> autocomplete new-password Attribute
How to add HTML <input> autocomplete new-password Attribute
How to add HTML <input> autocomplete current-password Attribute
How to add HTML <input> autocomplete bday Attribute
How to add HTML <input> autocomplete bday-day Attribute
How to add HTML <input> autocomplete bday-month Attribute
How to add HTML <input> autocomplete bday-year Attribute
How to add HTML <input> autocomplete sex Attribute
How to add HTML <input> autocomplete one-time-code Attribute
How to add HTML <input> autocomplete organization Attribute
How to add HTML <input> autocomplete cc-name Attribute
How to add HTML <input> autocomplete cc-given-name Attribute
How to add HTML <input> autocomplete cc-additional-name Attribute
How to add HTML <input> autocomplete cc-family-name Attribute
How to add HTML <input> autocomplete cc-number Attribute
How to add HTML <input> autocomplete cc-exp Attribute
How to add HTML <input> autocomplete cc-exp-month Attribute
How to add HTML <input> autocomplete cc-exp-year Attribute
How to add HTML <input> autocomplete cc-csc Attribute
How to add HTML <input> autocomplete cc-type Attribute
How to add HTML <input> autocomplete transaction-currency Attribute
How to add HTML <input> autocomplete transaction-amount Attribute
How to add HTML <input> autocomplete language Attribute
How to add HTML <input> autocomplete url Attribute
How to add HTML <input> autocomplete email Attribute
How to add HTML <input> autocomplete photo Attribute
How to add HTML <input> autocomplete tel Attribute
How to add HTML <input> autocomplete tel-country-code Attribute
How to add HTML <input> autocomplete tel-national Attribute
How to add HTML <input> autocomplete tel-area-code Attribute
How to add HTML <input> autocomplete tel-local Attribute
How to add HTML <input> autocomplete tel-local-prefix Attribute
How to add HTML <input> autocomplete tel-local-suffix Attribute
How to add HTML <input> autocomplete tel-extension Attribute
How to add HTML <input> autocomplete impp Attribute
How to add HTML <input> autofocus Attribute
How to add HTML <input> checked Attribute
How to add HTML <input> dirname Attribute
How to add HTML <input> disabled Attribute
How to add HTML <input> form Attribute
How to add HTML <input> formaction Attribute
How to add HTML <input> formenctype Attribute
How to add HTML <input> formmethod Attribute
How to add HTML <input> formmethod get Attribute
How to add HTML <input> formmethod post Attribute
How to add HTML <input> formnovalidate Attribute
How to add HTML <input> formtarget Attribute
How to add HTML <input> formtarget _blank Attribute
How to add HTML <input> formtarget _self Attribute
How to add HTML <input> formtarget _parent Attribute
How to add HTML <input> formtarget _top Attribute
How to add HTML <input> formtarget framename Attribute
How to set HTML <input> height Attribute
How to set HTML <input> list Attribute
How to add HTML <input> max Attribute
How to add HTML <input> max number Attribute
How to add HTML <input> max date Attribute
How to add HTML <input> maxlength Attribute
How to add HTML <input> min Attribute
How to add HTML <input> min number Attribute
How to add HTML <input> min date Attribute
How to add HTML <input> minlength Attribute
How to add HTML <input> multiple Attribute
How to add HTML <input> name Attribute
How to add HTML <input> pattern Attribute
How to add HTML <input> pattern Specific characters Attribute
How to add HTML <input> pattern uppercase and lowercase letter Attribute
How to add HTML <input> pattern characters @,.;''#$%^&8 Attribute
How to add HTML <input> pattern characters [^'\x22]+
How to add HTML <input> pattern characters http:// or https://
How to add HTML <input> placeholder Attribute
How to add HTML <input> popovertarget Attribute
How to add HTML <input> popovertargetaction Attribute
How to add HTML <input> popovertargetaction hide Attribute
How to add HTML <input> popovertargetaction show Attribute
How to add HTML <input> popovertargetaction toggle Attribute
How to add HTML <input> readonly Attribute
How to add HTML <input> required Attribute
How to add HTML <input> size Attribute
How to add HTML <input> src Attribute
How to add HTML <input> step Attribute
How to add HTML <input> type Attribute
How to add HTML <input> type button Attribute
How to add HTML <input> type checkbox Attribute
How to add HTML <input> type color Attribute
How to add HTML <input> type date Attribute
How to add HTML <input> type datetime-local Attribute
How to add HTML <input> type email Attribute
How to add HTML <input> type file Attribute
How to add HTML <input> type hidden Attribute
How to add HTML <input> type image Attribute
How to add HTML <input> type month Attribute
How to add HTML <input> type number Attribute
How to add HTML <input> type password Attribute
How to add HTML <input> type radio Attribute
How to add HTML <input> type range Attribute
How to add HTML <input> type reset Attribute
How to add HTML <input> type search Attribute
How to add HTML <input> type submit Attribute
How to add HTML <input> type tel Attribute
How to add HTML <input> type text Attribute
How to add HTML <input> type time Attribute
How to add HTML <input> type url Attribute
How to add HTML <input> type week Attribute
How to add HTML <input type="button">
How to add HTML <input type="checkbox">
How to add HTML <input type="color">
How to add HTML <input type="date">
How to add HTML <input type="datetime-local">
How to add HTML <input type="email">
How to add HTML <input type="file">
How to add HTML <input type="hidden">
How to add HTML <input type="image">
How to add Align input image (with CSS) on Submit Button
How to add HTML <input type="month">
How to add HTML <input type="number">
How to add HTML <input type="password">
How to add HTML <input type="radio">
How to add HTML <input type="range">
How to add HTML <input type="reset">
How to add HTML <input type="search">
How to add HTML <input type="submit">
How to add HTML <input type="tel">
How to add HTML <input type="text">
How to add HTML <input type="time">
How to add HTML <input type="url">
How to add HTML <input type="week">
How to add HTML <input> value Attribute
How to add HTML <input> width Attribute

Share on: