Categories
Learn HTML

HTML: input tag

HTML: <input> tag

In this series of learning HTML, we will teach you how to use HTML input tag with proper syntax and lots of examples. Let’s start on the HTML input tag.

Description of HTML input tag

The HTML “input” tag is a versatile tag that is used to create various types of form controls for collecting user input. The “input” tag is used in conjunction with other attributes to define the type of input control that is required.

Here are some common examples of input types:

  • Text input: used for entering single-line text
<input type="text" name="username">
  • Password input: used for entering passwords, where the input is masked with asterisks or dots
<input type="password" name="password">
  • Checkbox: used to present a yes/no or true/false choice
<input type="checkbox" name="newsletter" value="1">
  • Radio buttons: used to present a set of mutually exclusive options
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
  • Select list: used to present a drop-down list of options
<select name="country">
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
</select>
  • File input: used to upload files from the user’s computer
<input type="file" name="myfile">

These are just a few examples of the many types of input controls that can be created using the “input” tag. The “input” tag can also be used in conjunction with other attributes to define the appearance and behavior of the input control, such as size, maxlength, required, autofocus, and more.

Syntax of HTML input tag

The <input> tag in HTML is used to create a form control element that allows users to input data. Here’s the basic syntax of the <input> tag:

<input type="input-type" name="input-name" value="input-value">

The type attribute is used to specify the type of input control being created, such as text, password, checkbox, radio button, etc. The name attribute is used to specify the name of the input control, which is used to identify the data that the user has entered. The value attribute is used to specify the initial value for the input control.

Here’s an example of using the <input> tag to create a text input field:

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

This will create a text input field with the label “username” and an empty value. When the user submits the form, the value entered into this field will be sent to the server along with the input name “username”.

Note that the <input> tag can also have other attributes to control its behavior and appearance, such as maxlength to limit the number of characters that can be entered, placeholder to provide a hint to the user of what to enter, and more.

Global Attributes

The input tag is one of the most commonly used HTML elements, used to create various form controls such as text fields, checkboxes, radio buttons, and more. The input tag supports several global attributes that can be used to add additional functionality or styling to the form control. Here are some examples:

  1. accesskey: This attribute is used to assign a keyboard shortcut to the form control. The assigned key combination can vary depending on the browser and operating system being used. For example:
<input type="text" name="username" accesskey="u" />
  1. autocomplete: This attribute is used to specify whether the form control should have auto-completion enabled or not. The possible values are on (default), off, name, honorific-prefix, given-name, additional-name, family-name, honorific-suffix, nickname, email, username, new-password, current-password, one-time-code, organization-title, organization, street-address, address-line1, address-line2, address-line3, address-level1, address-level2, address-level3, address-level4, country, country-name, postal-code, cc-name, cc-given-name, cc-additional-name, cc-family-name, cc-number, cc-exp, cc-exp-month, cc-exp-year, cc-csc, cc-type, transaction-currency, transaction-amount, language, bday, bday-day, bday-month, bday-year, sex, tel, tel-country-code, tel-national, tel-area-code, tel-local, tel-extension, impp, url. For example:
<input type="text" name="username" autocomplete="off" />
  1. disabled: This attribute is used to disable the form control so that it cannot be interacted with by the user. For example:
<input type="text" name="username" disabled />
  1. readonly: This attribute is used to make the form control read-only, so that the user can see the value but cannot modify it. For example:
<input type="text" name="username" value="john.doe" readonly />
  1. required: This attribute is used to make the form control required, so that the user must enter a value in order to submit the form. For example:
<input type="text" name="username" required />
  1. size: This attribute is used to specify the visible width of the form control, in characters. For example:
<input type="text" name="username" size="20" />
  1. tabindex: This attribute is used to specify the order in which form controls should receive focus when the user presses the Tab key. The value of the tabindex attribute is a number, with lower numbers receiving focus first. For example:
<input type="text" name="username" tabindex="1" />
<input type="text" name="password" tabindex="2" />

These are just a few examples of the global attributes that can be used with the input tag. There are many more global attributes available, such as class, id, style, title, and more, which can be used to add additional functionality or styling to the form control.

Event Attributes

In HTML, you can use event attributes with the input tag to execute JavaScript code in response to specific events. Here are some commonly used event attributes with the input tag:

  1. onchange: This event is triggered when the value of the form control is changed, typically by the user. For example:
<input type="text" name="username" onchange="validateUsername(this.value)" />
  1. onfocus: This event is triggered when the form control receives focus, either by the user clicking on it or by using the Tab key to navigate to it. For example:
<input type="text" name="username" onfocus="highlightField(this)" />
  1. onblur: This event is triggered when the form control loses focus, either because the user clicks elsewhere or navigates away using the Tab key. For example:
<input type="text" name="username" onblur="validateUsername(this.value)" />
  1. onkeydown: This event is triggered when a key is pressed down while the form control has focus. For example:
<input type="text" name="username" onkeydown="trackKeys(event)" />
  1. onkeyup: This event is triggered when a key is released while the form control has focus. For example:
<input type="text" name="username" onkeyup="trackKeys(event)" />
  1. onkeypress: This event is triggered when a key is pressed and released while the form control has focus. For example:
<input type="text" name="username" onkeypress="preventSpecialChars(event)" />
  1. oninput: This event is triggered when the user inputs text into the form control, either by typing or by pasting. For example:
<input type="text" name="username" oninput="checkLength(this.value)" />

Note that these are just a few examples of the event attributes that can be used with the input tag. There are many more events available, such as onclick, ondblclick, onsubmit, onreset, onselect, and more. You can use these events to create interactive forms that respond to user input in real-time.

Other Attributes

In addition to the global and event attributes, the input tag also has specific attributes that are used to define the type and behavior of the input field. Here are some commonly used attributes:

  1. type: This attribute is used to specify the type of input field. The most common values are text, password, checkbox, radio, submit, reset, file, email, number, date, and time. For example:
<input type="text" name="username" />
<input type="password" name="password" />
<input type="checkbox" name="remember" />
<input type="radio" name="gender" value="male" />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
<input type="file" name="photo" />
<input type="email" name="email" />
<input type="number" name="age" />
<input type="date" name="birthdate" />
<input type="time" name="meeting-time" />
  1. name: This attribute is used to specify a name for the input field, which is used to identify the field when the form is submitted. For example:
<input type="text" name="username" />
<input type="password" name="password" />
<input type="checkbox" name="remember" />
<input type="radio" name="gender" value="male" />
  1. value: This attribute is used to set the initial value of the input field. For example:
<input type="text" name="username" value="John" />
<input type="password" name="password" value="" />
<input type="checkbox" name="remember" value="1" checked />
<input type="radio" name="gender" value="male" checked />
  1. placeholder: This attribute is used to provide a hint or example of what should be entered in the input field. It is displayed as grayed-out text when the field is empty. For example:
<input type="text" name="username" placeholder="Enter your username" />
<input type="password" name="password" placeholder="Enter your password" />
  1. required: This attribute is used to require the user to fill in the input field before submitting the form. For example:
<input type="text" name="username" required />
<input type="email" name="email" required />
  1. readonly: This attribute is used to make the input field read-only, meaning that the user cannot change its value. For example:
<input type="text" name="username" value="John" readonly />
  1. disabled: This attribute is used to disable the input field, meaning that it cannot be interacted with by the user. For example:
<input type="text" name="username" value="John" disabled />

These are just a few examples of the many attributes that can be used with the input tag to define the behavior and appearance of the input field.

 

 

 

Notes on HTML input tag

Here are some important notes to keep in mind when using the input tag in HTML:

  1. The input tag is a self-closing tag, which means it does not require a closing tag.
  2. The type attribute is required for the input tag to specify the type of input field.
  3. The name attribute is required for the input tag to identify the input field when the form is submitted.
  4. The value attribute is used to set the initial value of the input field.
  5. The placeholder attribute is used to provide a hint or example of what should be entered in the input field.
  6. The required attribute is used to require the user to fill in the input field before submitting the form.
  7. The readonly attribute is used to make the input field read-only, meaning that the user cannot change its value.
  8. The disabled attribute is used to disable the input field, meaning that it cannot be interacted with by the user.
  9. The autocomplete attribute is used to enable or disable autocomplete for the input field.
  10. The pattern attribute is used to specify a regular expression pattern that the input value must match.
  11. The min and max attributes are used to specify the minimum and maximum values for number, range, and date input types.
  12. The step attribute is used to specify the step size for number and range input types.
  13. The accept attribute is used to specify the types of files that can be uploaded using file input type.
  14. The autofocus attribute is used to automatically focus on the input field when the page is loaded.
  15. The form attribute is used to specify the form to which the input field belongs.

These are just some important notes to keep in mind when using the input tag in HTML.

 

 

Browser Compatibility

The HTML input tag has essential support with the following browsers:

  1. Chrome
  2. Internet Explorer (IE)
  3. Opera
  4. Safari (WebKit)
  5. Firefox (Gecko)
  6. Android
  7. Firefox Mobile (Gecko)
  8. Edge Mobile
  9. Opera Mobile
  10. Safari Mobile

Examples of HTML input tag

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

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

  1. HTML5
  2. HTML4
  3. XHTML

 

What are the major differences between HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1 Document?

 

HTML5 Document

Here is an example of an HTML5 document that uses the input tag to create a form with several different types of input fields:

<!DOCTYPE html>
<html>
<head>
<title>Example Form</title>
</head>
<body>
<h1>Example Form</h1>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

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

<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="99" required>

<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

<label for="interests">Interests:</label>
<input type="checkbox" id="music" name="interests" value="music">
<label for="music">Music</label>
<input type="checkbox" id="sports" name="interests" value="sports">
<label for="sports">Sports</label>
<input type="checkbox" id="movies" name="interests" value="movies">
<label for="movies">Movies</label>

<label for="comments">Comments:</label>
<textarea id="comments" name="comments" rows="5" cols="40"></textarea>

<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>

In this example, we have created a simple form that includes the following input fields:

  1. A text input field for the user’s name, with the required attribute to ensure that it is not left blank.
  2. An email input field for the user’s email address, also with the required attribute.
  3. A password input field for the user’s password, with the required attribute.
  4. A number input field for the user’s age, with the min and max attributes to limit the range of possible values and the required attribute to ensure that it is not left blank.
  5. Two radio buttons for the user’s gender, with the required attribute to ensure that one of them is selected.
  6. Three checkbox fields for the user’s interests, with the name attribute set to the same value for all three to group them together.
  7. A textarea field for the user’s comments.
  8. A submit button to submit the form and a reset button to clear the form.

This example demonstrates how the input tag can be used to create a variety of different input fields for collecting user data.

 

 

HTML 4.01 Transitional Document

I can provide you with a detailed example using HTML 4.01 Transitional and the input tag.

Here’s an example of an HTML form that contains a text input field and a submit button:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Example Form</title>
</head>
<body>
<form action="process-form.php" method="POST">
<label for="name">Name:</label>
<input type="text" name="name" id="name"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

In this example, we have used the input tag to create a text input field. The type attribute is set to “text” to indicate that this is a text input field. The name attribute is set to “name” to specify the name of the input field. The id attribute is set to “name” to provide a unique identifier for the input field. The for attribute of the label tag is set to “name” to associate the label with the input field.

When the form is submitted, the data from the text input field will be sent to the URL specified in the action attribute of the form tag using the HTTP POST method. In this example, the data will be sent to a PHP script named “process-form.php”.

Note that this is just a simple example, and in a real-world scenario, you would typically include additional input fields and validation code to ensure that the data submitted by the user is valid and secure.

 

 

XHTML 1.0 Transitional Document

Here is an example of an XHTML 1.0 Transitional document that includes an HTML input tag:

<?xml version="1.0" encoding="UTF-8"?>
<!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>
<title>Example Form</title>
</head>
<body>
<form action="process-form.php" method="POST">
<label for="name">Name:</label>
<input type="text" name="name" id="name" /><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>

 

In this example, we are using XHTML 1.0 Transitional as our document type, which is an XML-based markup language that is similar to HTML 4.01 Transitional. The input tag is used to create a text input field. The type attribute is set to “text” to indicate that this is a text input field. The name attribute is set to “name” to specify the name of the input field. The id attribute is set to “name” to provide a unique identifier for the input field. The for attribute of the label tag is set to “name” to associate the label with the input field.

When the form is submitted, the data from the text input field will be sent to the URL specified in the action attribute of the form tag using the HTTP POST method. In this example, the data will be sent to a PHP script named “process-form.php”.

Note that in XHTML, all tags must be closed, even if they do not have any content. In this example, the input and br tags are closed with a forward slash (/) before the closing angle bracket. Also, XHTML requires that all attributes be enclosed in quotes.

It’s worth noting that the use of XHTML has declined in recent years, and HTML5 has become the preferred markup language for most web developers. However, understanding XHTML can still be useful for understanding the fundamentals of web development and working with legacy code.

XHTML 1.0 Strict Document

Here’s an example of an XHTML 1.0 Strict document that includes an HTML input tag:

<?xml version="1.0" encoding="UTF-8"?>
<!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>
<title>Example Form</title>
</head>
<body>
<form action="process-form.php" method="POST">
<label for="name">Name:</label>
<input type="text" name="name" id="name" />
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>

In this example, we are using XHTML 1.0 Strict as our document type, which is a more rigid version of XHTML that enforces stricter rules for markup. The input tag is used to create a text input field. The type attribute is set to “text” to indicate that this is a text input field. The name attribute is set to “name” to specify the name of the input field. The id attribute is set to “name” to provide a unique identifier for the input field. The for attribute of the label tag is set to “name” to associate the label with the input field.

When the form is submitted, the data from the text input field will be sent to the URL specified in the action attribute of the form tag using the HTTP POST method. In this example, the data will be sent to a PHP script named “process-form.php”.

Note that in XHTML 1.0 Strict, all tags must be closed, even if they do not have any content. In this example, the input tag is closed with a forward slash (/) before the closing angle bracket. Also, like in XHTML 1.0 Transitional, all attributes must be enclosed in quotes.

It’s important to note that XHTML 1.0 Strict is not as widely used as HTML5 or even XHTML 1.0 Transitional, as it is more difficult to work with due to its strict rules. However, it can still be useful for understanding the fundamentals of web development and working with legacy code.

 

 

XHTML 1.1 Document

Here’s an example of an XHTML 1.1 document that includes an HTML input tag:

<?xml version="1.0" encoding="UTF-8"?>
<!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>
<title>Example Form</title>
</head>
<body>
<form action="process-form.php" method="POST">
<label for="name">Name:</label>
<input type="text" name="name" id="name" />
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>

In this example, we are using XHTML 1.1 as our document type, which is an updated version of XHTML that includes stricter rules and some new features. The input tag is used to create a text input field. The type attribute is set to “text” to indicate that this is a text input field. The name attribute is set to “name” to specify the name of the input field. The id attribute is set to “name” to provide a unique identifier for the input field. The for attribute of the label tag is set to “name” to associate the label with the input field.

When the form is submitted, the data from the text input field will be sent to the URL specified in the action attribute of the form tag using the HTTP POST method. In this example, the data will be sent to a PHP script named “process-form.php”.

Note that in XHTML 1.1, all tags must be closed, even if they do not have any content. In this example, the input tag is closed with a forward slash (/) before the closing angle bracket. Also, like in XHTML 1.0, all attributes must be enclosed in quotes.

It’s worth noting that XHTML 1.1 is not widely used in modern web development, as it can be more difficult to work with due to its stricter rules and lack of support for certain features. However, it can still be useful for understanding the fundamentals of web development and working with legacy code.