[boostrap] Faire un formulaire en plusieurs colonne avec
nguyen0000
Messages postés
11
Date d'inscription
Statut
Membre
Dernière intervention
-
carabde Messages postés 60 Date d'inscription Statut Membre Dernière intervention -
carabde Messages postés 60 Date d'inscription Statut Membre Dernière intervention -
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 !
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:
- [boostrap] Faire un formulaire en plusieurs colonne avec
- Whatsapp formulaire opposition - Guide
- Déplacer colonne excel - Guide
- Trier colonne excel - Guide
- Formulaire de réclamation facebook - Guide
- Formule moyenne excel plusieurs colonnes - Guide
2 réponses
Bonjour
Je t'invite à relire la documentation de bootstrap :
https://getbootstrap.com/css/#grid
Exemple pour trois colonnes :
Les spans ne sont plus utilisés depuis la version 3 il me semble.
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.
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/
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/