HTML Code
<!DOCTYPE html>

<html lang=en>

<head>

  <meta charset=UTF-8>

  <meta name=viewport content="width=device-width,initial-scale=1">

  <title>dirname vs dir</title>

  <style>body{font-family:system-ui,sans-serif;margin:0;padding:1.5rem;background:#f8fafc;color:#334155;line-height:1.7}h1{margin:0 0 .75rem;font-size:1.25rem;color:#0f172a}table{width:100%;max-width:560px;border-collapse:collapse;background:#fff;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;font-size:.875rem}td,th{padding:.65rem .75rem;border-bottom:1px solid #e2e8f0;text-align:left;vertical-align:top}th{background:#f1f5f9;color:#0f172a}tr:last-child td{border-bottom:0}pre{margin:1rem 0 0;padding:.75rem;background:#0f172a;color:#e2e8f0;border-radius:8px;font-size:.8125rem;max-width:560px;overflow-x:auto}.wrong{margin-top:1rem;font-size:.875rem;color:#9a3412;background:#fff7ed;border:1px solid #fdba74;padding:.65rem .75rem;border-radius:6px;max-width:560px}code{background:#e2e8f0;padding:.1rem .35rem;border-radius:4px}</style>

</head>

<body>

  <h1>dirname is not the same as dir</h1>

  <table>

    <thead>

      <tr><th>Attribute</th><th>Value meaning</th><th>Role</th></tr>

    </thead>

    <tbody>

      <tr>

        <td><code>dir</code></td>

        <td><code>ltr</code>, <code>rtl</code>, <code>auto</code></td>

        <td>Controls how text is displayed</td>

      </tr>

      <tr>

        <td><code>dirname</code></td>

        <td>Field name (e.g. <code>comment-dir</code>)</td>

        <td>Submits direction as a second form field</td>

      </tr>

    </tbody>

  </table>

  <pre>&lt;textarea name="comment" dir="auto" dirname="comment-dir"&gt;&lt;/textarea&gt;

→ comment=…&amp;comment-dir=ltr</pre>

  <p class=wrong><strong>Invalid:</strong> <code>dirname="ltr"</code> — the value is a <em>field name</em>, not a direction keyword.</p>

</body>

</html>
Lines: 0 | Characters: 0
Live Preview Auto-refresh on Run
HTML dirname vs dir Attribute
