Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Suis le coach...pour construire un formulaire dans une page web ASP.NET 2.0 à l'aide d'une feuille de style (CSS)

L’objectif est de construire un formulaire simple dans une page web ASP.NET 2.0, classiquement composé de zones de texte libellées, mais sans utiliser une table HTML, c'est-à-dire en utilisant uniquement les propriétés des feuilles de style (CSS). L'objectif de cet article est de voir les principes de base sur un formulaire simple.

Supposons qu’on veuille dessiner le formulaire suivant : 


Marche à suivre :

  • Sur une page ASP.NET vierge, dessiner un formulaire à l'aide des contrôles serveurs web ASP.NET 2.0 de type Textbox, DropDownList et Label :

<form id="form1" runat="server"> <asp:Label ID="lblCategorie" runat="server" Text="Catégorie"></asp:Label> <asp:DropDownList ID="ddlCategories" runat="server"></asp:DropDownList><br /> <asp:Label ID="lblIntitule" runat="server" Text="Intitulé"></asp:Label> <asp:TextBox ID="txtIntitule" runat="server"></asp:TextBox><br /> </form>

  • Créez une feuille de style avec une première règle portant sur la balise body pour définir un cadre globale pour le formulaire.

body { position : absolute; left : 50px; top : 20px; height : 80px; width : 400px; z-index : 20; background-color : #F1F1F1; border : solid 2px #D6D2C2; padding-top:10px; }

lightbulb Un truc sympa est d'utiliser le contrôle serveur web d'ASP.NET 2.0 de type Panel pour délimiter le formulaire. Le rendu de ce contrôle n'est rien d'autre qu'une balise <div> standard. L'intérêt est que vous pouvez facilement le faire apparaître et disparaître par programmation. Et pour le positionner et le dimensionner, il suffit de configurer l'attribut Class du contrôle pour qu'il pointe sur une règle d'affichage comme précédemment mais qui serait nommée div.NomDelAttributClassDuPanel{}.
  • Exécutez la page pour visualiser le cadre mis en place. Pour l'instant les contrôles ne sont pas alignés et c'est là où on a le réflexe d'utiliser une table html pour positionner les éléments les uns par rapport aux autres, alors que c'est très simple à mettre en place avec une feuille de style.
    Cadre initial.jpg
  • La première étape consiste à travailler les libellés du formulaire. L'astuce consiste à les caler sur une même largeur pour que les contrôles de saisie qui les suivent directement soient alignés à leur tour. Le rendu du contrôle serveur web de type Label étant une balise <span>, ajoutez la règle suivante à la feuille de style :

span { display : block; float : left; width : 150px; text-align : right; padding : 2px 0px 0px 0px; }

La propriété float est toute la clé de l'alignement puisque c'est elle qui provoque l’affichage du contrôle de saisie immédiatement à droite du libellé (voir l'article ici pour en savoir plus sur cette propriété). La propriété width cale la largeur des libellés à 150 pixels, alignant ainsi tous les contrôles de saisie du formulaire à partir de 200 pixels du bord gauche du panneau. Et enfin on cale les libellés sur la droite via la propriété text-align.

lightbulbUn autre truc sympa est d'utiliser la propriété AssociatedControlID du contrôle serveur web de type Label pour indiquer quel est le contrôle de saisie directement associé au libellé. Dans notre cas, le contrôle ddlCategories est associé à lblCategorie et le contrôle txtIntitule au contrôle lblIntitule
Lorsque la propriété AssociatedControlID est renseignée, au lieu de générer une balise <span>, le contrôle Label s’affiche sous la forme d’un élément <label> html (nouveau depuis la version 4.0 de l’html). L'attribut for de la balise <label> est alors affectée avec la propriété ID du contrôle serveur associé au libellé (généré à partir de la valeur de AssociatedControlID).
L’effet qui en résulte est qu’un clic de l'utilisateur sur le libellé provoque le déplacement du focus sur le contrôle de saisie associé Smile.

Vous pouvez ainsi modifier le source de la page et ajouter l'attribut AssociatedControlID comme ceci :

<form id="form1" runat="server"> <asp:Label ID="lblCategorie" AssociatedControlID="ddlCategories" runat="server" Text="Catégorie"></asp:Label> <asp:DropDownList ID="ddlCategories" runat="server"></asp:DropDownList><br /> <asp:Label ID="lblIntitule" AssociatedControlID="txtIntitule" runat="server" Text="Intitulé"></asp:Label> <asp:TextBox ID="txtIntitule" runat="server"></asp:TextBox> </form>

La règle d'affichage dans la feuille de style devient :

label { display : block; float : left; width : 150px; text-align : right; padding : 2px 0px 0px 0px; }

Vous obtenez le formulaire suivant. Les libellés sont calés à 150 pixels du bord gauche du cadre et les contrôles de saisie sont collés immédiatement derrière leur libellé dans le flux html de la page.

  • Il ne reste plus qu'à configurer l'affichage des contrôles de saisie eux-même. Ajoutez les règles suivantes à la feuille de style. Créez des classes pour catégoriser les éléments propres au formulaire :

input.ZoneDeTexte { width : 200px; } select { width : 205px; }

lightbulb Pour faire simple, aucun sélecteur de classe n'accompagne ici la règle select mais pour la règle input, c'est nécessaire de façon à pouvoir distinguer par la suite les zones de texte des contrôles bouton qui sont également des éléments input html. N'oubliez pas donc d'ajouter l'attribut Class à la définition du contrôle serveur web dans le source de la page pour indiquer le sélecteur de class défini dans la règle :

<asp:TextBox ID="txtIntitule" Class="ZoneDeTexte" runat="server"></asp:TextBox>

lightbulbNotez que la largeur prévue pour la liste déroulante est un peu plus importante que pour la zone de texte. Cela correspond à l'espace de la flèche à droite de la liste qui permet de dérouler celle-ci.
  • Lorsque vous exécutez la page, vous obtenez :

 

  • En utilisant le même procédé, ajoutez à la suite du formulaire deux boutons OK/Cancel. Pour aligner verticalement le premier bouton sur les contrôles de saisie, précédez les boutons d'un libellé avec un espace blanc comme ceci :

<asp:Label ID="lblBoutonStandard" runat="server" AssociatedControlID="btnOK" Text="&nbsp;"></asp:Label> <asp:Button ID="btnOK" runat="server" Text="Ok" /> <asp:Button ID="BtnAnnuler" Class="BoutonStandard" runat="server" Text="Annuler" />
input.BoutonStandard { color : Gray; background-color : #EBEADB; border : solid 2px #D6D2C2; }

lightbulbLe sélecteur de classe BoutonStandard permet d'identifier le style du bouton par rapport à celui de la zone de texte, les deux contrôles serveurs web de type TextBox et Button ayant tous deux pour rendu une même balise <input>.

  • Lorsque vous exécutez la page, vous obtenez :

Vous pouvez retrouver le code d'exemple présenté dans cet article en pièce jointe.

Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :
Posted: jeudi 15 mars 2007 00:10 par bianca
Classé sous : ,

Attachment(s): Formulaire.zip

Commentaires

cyril a dit :

Pas mal du tout, ca fait plaisir de voir que je ne suis plus le seul à faire du CSS ;-)

Je me permet quand même quelques ajouts :

-Le principal interet d'utiliser la propriété AssociatedControlID d'un label est bien sur de générer un

<label> avec l'attribut for ce qui est TRES important en terme d'accessibilité, cela ne permet pas seulement d'avoir le focus sur la textbox associé lorsqu'on click dessus.

-l'utilisation d'un panel est lui aussi important pour regrouper un ensemble de controle. Si l'on spécifie la propriété GroupingText, cela genere un <fieldset> (en plus du div) ainsi qu'un <legend> ce qui permet d'avoir du HTML très clair et très sémantique, donc plus accessible et donc plus simple/clair pour l'utilisateur.

En plus un Panel possède une propriété DefaultButton qui permet d'activer un bouton spécifique lorsqu'on appuie sur la touche entrée quand on est dans un TextBox contenu dans le Panel.

L'un des principal danger, lorsque l'on passe de la mise en page par tableau vers du CSS, et que l'on utilise beaucoup trop les div/span. (X)HTML est riche, les balises div et span ne sont que des balises basique que l'on utilise lorsqu'aucune autre balise n'est utilisable. Bien souvent on peut utiliser des <p>, </p><fieldset>, <label>, <legend>, <li>, <strong> et bien d'autres choses encore :-)

# mars 15, 2007 01:14
Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- Merci par Blog de Jérémy Jeanson le 10-01-2019, 20:47

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01