Sujet Précédent Sujet Suivant

[boostrap] Faire un formulaire en plusieurs colonne avec

Fermé
nguyen0000 Messages postés 11 Date d'inscription mercredi 30 mars 2016 Statut Membre Dernière intervention 7 décembre 2016 - Modifié par nguyen0000 le 26/04/2016 à 15:39
carabde Messages postés 60 Date d'inscription mercredi 8 juillet 2009 Statut Membre Dernière intervention 30 décembre 2021 - 30 mai 2016 à 12:09
Bonjour,

Je voudrais faire un formulaire en 3 colonnes avec boostrap :
-Informations principales
-Coordonnées de contact
-Coordonnées bancaires

C'est pour avoir une page html en largeur. Apres plusieurs tentative avec la classe row et span je n'arrive toujours pas à changer la disposition de mon formulaire.

Vous trouverez ci dessous mon code, je suis encore débutant donc je vous prie de faire simple.
Merci ! 


<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <link rel="stylesheet" href="css.css">
        <title>Creation d'un Entite</title>
        
    </head>
     <?php
            include("BoutonsMenuAdmin.php");
   
        ?>
    <body>
        <div class="container">
                <div class="panel panel-custom">
                    
                    <div class="panel-heading">Création d'une entité</div>
                    
                    <form class="form-horizontal" Method="POST" Action="TraitementEntite.php" >
                        <div class="row">
                            <div class="span4">
                                 <div class="col-xs-12">
                                    <legend>Informations Principales</legend>
                                 </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">Nom:</label>
                                    <div class="col-sm-4">
                                        <input class="form-control" type="text" name="Nom"/>
                                    </div>     
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">Structure Juridique :</label>
                                    <div class="col-sm-4">
                                        <input class="form-control" type="text" name="Structure"/>
                                    </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">Client Secteur : </label>
                                    <div class="col-sm-4">
                                        <input class="form-control" type="text" name="ClientSecteur"/>
                                    </div>
                            </div>

                             <div class="form-group">
                                <label class="col-sm-2 control-label">Date du Debut de l'Exercice :</label>
                                    <div class="col-sm-4">
                                        <input class="form-control" type="date" name="DateDebut" />
                                    </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">Date du Fin  de l'Exercice:</label>
                                    <div class="col-sm-4">
                                        <input class="form-control" type="date" name="DateFin" />
                                    </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">Statut :</label>
                                    <div class="col-sm-4">
                                        <SELECT class="form-control" name="Statut">
                                            <OPTION value="Admin">Admin
                                            <OPTION value="Membre">Membre
                                        </SELECT>
                                    </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">Type d'entite :</label>
                                    <div class="col-sm-4">
                                        <SELECT class="form-control" name="Type">
                                            <OPTION value="Client">Admin
                                            <OPTION value="Membre">Membre
                                            <OPTION value="Sous-traitant">Sous-traitant
                                        </SELECT>
                                    </div>    
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">NAF/APE :</label>
                                    <div class="col-sm-4">
                                        <input class="form-control" type="text" name="NAF/APE" />
                                    </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">TVA intra :</label>
                                    <div class="col-sm-4">
                                        <input class="form-control" type="text" name="TVA" />
                                    </div>
                            </div>
                            </div>
                        </div>


                        <div class="row">
                            <div class="span4">
                                 <div class="col-xs-12">
                                    <legend>Coordonnées de contact</legend>
                                 </div>
                            

                            <div class="form-group">
                                <label class="col-sm-2 control-label">Adresse :</label>
                                    <div class="col-sm-4">
                                        <input class="form-control" type="text" name="Adresse" />
                                    </div>
                            </div>


                            <div class="form-group">
                                <label class="col-sm-2 control-label">CodePostal :</label>
                                    <div class="col-sm-4">
                                        <input class="form-control" type="text" name="CodePostal" pattern="[0-9]{4}"/>
                                    </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">Ville :</label>
                                    <div class="col-sm-4">
                                        <input class="form-control" type="text" name="Ville" />
                                    </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">Pays :</label>
                                    <div class="col-sm-4">   
                                        <input class="form-control" type="text" name="Pays" />
                                    </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">Contact :</label>
                                    <div class="col-sm-4">
                                        <input class="form-control" type="text" name="Contact" />
                                    </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">Numero de Telephone :</label>
                                    <div class="col-sm-4">
                                        <input class="form-control" type="text" name="Telephone" />
                                    </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">Email :</label>
                                    <div class="col-sm-4">
                                        <input class="form-control" type="email" name="Mail" />
                                    </div>
                            </div>
                            

                            <div class="form-group">
                                <label class="col-sm-2 control-label">Numero de Siret :</label>
                                    <div class="col-sm-4">
                                        <input class="form-control" type="text" name="Siret" />
                                    </div>
                            </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="span4">
                               
                                 <div class="col-xs-12">
                                    <legend>Coordonnées Bancaires</legend>
                                 </div>
                            

                            <div class="form-group">
                                <label class="col-sm-2 control-label">Iban :</label>
                                    <div class="col-sm-4">
                                        <input class="form-control" type="text" name="Iban"  pattern="^FR\d{12}[0-9A-Z]{11}\d{2}$" />
                                    </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">RIB :</label>
                                    <div class="col-sm-4">
                                        <input class="form-control" type="text" name="RIB" />
                                    </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">BIC :</label>
                                    <div class="col-sm-4">
                                        <input class="form-control" type="text" name="BIC" pattern="^([a-zA-Z]){6}([0-9a-zA-Z]){2}([0-9a-zA-Z]{3})?$" />
                                    </div>
                            </div>

                            

                            <div class="form-group">
                                <label class="col-sm-2 control-label">Adresse de l'Agence Bancaire :</label>
                                    <div class="col-sm-4">
                                        <input class="form-control" type="text" name="AdresseBancaire" />
                                    </div>
                            </div> 
                        </div>
                        

                        

                        

                       

                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-4">
                                <input class="btn btn-primary" type="submit" name="Enregistrer" value="Enregistrer">   
                            </div>
                        </div>

                    </FORM>
                </div>
        </div>
    
    </body>
</html>


A voir également:

2 réponses

Réponse 1 / 2
mchev Messages postés 222 Date d'inscription dimanche 25 mars 2007 Statut Membre Dernière intervention 6 août 2016 44
29 mai 2016 à 14:35
Bonjour

Je t'invite à relire la documentation de bootstrap :
https://getbootstrap.com/css/#grid

Exemple pour trois colonnes : 
<div class="row">
  <div class="col-md-4">Colonne 1</div>
  <div class="col-md-4">Colonne 2</div>
  <div class="col-md-4">Colonne 3</div>
</div>


Les spans ne sont plus utilisés depuis la version 3 il me semble.
0
Réponse 2 / 2
carabde Messages postés 60 Date d'inscription mercredi 8 juillet 2009 Statut Membre Dernière intervention 30 décembre 2021 30
30 mai 2016 à 12:09
Bonjour,
Voici un exemple pour formulaire en trois colonnes:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form action="">
<div class="row">
<div class="col-sm-4">
RIB : <input class="form-control" type="text" name="RIB" />
</div>
<div class="col-sm-4">
Nom : <input class="form-control" type="text" name="nom" />
</div>
<div class="col-sm-4">
Age : <input class="form-control" type="text" name="age" />
</div>
</div>
</form>
</div>
</body>
</html>

En effet les span ne sont plus utilisés, ET voici le lien pour un tuto pour l'utilisation de bootstrap:

http://www.oujood.com/bootstrap/
0

Discussions similaires

Compte HOTMAIL bloqué . Que faire ?
HAPOKA -
Charliemouse1922 -

27 réponses
je veut créer des codes
jonkiller -
Nhhi -

20 réponses
colonne A disparue tableur excel
reno78840 -
Anst20 -

4 réponses
Formule magique excel??????
sexy_miss -
Raymond PENTIER -

13 réponses
liste de noms par ordre alphabétique
alma -
alma13 -

23 réponses