• Home
• Web Tutorial
• Full Course
• English Tutorial
• HTML
• HTML Tag
• What is HTML <input> Tag

How to add HTML <input> Tag

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

index.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> 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

index.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 file_extension Attribute

index.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 audio/* Attribute

index.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 video/* Attribute

index.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 image/* Attribute

index.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 media_type Attribute

index.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> alt Attribute

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

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

index.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> 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

index.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 on Attribute

index.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 off Attribute

index.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 address-line1 Attribute

index.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-line2 Attribute

index.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-line3 Attribute

index.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-level1 Attribute

index.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-level2 Attribute

index.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-level3 Attribute

index.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-line4 Attribute

index.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 street-address Attribute

index.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 country Attribute

index.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-name Attribute

index.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 postal-code Attribute

index.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 name Attribute

index.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 additional-name Attribute

index.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 family-name Attribute

index.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 give-name Attribute

index.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 honoric-prefix Attribute

index.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 name Attribute

index.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 nickname Attribute

index.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 organization-title Attribute

index.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 username Attribute

index.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 new-password Attribute

index.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

index.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 current-password Attribute

index.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 bday Attribute

index.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-day Attribute

index.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-month Attribute

index.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-year Attribute

index.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 sex Attribute

index.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 one-time-code Attribute

index.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 organization Attribute

index.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 cc-name Attribute

index.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-given-name Attribute

index.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-additional-name Attribute

index.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-family-name Attribute

index.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-number Attribute

index.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-exp Attribute

index.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-month Attribute

index.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-year Attribute

index.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-csc Attribute

index.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-type Attribute

index.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 transaction-currency Attribute

index.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-amount Attribute

index.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 language Attribute

index.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 url Attribute

index.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 email Attribute

index.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 photo Attribute

index.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 tel Attribute

index.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-country-code Attribute

index.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-national Attribute

index.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-area-code Attribute

index.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-local Attribute

index.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-prefix Attribute

index.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-suffix Attribute

index.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-extension Attribute

index.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 impp Attribute

index.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> 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

<!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> 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

<!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> 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

<!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> 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

<!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> 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

index.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> 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

index.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> 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

index.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> 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:

• This method appends the form-data to the URL in name/value pairs
• This method is useful for form submissions where a user want to bookmark the result
• There is a limit to how much data you can place in a URL (varies between browsers), therefore, you cannot be sure that all of the form-data will be correctly transferred
• Never use the "get" method to pass sensitive information! (password or other sensitive information will be visible in the browser's address bar)

Notes on the "post" method:

• This method sends the form-data as an HTTP post transaction
• Form submissions with the "post" method cannot be bookmarked
• The "post" method is more robust and secure than "get", and "post" does not have size limitations

Browser Support

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

Syntax

<input formmethod="get|post">

Attribute Values

index.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

index.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 post Attribute

index.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> 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:

• <input formnovalidate>
• <input formnovalidate="formnovalidate">
• <input formnovalidate="">

index.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> 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

index.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 _blank Attribute

index.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 _self Attribute

index.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 _parent Attribute

index.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 _top Attribute

index.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 framename Attribute

index.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 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

index.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> 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

index.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 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

index.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 number Attribute

index.html

<input type="number" id="quantity" name="quantity" min="1" max="5">

Output should be:

How to add HTML <input> max date Attribute

index.html

<input type="date" id="quantity" name="quantity" min="1" max="5">

Output should be:

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

index.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> 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

index.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 number Attribute

index.html

<input type="number" id="quantity" name="quantity" min="1" max="5">

Output should be:

How to add HTML <input> min date Attribute

index.html

<input type="date" id="quantity" name="quantity" min="1" max="5">

Output should be:

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

index.html

<input type="password" id="password" name="password" minlength="8">

Output should be:

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

<input type="file" id="files" name="files" multiple>

Output should be:

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

index.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> 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

index.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 Specific characters Attribute

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

index.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 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

<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 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

<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 [^'\x22]+

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

index.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 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

<!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> 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

index.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> 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

index.html

<h1 popover id="myheader">Hello</h1>
<input type="button" popovertarget="myheader" value="Click me!"> 

Output should be:

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

index.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 hide Attribute

index.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

index.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

index.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> 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

<!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> 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

<!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> 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

index.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> 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

index.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> 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

index.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> 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

index.html

<input type="text" id="username" name="username">

Output should be:

How to add HTML <input> type button Attribute

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

index.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 checkbox Attribute

Input type: checkbox

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

index.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 color Attribute

Input type: color

Select a color from a color picker.

index.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 date Attribute

Input type: date

Define a date control:

index.html

<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"> 

Output should be:

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

Input type: datetime-local

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

index.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 email Attribute

Input type: email

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

index.html

<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"> 

Output should be:

How to add HTML <input> type file Attribute

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

index.html

<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile"> 

Output should be:

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

<input type="hidden" id="custId" name="custId" value="3487"> 

Output should be:

How to add HTML <input> type image Attribute

Input type: image

Define an image as a submit button:

index.html

<input type="image" src="img_submit.gif" alt="Submit">

Output should be:

How to add HTML <input> type month Attribute

Input type: month

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

index.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 number Attribute

Input type: number

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

index.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 password Attribute

Input type: password

Define a password field (characters are masked).

index.html

<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd"> 

Output should be:

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

<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 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

<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 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

<input type="reset"> 

Output should be:

How to add HTML <input> type search Attribute

Input type: search

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

index.html

<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch"> 

Output should be:

How to add HTML <input> type submit Attribute

Input type: submit

Define a submit button:

index.html

<input type="submit"> 

Output should be:

How to add HTML <input> type tel Attribute

Input type: tel

Define a field for entering a telephone number.

index.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 text Attribute

Input type: text

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

index.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 time Attribute

Input type: time

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

index.html

<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt"> 

Output should be:

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

<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage"> 

Output should be:

How to add HTML <input> type week Attribute

Input type: week

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

index.html

<label for="week">Select a week:</label>
<input type="week" id="week" name="week"> 

Output should be:

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

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

<input type="button" value="Click me" onclick="msg()">

Output should be:

">

How to add HTML <input type="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

<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="color">

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

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

<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="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

<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"> 

Output should be:

">

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

<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="email">

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

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

<input type="email" id="email" name="email">

Output should be:

">

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

<input type="file" id="myfile" name="myfile"> 

Output should be:

">

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

<input type="hidden" id="custId" name="custId" value="3487">

Output should be:

">

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

<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 Align input image (with CSS) on Submit Button

See the Example.

index.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 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

<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth"> 

Output should be:

">

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:

• max - specifies the maximum value allowed
• min - specifies the minimum value allowed
• step - specifies the legal number intervals
• value - Specifies the default value

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

Browser Support

Syntax

<input type="number">

index.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="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

<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd"> 

Output should be:

">

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

<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="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.

• max - specifies the maximum value allowed
• min - specifies the minimum value allowed
• step - specifies the legal number intervals
• value - Specifies the default value

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

<input type="range" id="points" name="points" min="0" max="10">

Output should be:

">

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

<input type="reset">

Output should be:

">

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

<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch"> 

Output should be:

">

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

<input type="submit"> 

Output should be:

">

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

<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="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

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"> 

Output should be:

">

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

<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt"> 

Output should be:

">

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

<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage"> 

Output should be:

">

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

<label for="week">Select a week:</label>
<input type="week" id="week" name="week"> 

Output should be:

">

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:

• For "button", "reset", and "submit" - it defines the text on the button
• For "text", "password", and "hidden" - it defines the initial (default) value of the input field
• For "checkbox", "radio", "image" - it defines the value associated with the input (this is also the value that is sent on submit)

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

index.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> 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

<!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: