Input tag in HTML

The <input> tag in HTML is used to create interactive fields within a form, allowing users to enter data that can be submitted to a server.

It is a self-closing tag and supports a wide variety of type attributes such as text, email, password, number, checkbox, radio, and more, each designed to capture specific kinds of input.

Developers can enhance usability by adding attributes like placeholder, required, value, name, id, and autocomplete.

Click to Enroll Free HTML Course

What is an Input Field?

It is a self-closing tag used inside forms to take user inputs like text, number, email, password, etc.

An input field is a box or UI element on a webpage that allows users to enter or select data. It is created using the <input> tag.

The type of input is decided by the type attribute in the <input> tag. Different types give different ways to enter data.

Basic Structure of <input> Tag:

<input type="text" name="username" placeholder="Enter your name">

Types of Input Fields

 Complete HTML Form Example Using All Input Types

<form action="submit.php" method="post">

  <!-- 1. Text -->
  <label>Text:</label>
  <input type="text" name="username" placeholder="Enter your name">
  <br><br>
  <!-- 2. Password -->
  <label>Password:</label>
  <input type="password" name="password" placeholder="Enter your password">
  <br><br>
  

  <!-- 3. Email -->
  <label>Email:</label>
  <input type="email" name="email" placeholder="Enter your email">
  <br><br>
  

  <!-- 4. Number -->
  <label>Number:</label>
  <input type="number" name="age" min="1" max="120">
  <br><br>
  
  <!-- 5. Tel -->
  <label>Phone:</label>
  <input type="tel" name="phone" placeholder="Enter phone number">
  <br><br>
  

  <!-- 6. URL -->
  <label>Website:</label>
  <input type="url" name="website" placeholder="https://example.com">
  <br><br>
  

  <!-- 7. Date -->
  <label>Date:</label>
  <input type="date" name="birthdate">
  <br><br>
  

  <!-- 8. Time -->
  <label>Time:</label>
  <input type="time" name="meeting_time">
  <br><br>
  

  <!-- 9. Datetime-local -->
  <label>Date & Time:</label>
  <input type="datetime-local" name="appointment">
  <br><br>
  

  <!-- 10. Month -->
  <label>Month:</label>
  <input type="month" name="birthmonth">
  <br><br>
  

  <!-- 11. Week -->
  <label>Week:</label>
  <input type="week" name="week">
  <br><br>
  

  <!-- 12. Checkbox -->
  <label>Accept Terms:</label>
  <input type="checkbox" name="terms" value="accepted"> Yes
  <br><br>
  

  <!-- 13. Radio -->
  <label>Gender:</label>
  <input type="radio" name="gender" value="male"> Male
  <input type="radio" name="gender" value="female"> Female
  <br><br>
  

  <!-- 14. File -->
  <label>Upload File:</label>
  <input type="file" name="upload_file">
  <br><br>
  

  <!-- 15. Color -->
  <label>Favorite Color:</label>
  <input type="color" name="color">
  <br><br>
  

  <!-- 16. Range -->
  <label>Volume (0 to 100):</label>
  <input type="range" name="volume" min="0" max="100">
  <br><br>
  

  <!-- 17. Hidden -->
  <input type="hidden" name="user_id" value="123456">
  <!-- No label because it's hidden -->
  

  <!-- 18. Button (does nothing alone) -->
  <label>Button (Custom):</label>
  <input type="button" value="Click Me">
  <br><br>
  

  <!-- 19. Submit -->
  <input type="submit" value="Submit Form">
  <br><br>
  

  <!-- 20. Reset -->
  <input type="reset" value="Reset Form">

</form>

Most Important Questions

1. How does the type attribute change the behavior of an <input> tag?

The type attribute changes the input’s behavior and UI. For example:

• text lets user type any text.
• password masks characters with dots.
• number only allows numbers and shows arrows to increase/decrease.
• checkbox shows a square box for yes/no or multiple select.
• radio shows round buttons, only one selectable per group.
  Each type controls input restrictions and how the input looks or behaves without extra scripting.

2. Why do checkboxes and radio buttons use the value attribute differently from text inputs?

For text inputs, the value is the actual text inside the input box. For checkboxes and radios, the value represents what is submitted or logically chosen when the box/button is checked or selected. If unchecked, the value is ignored. So, value in checkboxes/radios defines the meaning of that option, not the typed content.

3. What happens if you omit the value attribute in <input type=”checkbox”> or <input type=”radio”>?
If you don’t specify a value, the default submitted value is “on” when the checkbox or radio is checked. Without a value attribute, the checkbox/radio still works visually but sends “on” as data.

4. Can an <input> element have multiple types simultaneously?

No. The type attribute accepts only a single valid value per input. Multiple types like type="text number" are invalid and the browser falls back to default type="text". Only one input type per element is allowed.

5. What is the difference between <input type="text"> and <input type="search">?

type="search" is similar to text but optimized for search input. Browsers may show a clear “×” button to clear the input, and on some devices, it may have slightly different keyboard or accessibility features. Functionally both accept text, but search is semantically for search queries.

6. What role does the disabled attribute play on an <input>?

disabled makes the input non-editable, non-focusable, and grayed out. The user cannot type, select, or interact with it. It’s a visual and functional lock on the input, indicating it’s inactive.

7. What happens if an <input> has the readonly attribute?

readonly makes the input value non-editable but still selectable and focusable. The user can highlight and copy the content but can’t change it. Unlike disabled, the input looks active and participates in tab navigation but prevents typing.

8. How does the maxlength attribute influence an <input type="text">?

maxlength sets the maximum number of characters the user can type. The input won’t accept more characters beyond this limit. This limits user input length right at the input level without scripting.

9. How do min and max attributes affect inputs of type number, range, date, or time?

min and max define the allowed value range for inputs like numbers, ranges, dates, or times. The input UI enforces these constraints by restricting user selection or disabling values outside the range. For example, min="1" and max="10" restrict values to between 1 and 10.

10. Can an <input> tag trigger different keyboards on mobile devices?

Yes. Mobile browsers show keyboards optimized for the input type:

• type="email" shows the keyboard with @ and .com keys.
• type="tel" shows the numeric keypad.
• type="number" shows number-only keyboard.

type="text" shows a full alphanumeric keyboard.
This improves user experience by showing relevant keyboards automatically.