Meilleure alternative pour les informations en lecture seule dans la zone de saisie
J'ai ce formulaire où la ligne la plus haute (File #, Patient & Med.Aid) est en lecture seule. Les zones de saisie de cette ligne sont en lecture seule et le curseur se transforme en icône "interdit" en survolant ces champs. Je ne peux pas trouver une meilleure façon d'organiser ces informations sans encombrement et d'une manière qui correspond à la deuxième ligne.
Je voudrais savoir ce qui suit.
- Est-il suffisamment intuitif et convivial pour présenter des informations en lecture seule dans les zones de saisie?
- Existe-t-il un meilleur moyen d'afficher les informations de la première ligne sans utiliser de zones de saisie en lecture seule et sans perdre en lisibilité?
Oui, vous pourriez utiliser des étiquettes à la place si vous le souhaitez, mais cela implique d'ajouter du CSS pour styliser les étiquettes afin d'imiter les autres lignes ou de les styliser d'une autre manière. Les laisser en lecture seule vous oblige à utiliser CSS pour montrer que vous ne devez pas concentrer les entrées.
La chose la plus simple à faire est aussi la chose la plus simple à faire:
Utilisez la propriété disabled.
C'est exactement pour cela qu'il a été conçu. Les éléments désactivés ne permettent pas le focus , contrairement aux éléments en lecture seule, donc aucun CSS n'est nécessaire. Les éléments désactivés ne sont pas envoyés lorsque le formulaire est soumis, contrairement aux éléments en lecture seule, donc moins de surcharge.
L'utilisation de la propriété désactivée vous permet de conserver le style de votre entrée, tandis que dans le même temps, puisque les éléments sont désactivés, elle montre aux utilisateurs que les champs sont des entrées qui ont déjà été fournies et qu'elles ne sont pas modifiables.
J'ai créé un jsFiddle qui le démontre. Voici une capture d'écran:
