HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>id and for Attributes</title>

  <style>

    body { font-family: system-ui, sans-serif; padding: 1.5rem; max-width: 420px; }

    label { display: block; margin-bottom: 0.35rem; font-weight: 600; }

    input { width: 100%; padding: 0.5rem; border: 1px solid #cbd5e1; border-radius: 6px; }

  </style>

</head>

<body>

  <form>

    <label for="username">Username</label>

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

  </form>

  <p style="margin-top:1rem;color:#64748b;font-size:0.9rem">Click the label text&mdash;focus moves to the input because <code>for</code> matches <code>id</code>.</p>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

HTML Attributes — id and label for