로컬 접근 가능한 폼 필드 생성기

접근 가능한 HTML 폼 필드 생성

label과 도움말·오류 문구를 연결하고 native required 상태를 포함한 semantic markup을 복사하세요.

HTML 준비 완료

접근 가능한 필드 미리보기

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>

모든 처리는 브라우저에서 진행됩니다. 아무것도 업로드하거나 저장하지 않습니다.

관계를 한 번에 연결하기

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.

폼 필드 질문

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.