HTML Tutorial

HTML Tag: <input>

Usage:

The <input> tag creates input controls for user interaction, allowing them to enter or select data.

Attributes:

  • type: Specifies the type of input, such as text, password, checkbox, radio button, etc.
  • name: Gives the input a unique identifier.
  • value: Specifies the default value.
  • placeholder: Provides a提示text inside the input field.
  • required: Makes the input mandatory.
  • pattern: Defines a regular expression pattern for valid input.

Examples:

  • Text input: <input type="text" name="name">
  • Password input: <input type="password" name="password">
  • Checkbox: <input type="checkbox" name="agree">
  • Radio button: <input type="radio" name="gender" value="male">

HTML Example:

<!DOCTYPE html>
<html>
<body>
  <form>
    <input type="text" name="username" placeholder="Enter username">
    <input type="password" name="password" placeholder="Enter password">
    <input type="submit" value="Login">
  </form>
</body>
</html>

Accessibility:

  • Use descriptive names and placeholders to make inputs easily identifiable by screen readers.
  • Ensure that inputs are accessible to keyboard-only users by providing a tabindex attribute.
  • Provide alternative text for images used as input buttons.