Alignement vertical du champ et de la valeur dans le formulaire

Question

Quelle est la meilleure pratique et la méthode la plus portable pour aligner verticalement une étiquette de champ (texte libre) et un élément de formulaire (par exemple, <input>) dans un même formulaire <tr>? Dois-je aligner la base de l'étiquette et le contenu du <input> ou aligner la base de l'étiquette et la base de l'étiquette <input> elle-même? Pourriez-vous inclure quelques exemples aussi?

Il n'y a aucune exigence spécifique de mon client, donc je veux juste suivre la norme de l'industrie.

Merci.

Answer 1

@Oded a raison, il n'y a pas de norme industrielle pour cela. En fait, dans la zone de conception, toute norme est hautement subjective.

Il y a quelques modèles communs (au moins ces deux, je l'ai vu souvent) d'un tel alignement:

1). Sur une rangée, label à gauche et input (ou autre élément) sur la droite. Basé sur la conception, il peut être vice-versa. Il est pratique d'utiliser la règle css vertical-align dans un tel cas. Je préfère l'alignement de ligne de base ou vertical moyen.

2). label en haut de l'élément de formulaire correspondant. Dans ce cas, le plus simple est d'utiliser display:block sur les étiquettes. Vice-versa (label inférieur à l'élément de forme) est généralement considéré comme non convivial (du moins je le pense vraiment).

Important: Dont't oublier d'utiliser for attribut dans label balise avec correspondant id attribut sur l'élément de forme. C'est en fait un peu la norme de l'industrie.

Answer 2

Il n'y a pas de "standard de l'industrie".

Vous faites ce qui a l'air bien dans votre conception. J'ai tendance à tout aligner sur "top", donc il est clair quelle étiquette va avec quelle entrée - pour les cas où j'ai une zone de texte ou beaucoup de texte dans l'étiquette (c'est-à-dire des charges de texte explicatif).