totn HTML

HTML: <input> tag

This HTML tutorial explains how to use the HTML element called the <input> tag with syntax and examples.

Description

The HTML <input> tag is an input control that presents users with an interactive control for entering data. Traditionally, the <input> tag is found within the <form> tag and can represent text fields, checkboxes, dropdowns, buttons and other inputs, simply by setting the appropriate type attribute. This tag is also commonly referred to as the <input> element.

Syntax

In HTML, the syntax for the <input> tag is:

<body>
  <form action="" method="get">
    Company: <input type="text" name="company"><br>
    Address: <input type="text" name="address"><br>
    <input type="submit" value="Submit">
  </form>
</body>

Sample Output

Attributes

In addition to the Global Attributes, the following is a list of attributes that are specific to the <input> tag:

Attribute Description HTML Compatibility
autocomplete Value of either on or off to indicate whether the browser can automatically complete the values in the input elements based on values previously entered in the form HTML 4.01, HTML5
autofocus Boolean value indicating that the input should have input focus when the page is loaded, unless the user overrides it. HTML 4.01, HTML5
disabled Boolean value indicating that the user cannot interact with the input. HTML 4.01, HTML5
form Value indicating the form that owns the input. It is the id of a <form> in the same document. HTML 4.01, HTML5
list The id of the <datalist> that provided the list of suggested values for the input HTML 4.01, HTML5
name Name of the input HTML 4.01, HTML5
required Boolean value indicating whether the input is required. Required inputs must be completed before the form can be submitted. HTML 4.01, HTML5
type Type of the input. It can be one of the following values: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week HTML 4.01, HTML5
value Initial value of the input HTML 4.01, HTML5

Note

  • The HTML <input> element is found within the <body> tag. The <input> tag is usually found within the <form> tag.
  • By setting the type attribute, the <input> element can become text fields, checkboxes, radio buttons, dropdowns, buttons, password fields and so much more!

Browser Compatibility

The <input> tag has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • Edge Mobile
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the <input> tag below, exploring examples of how to use the <input> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

HTML5 Document

If you created a new web page in HTML5, your <input> tag might look like this:

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>HTML5 Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<form action="" method="get">
  Company: <input type="text" name="company"><br>
  Address: <input type="text" name="address"><br>
  <input type="submit" value="Submit">
</form>
</body>

</html>

In this HTML5 Document example, we have used the <form> tag to create an HTML form. This form contains two <input> controls for Company and Address as well as an <input> control for a submit button.

HTML 4.01 Transitional Document

If you created a new web page in HTML 4.01 Transitional, your <input> tag might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML 4.01 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<form action="" method="get">
  Company: <input type="text" name="company"><br>
  Address: <input type="text" name="address"><br>
  <input type="submit" value="Submit">
</form>
</body>

</html>

In this HTML 4.01 Transitional Document example, we have used the <form> tag to create an HTML form. This form contains two <input> controls for Company and Address as well as an <input> control for a submit button.

XHTML 1.0 Transitional Document

If you created a new web page in XHTML 1.0 Transitional, your <input> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHMTL 1.0 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<form action="" method="get">
  Company: <input type="text" name="company" /><br />
  Address: <input type="text" name="address" /><br />
  <input type="submit" value="Submit" />
</form>
</body>

</html>

In this XHTML 1.0 Transitional Document example, we have used the <form> tag to create an HTML form. This form contains two <input> controls for Company and Address as well as an <input> control for a submit button.

XHTML 1.0 Strict Document

If you created a new web page in XHTML 1.0 Strict, your <input> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.0 Strict Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<form action="" method="get">
  <div>
    Company: <input type="text" name="company" /><br />
    Address: <input type="text" name="address" /><br />
    <input type="submit" value="Submit" />
  </div>
</form>
</body>

</html>

In this XHTML 1.0 Strict Document example, we have used the <form> tag to create an HTML form. This form contains two <input> controls for Company and Address as well as an <input> control for a submit button.

XHTML 1.1 Document

If you created a new web page in XHTML 1.1, your <input> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.1 Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<form action="" method="get">
  <div>
    Company: <input type="text" name="company" /><br />
    Address: <input type="text" name="address" /><br />
    <input type="submit" value="Submit" />
  </div>
</form>
</body>

</html>

In this XHTML 1.1 Document example, we have used the <form> tag to create an HTML form. This form contains two <input> controls for Company and Address as well as an <input> control for a submit button.

Share on: