`<input>` - input control

<input> is one of the most commonly used form elements in HTML, designed to create various types of input controls that allow users to enter data or interact with a page. It defines different input types through the type attribute, supporting forms such as text, password, checkboxes, radio buttons, and more.

Basic Syntax of <input>

<input> is a void element and does not require a closing tag. Its core attribute is type, which specifies the type of input control. The basic syntax is as follows:

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

Common attributes include:

• type: Defines the input type (e.g., text, password, checkbox, etc.)
• name: The field name for form submission
• id: Used to associate with <label> or for JavaScript manipulation
• value: Default value
• placeholder: Hint text
• required: Marks the field as mandatory

Common Input Types

Text Input (text)

The most basic text input field for single-line text:

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

Password Input (password)

Used for sensitive information; input is displayed as dots or asterisks:

<input type="password" name="pwd" minlength="8" required>

Checkbox (checkbox)

Allows selecting multiple options:

<input type="checkbox" id="subscribe" name="subscribe" checked>
<label for="subscribe">Subscribe to newsletter</label>

Radio Button (radio)

Used to select a single value from a group of options:

<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>

<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

File Upload (file)

Allows users to select files for upload:

<input type="file" name="avatar" accept="image/*">

Hidden Field (hidden)

Stores data that needs to be submitted but not displayed to users:

<input type="hidden" name="user_id" value="12345">

Advanced Input Types

HTML5 introduced more semantic input types:

Email Address (email)

Includes basic email format validation:

<input type="email" name="user_email" multiple>

Number Input (number)

Restricts input to numbers and allows setting ranges:

<input type="number" name="age" min="18" max="99" step="1">

Date Picker (date)

Provides a date selection interface:

<input type="date" name="birthday" min="1900-01-01">

Color Picker (color)

Allows users to select a color:

<input type="color" name="fav_color" value="#ff0000">

Range Slider (range)

Creates a slider control:

<input type="range" name="volume" min="0" max="100" step="5">

Form Association and Validation

<label> Association

Properly associating labels improves accessibility:

<label for="username">Username:</label>
<input type="text" id="username" name="username">

Form Validation Attributes

<input type="text" required pattern="[A-Za-z]{3}" title="3 letters">
<input type="email" required>
<input type="url" placeholder="https://example.com">

Styling and Interaction Enhancements

Disabled and Read-Only States

<input type="text" value="Non-editable" readonly>
<input type="text" disabled>

Autocomplete and Autofocus

<input type="search" autocomplete="off" autofocus>

Using Datalist for Suggestions

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
</datalist>

Practical Examples

Login Form

<form>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" required>
  </div>
  <div>
    <label for="pwd">Password:</label>
    <input type="password" id="pwd" minlength="6" required>
  </div>
  <div>
    <input type="checkbox" id="remember">
    <label for="remember">Remember me</label>
  </div>
  <button type="submit">Login</button>
</form>

User Registration Form

<form>
  <fieldset>
    <legend>Basic Information</legend>
    <input type="text" name="name" placeholder="Name" required>
    <input type="tel" name="phone" placeholder="Phone" pattern="[0-9]{11}">
  </fieldset>

  <fieldset>
    <legend>Preferences</legend>
    <input type="color" name="theme" value="#4CAF50">
    <input type="range" name="font_size" min="12" max="24" value="16">
  </fieldset>
</form>

Browser Compatibility Considerations

While modern browsers support <input> types well, some types may fall back to text in unsupported browsers. Feature detection can be used:

if ('valueAsDate' in document.createElement('input')) {
  console.log('Date input supported');
}

For older browsers, polyfills or JavaScript libraries may be needed to enhance functionality.

Accessibility Recommendations

1. Always provide an associated <label> for <input>
2. Use aria-* attributes for custom controls
3. Ensure focus states are visible
4. Provide sufficient hints for visually impaired users

<label for="search">Search:</label>
<input type="search" id="search" aria-describedby="search-help">
<span id="search-help">Enter at least 3 characters</span>

Performance Optimization Tips

1. Avoid excessive real-time validation (use onchange instead of oninput)
2. Use lazy loading for large forms
3. Consider input experience on mobile devices
4. Use the autocomplete attribute appropriately

<input type="text" name="address" autocomplete="street-address">