Read-only Field
Champ en lecture seule
Un champ en lecture seule peut recevoir le focus et sa valeur peut être copiée. La personne ne peut pas modifier la valeur.
readonly: focus + copy + submit, no edit; disabled: no normal focus or submit- 1Nom d'affichage · modifiable
value="Maya" - 2ID de compte · lecture seule
readonly - 3Code d'invitation · désactivé
disabled
<input readonly>readonly: focus + copy + submit, no edit; disabled: no normal focus or submitA11YUn autre exemple
Un identifiant de compte est en lecture seule. Une personne peut le sélectionner et le copier. Le champ natif pris en charge soumet toujours sa valeur.
Parties principales
- 01étiquette de champ
- 02Valeur actuelle
- 03Attribut en lecture seule
- 04comportement de mise au point
- 05Comportement de copie
- 06Comportement de soumission du formulaire
Utilisez-le lorsque
Utilisez-le lorsqu'une valeur doit rester visible et disponible pour être copiée. La tâche actuelle ne doit pas permettre l'édition.
Ne l'utilisez pas lorsque
N'utilisez pas aria-readonly seul pour bloquer la modification. Le readonly natif ne s'applique qu'aux contrôles de texte pris en charge.
Nom utilisé dans le code
readonly: focus + copy + submit, no edit; disabled: no normal focus or submit Avant d'expédier
Give each field a label that code can read. Link hints and errors, and keep entered values. Check autofill, keyboard order, validation timing, submit states, failure recovery, zoom, and languages.
Outcome: Complete the task with Champ en lecture seule (Read-only Field). User context: Un identifiant de compte est en lecture seule. Une personne peut le sélectionner et le copier. Le champ natif pris en charge soumet toujours sa valeur. Recommended pattern: Champ en lecture seule (Read-only Field). Why it fits: Utilisez-le lorsqu'une valeur doit rester visible et disponible pour être copiée. La tâche actuelle ne doit pas permettre l'édition. Do not use it when: N'utilisez pas aria-readonly seul pour bloquer la modification. Le readonly natif ne s'applique qu'aux contrôles de texte pris en charge. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): La norme couvre uniquement le champ d'application énuméré. Elle ne choisit ni le style visuel, ni la décision de produit, ni l'exemple de Vibulary. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Vérifiez cette demande
Review how Champ en lecture seule (Read-only Field) is used now. Definition: Un champ en lecture seule peut recevoir le focus et sa valeur peut être copiée. La personne ne peut pas modifier la valeur. Release checks: Give each field a label that code can read. Link hints and errors, and keep entered values. Check autofill, keyboard order, validation timing, submit states, failure recovery, zoom, and languages. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.