Fermer

mai 8, 2018

Une plongée profonde dans le composant Form Bootstrap –


Dans cet article, vous allez apprendre à mettre en forme des éléments de formulaire avec le composant de formulaire Bootstrap et à tirer parti du système de grille pour aligner ces éléments. En outre, nous verrons les formes horizontales et en ligne en action, ainsi que discuter de la validation de formulaire.

Je me souviens encore de l'époque (pas si bonne) où nous devions coder manuellement tout le style des sites Web. Il y avait très peu de solutions CSS solides, et la création d'interfaces utilisateur complexes était très pénible. C'était comme un savoir arcanique que les développeurs partageaient entre eux: ils racontaient des histoires sur comment faire des cercles arrondis, comment mettre en évidence des éléments focalisés ou créer un fond dégradé … Je ne manque pas vraiment ces jours-ci. Heureusement, il existe de nombreuses nouvelles technologies qui nous aident à accélérer le processus de création d'applications Web. Une telle technologie est Bootstrap et aujourd'hui nous allons discuter de l'un de ses composants les plus utilisés: formes .

Il y a des tas de styles prédéfinis qui peuvent être appliqués aux formes, et en les utilisant, vous pouvez créer des interfaces utilisateur sophistiquées avec peu d'effort.

Mise en route

Si vous souhaitez suivre, créez le HTML standard suivant:

Nous chargeons les styles Bootstrap et certains scripts qui seront requis dans l'un des exemples. Ça y est …! Tout le balisage doit être placé à l'intérieur du bloc conteneur qui agit comme un élément principal pour notre page.

Nous pouvons passer à la section suivante et commencer à créer notre premier formulaire

Supposons que nous créons un formulaire d'inscription pour notre nouveau site web. Notre formulaire devrait fournir, au minimum, des champs pour une adresse e-mail et un mot de passe:


    
 Register

Nous allons maintenant styliser un peu ces champs. Tout d'abord, l'entrée et entrée doit être enveloppée dans un élément avec la classe de formulaire Bootstrap classe qui va ajouter une petite marge supérieure. En outre, nous affectons une classe contrôle de formulaire aux entrées pour les rendre plus agréables:

Notez que Bootstrap automatiquement redémarre éléments de formulaire que les nouveaux styles peuvent être appliqués facilement.

Pourquoi ne pas afficher également du texte d'aide sous le formulaire de courrier électronique pour informer les utilisateurs que nous n'utiliserons pas leurs données de manière malveillante? Dans Bootstrap 3, le texte d'aide est marqué avec la classe help-block mais la dernière version du framework utilise une classe appelée form-text . Placez-le juste sous l'entrée (à l'intérieur du groupe de forme ). En outre, rendons le texte plus subtil en appliquant la classe Bootstrap text-muted class:


  
   
   
     À des fins d'authentification uniquement. Nous ne partagerons jamais votre email avec qui que ce soit!
  

Notez comment nous avons ajouté l'attribut aria-describedby (point # 1) pour l'entrée afin d'expliquer que ce champ est décrit par notre bloc d'aide (# 2).

Pourquoi ne pas nous rendons également nos deux champs un peu plus grands pour souligner leur importance? Les entrées peuvent être facilement dimensionnées avec les classes form-control-lg et form-control-sm du composant de formulaire Bootstrap:


  
   
  
     fins d'authentification seulement. Nous ne partagerons jamais votre email avec qui que ce soit!
  

Voici le résultat:

Composant de base Bootstrap

Le formulaire semble très clair, et l'entrée actuellement sélectionnée obtient une belle bordure bleue. Cool!

Eléments de lecture de composants de formulaire Bootstrap

Supposons maintenant que nous souhaitons introduire plusieurs plans de prix pour nos utilisateurs, mais pour l'instant, seul un plan "de base" est disponible. Ajoutons une entrée en lecture seule du composant de formulaire Bootstrap en style texte brut . C'est aussi simple que d'assigner la classe form-control-plainxt :


  
   
  
     Basic est le seul plan à ce jour, mais nous le présenterons plus rapidement!
  

Voici le résultat:

classe form-control-plaintext pour le composant de forme Bootstrap

Autres types d'entrée pris en charge par le composant Bootstrap Form

Bootstrap supporte le style pour les entrées de tous types. Par exemple, nous pouvons opter pour une liste déroulante permettant aux utilisateurs de choisir leur rôle:

Encore une fois, nous emballons tout simplement dans un conteneur avec la classe Bootstrap composant classe de groupe et assignant la classe contrôle de forme à la liste déroulante.

Qu'en est-il de la zone de texte ? Nous suivons simplement le même principe:

Contrôle de téléchargement de fichier? Pas de problème non plus:

Cases à cocher? Facile! La seule chose à retenir est que les cases à cocher et les radios doivent être enveloppées dans un élément avec la classe form-check et non form-group . Cette classe ajoute un rembourrage supplémentaire pour rendre ces éléments plus beaux. En outre, nous affectons form-check-input (# 1) à la case à cocher et form-check-label (# 2) à l'étiquette afin qu'ils soient correctement alignés: [19659047] J'accepte Accord d'utilisation


Rechargons la page et observons le résultat:

Comment le composant de forme Bootstrap avec cases à cocher est rendu dans le navigateur

Vous cherchez plutôt une page qui n'a aucun style personnalisé.

Buttons

Ensuite, nous allons ajouter un bouton Submit et un bouton Back au bas du formulaire. Les boutons peuvent aussi être stylés avec Bootstrap: il existe une variété de couleurs tailles et états disponibles.

Fait intéressant, les classes prédéfinies ne fonctionnent pas uniquement avec les boutons. Par exemple, un lien peut agir comme un bouton et peut être stylé en tant que tel en utilisant les mêmes classes. À tout le moins, l'élément devrait être assigné une classe de btn :





  
   Retour

mt-3 définit une petite marge supérieure pour nos boutons . Le bouton Register! est évidemment l'étoile principale, donc nous allons le marquer comme primaire et le rendre plus grand. Le lien Back n'a pas besoin d'attirer toute l'attention, donc nous le styliserons comme un lien de bouton:


  
   Retour

Maintenant, le bouton principal se distingue visuellement grâce au fond bleu:

Bootstrap btn-primary et classes btn-link en action

Si vous n'aimez pas ce fond, le bouton peut également être nommé avec l'aide de btn-outline - * classes:

Bootstrap classes btn-outline

Input Groups

Une autre fonctionnalité intéressante de Bootstrap est input groupes . Disons que nous voulons permettre aux utilisateurs de choisir leur URL de profil unique ressemblant à http://SUBDOMAIN.PROFILE.example.com où:

  • SUBDOMAIN est soit mon. privé. ou propre.
  • PROFIL est défini par l'utilisateur.

Ainsi, l'URL pourrait être http: //my.superpage .example.com ou http://private.dashboard.example.com . Bien sûr, nous pouvons fournir une entrée de texte basique et dire quelque chose comme «Entrez votre nom de profil unique», mais l'utilisateur pourrait ne pas comprendre ce qui se passe. Au lieu de cela, nous voulons offrir un exemple visuel de la façon dont ce nom de profil va être utilisé.

Pour ce faire, nous fournirons une aide supplémentaire à la saisie de texte de la façon suivante:


  

  
       
    
       
       http: //  

      
      
       
         privé. 
         propre. 
      

    


    

    
       
       .example.com

Passons en revue le code ci-dessus pas à pas:

  • & num; 1. C'est ici que notre groupe d'entrée s'ouvre. Chaque groupe d'entrée contient une entrée et un ou plusieurs "add-ons" à placer avant ou après cette entrée.
  • & num; Nous ajoutons deux éléments à notre entrée de texte.
  • & num; Cela va afficher un add-on avec le texte http: // .
  • & num; Ici les choses deviennent un peu plus complexes. Nous affichons un bouton avec un texte "mon" (qui est notre sous-domaine). Lorsque ce bouton est cliqué, une liste déroulante s'affiche avec deux autres options: "private" et "own.". N'oubliez pas que la liste déroulante repose sur JavaScript, alors assurez-vous d'avoir connecté tous les scripts nécessaires, comme expliqué au début de cet article.
  • & num; C'est le menu déroulant réel, initialement caché. Il peut être plus loin dénommé expliqué par les docs .
  • & num; Ce div avec la classe de input-group-append représente le dernier ajout qui devrait être ajouté à la saisie de texte.

Ouf! En conséquence, nous avons réalisé l'interface utilisateur suivante:

Groupes d'entrée Bootstrap

Vous avez l'air plutôt sympa et, ce qui est plus important, nos utilisateurs comprendront immédiatement à quoi sert cette entrée!

Ceci termine la première section de cet article. Vous pouvez trouver le résultat final sur CodePen:

Voir le stylo Sitepoint Bootstrap 4 Simple Form par SitePoint ( @SitePoint ) sur CodePen .

Forms with Grid

Tout sur les lignes et les colonnes

Une autre tâche assez courante consiste à rendre les formulaires plus compacts en plaçant plusieurs entrées sur la même ligne. Cela peut être fait en utilisant le composant de forme Bootstrap form grid qui repose sur la grille générique de Bootstrap .

Pour placer plusieurs entrées et étiquettes sur la même ligne, nos groupes de formulaires devraient être enveloppé soit avec la ligne du composant de forme Bootstrap soit avec la ligne (la seule différence est que cette dernière classe ajoute des gouttières plus petites entre les colonnes). Ensuite, nous assignons la classe col- {viewport} - {columns} aux groupes eux-mêmes . Par exemple, c'est ainsi que nous pouvons modifier les trois premiers groupes à partir du formulaire d'inscription créé dans la section précédente:

 
  
 
    
    
    
       À des fins d'authentification uniquement. Nous ne partagerons jamais votre email avec qui que ce soit!
    
  

  

    
    
  


  

    
    
    
       Basic est le seul plan à ce jour, mais nous le présenterons bientôt!
    

Jetez un coup d'œil sur le résultat:

Première ligne du composant de formulaire Bootstrap avec des classes de grille

Pour les très petites fenêtres, ces groupes seront empilés les uns sur les autres. [19659003Nouspassonsensuiteauplandeprixetàl'URLduprofilCederniergroupenécessiteprobablementbeaucoupd'espacealorsutilisonsunpointd'arrêt md (fenêtre d'affichage moyenne) dans ce cas:

    
  
    
    
    
  


  
    
    
    

      

         http: // 
        
        

           privé. 
           propre. 
        

      

      
      

         .example.com

Notre deuxième rangée:

Deuxième rangée de Bootstrap composant de formulaire stylé en utilisant des classes de grille

Jusqu'ici, tout va bien. Ensuite, nous allons placer les commentaires textarea, contrôle de fichier photo et les deux cases à cocher sur la même ligne pour les fenêtres moyennes et grandes:

Notez que nous avons encapsulé les deux cases dans une colonne (# 4) pour une mise en page sympa.

Troisième ligne du composant de formulaire Bootstrap avec des classes de grille

Enfin, boutons. Je pense qu'ils peuvent occuper une seule colonne:


  
 
    
     Retour

Voici à quoi ressemble notre formulaire maintenant:

Composant de formulaire Bootstrap terminé avec des classes de grille

Voici le résultat final sur CodePen:

Voir le stylo Sitepoint Bootstrap 4 forme avec des lignes par SitePoint ( @SitePoint ) le CodePen .

Formes horizontales

Le système de grille peut également être utilisé pour créer des formes horizontales - c'est-à-dire des formes qui ont l'étiquette et les éléments d'entrée sur la même ligne. Pour atteindre ce résultat, le composant de formulaire Bootstrap propose la classe col-form-label à ajouter aux étiquettes.

Créons une petite démo représentant une forme horizontale:


  
 Register 


  

    
  
       
      
  
        
        
           A des fins d'authentification uniquement. Nous ne partagerons jamais votre email avec qui que ce soit!
        
      

    


    

      
      

      
      

    


    

      
 
        
         Retour

Les principales choses à noter ici sont:

  • & num; Chaque groupe de formulaire est affecté d'une classe
  • & num; 2. Les étiquettes reçoivent la classe col-form-label
  • & num; Les intrants (et les blocs d'aide qui les accompagnent) sont enveloppés dans div s
  • & num. Pour les boutons, nous fournissons en plus la classe offset-2 afin qu'ils soient déplacés vers la droite et alignés verticalement avec les entrées.

Voici à quoi ressemble le formulaire:

Bootstrap forme horizontale construite à l'aide des classes de la grille Bootstrap

Qu'en est-il des cases à cocher? Eh bien, nous pouvons également appliquer un certain décalage et les aligner verticalement avec les boutons et les entrées:

Et voici notre version finale du formulaire:

Formulaire horizontal Bootstrap terminé avec cases à cocher construites avec les classes de mailles Bootstrap

Tous les éléments ont un bon espacement, donc l'interface n'est pas encombrée. Le code source de cet exemple peut également être trouvé sur CodePen

Voir le stylo Sitepoint Bootstrap 4 Horizontal Form par SitePoint ( @SitePoint ) le CodePen

Formes en ligne

Les formes en ligne sont aussi très courantes de nos jours. De tels formulaires peuvent être utilisés pour afficher des fonctions de recherche ou de connexion. Voyons-les en action en créant un formulaire "S'abonner à la newsletter":


  
 S'inscrire à la newsletter

Ensuite, nous affichons simplement tous les champs nécessaires comme d'habitude:


  

    
     
  


  

    
     
  


  

    
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
   
 
Source link