Qarpeo LogoInstitute

<input>

The HTML <input> element generates interactive elements within a form, including text fields, checkboxes, and buttons, utilizing different type attributes to specify their functions.

<input> Tag

The <input> element generates interactive form controls for collecting user data.

Syntax

index.html
<input type="type" name="name" value="value" id="id" placeholder="placeholder" required>

<input> Demo

  • Submitting a form with text direction.


index.html
<form>
  <label for="fruit">Fruit:</label>
  <input type="text" name="fruit" dirname="fruit-dir" value="cherry"><br><br>
  <button type="button">Submit</button>
</form>
  • This example shows how to submit text direction using the dirname attribute in a form.

Explanation and Usage

  • The <input> tag is used to create fields where users can enter data.
  • Among form elements, <input> is one of the most essential components.
  • Its appearance varies based on the type attribute, allowing different kinds of user input.

Below are the available input types:

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text"> (default type)
  • <input type="time">
  • <input type="url">
  • <input type="week">
For better accessibility and user experience, associate the <label> tag with input fields like text, checkbox, radio, file, and password.

Key Attributes

  • type: Defines the input control type (e.g., text, radio, file).
  • accept: Specifies allowed file types for file inputs.
  • alt: Provides fallback text for image buttons.
  • autocapitalize: Manages automatic text capitalization.
  • autofocus: Sets the input to receive focus on page load.
  • dirname: Submits the text's reading direction (ltr, rtl).

Conclusion

The <input> tag is a crucial element in HTML for creating interactive form fields that collect user data. With various type attributes, it supports different input formats like text, numbers, dates, files, and more. Leveraging attributes like required, placeholder, and autofocus enhances functionality and accessibility. To ensure a better user experience, it's important to associate <input> elements with appropriate <label> tag for clarity and accessibility.

<form>

The HTML <form> element contains various input controls and elements, enabling users to submit data to a server for processing via buttons, fields, and other interactive components.

<isindex>

The <isindex> tag offered a basic search box in HTML documents, enabling users to enter queries that would be sent to the server.