Local accessible form field generator

Hasilkan medan borang HTML yang boleh diakses

Bina medan berlabel dengan teks bantuan dan ralat yang disambungkan, keadaan asal yang diperlukan dan penanda semantik yang boleh disalin.

HTML ready

Accessible field preview

We'll send your receipt.

<div class="field">
  <label for="email">Email address <span aria-hidden="true">*</span></label>
  <input id="email" name="email" type="email" required aria-describedby="email-help">
  <p id="email-help">We&#39;ll send your receipt.</p>
</div>

Everything runs in your browser. Nothing is uploaded or saved.

Build the relationship once

The label's for value points to the input id, giving the control a clear accessible name.

aria-describedby connects longer help or error text without replacing the concise label.

Use the native required attribute for mandatory fields and aria-invalid only when the current value is known to be invalid.

Form field questions

Why use an explicit for/id pair?

It keeps the label relationship clear even when the markup is rearranged, and it enlarges the label's click target.

When should I show an error?

Only after validation knows the current value is invalid; the generated error is connected with aria-describedby.

Does this validate the value?

No. It creates accessible markup. Your form logic still needs type-specific validation and error timing.