Formulaire - Input & Label

Bonjour,

Je souhaite faire un formulaire sur mon site permettant de rentrer des données sur des factures. Cependant après plusieurs heures de recherche, je n'arrive pas a placer mes inputs comme je le souhaite.
J'utilise bootstrap et le résultat est acutellement celui ci: http://puu.sh/7F5II.png

Voici le code que j'utilise sur la page:

<div class="container" id="formulaire">
		
		    <div class="row">Période d'engagement : <br/><br/></div>

		      	<div class="row">
					<div class="col-lg-3">
			        	<p class="span6">
			        		<label for='mois'>Mois (2 chiffres) : </label>
							<input id='mois' name='fMois' type='text' required autofocus> 
						</p>

					</div>
			        <div class="col-lg-3">
			    		<p class="span6">
			    			<label for='annee'>Année (4 chiffres) : </label> 
							<input id='annee' name='fAnnee' type='text' required> 
						</p>
				</div>
		    </div><br/><br/>
		        
		     <div class="row">Frais au forfait : <br/></div>
		      <div class="row">
		      	 	      	
		        <div class="col-lg-3">
		        	<p class="span3">
		        		<label for='repas'>Repas midi :</label>
						<input id='repas' name='fRepas' type='text' required > 
					</p>
		   		</div>

		        <div class="col-lg-3">
			        <p class="span3">
			        	<label for='nuitees'>Nuitées :</label>
						<input id='nuitees' name='fNuitees' type='text' required> 
					</p>
			  	</div>

		        <div class="col-lg-3">
		        	<p class="span3">
		        		<label for='etape'>Etape :</label>
						<input id='etape' name='fEtape' type='text' required> 
					</p>
				</div>

		        <div class="col-lg-3">
		        	<p class="span3">
		        		<label for='km'>Km :</label>
						<input id='km' name='fKm' type='text' required> 
					</p>
		        </div>

		      </div><br/><br/>
		    
                      <div class="row">Hors forfait : <br/></div>
		      <div class="row">
		      	
		        <div class="col-lg-3">
		        	<p class="span3">
		        		<label for='date'> Date : </label>
						<input id='date' name='fDate' type='text' required> 
					</p>
				</div>

		        <div class="col-lg-3">
		        	<p class="span3">
		        		<label for='libelle'> Libellé : </label>
						<input id='libelle' name='fLibelle' type='text' required>
					</p>
				</div>

		        <div class="col-lg-3">
		        	<p class="span3">
		        		<label for='quantité'> Quantité : </label>
						<input id='quantité' name='fQuantite' type='text' required> 
					</p>
				</div>

		      </div><br/><br/>

<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus-sign"></span> Effacer </button>
		<button type="button" class="btn btn-success"><span class="glyphicon glyphicon-ok-sign"></span> Valider </button>
					
	</div>

Je n'ai jamais posté içi et je débute dans le domaine de la programmation, merci de votre aide

Et c'est comment, "comme tu le souhaite" ?

Sur la doc de bootstrap, ils détaillent très précisement les différent possibilité de mise en page des forms, il te suffit juste de reprendre la syntaxe proposé pour avoir le bon résultat.

Si par contre tu decide d'avoir un autre style personnalisé la c'est autre chose.
Et en passant enlève moi ce comic sans MS
Modifié par thej8 (22 Mar 2014 - 17:28)

Bah, je veux juste inverser les labels et les inputs, c'est à dire mettre les labels a gauche des inputs sauf que quand j'arrive a les mettre dans le bon sens, les inputs ne sont plus alignés.
J'enlève le comic sans ms pour toi

Ah c'est bon, je viens de trouver grâce a ton lien, il suffisait que je me mette "form inline" pour que ce soit aligner comme je le veux. Merci pour ton aide

De rien et regarde ca, ca te fera surement sourire.

Pas mal