Débutant : form en html

Résolu

bat2408 Messages postés 385 Statut Membre -
bat2408 Messages postés 385 Statut Membre - 26 avr. 2016 à 00:14

Bonjour à tous, j'ai un problème sûrement basique mais je n'arrive pas à m'en sortir.
Voilà j'ai un tableau dans lequel je met un formulaire, qui doit être en 2 colonnes, comme par exemple ceci :

https://prnt.sc/awcf7f

Le problème, c'est qu'il passe une ligne à chaque fois. J'ai donc défini label1 et label2 pour le placer soit à gauche soit à droite, mais la case input ne bouge pas. Je vous joint mon code, il y a probablement beaucoup à revoir :(

Le CSS :

label1
{
	display: block;
	width: 8%;
	float: left;
}

label2
{
	display: block;
	width: 8%;
	float: right;
}

<table>
		<thead>
		  <tr>
		    <th class="titretab2">Adresse de facturation</th>
		    <th class="titretab2"></th>
		  </tr>
		</thead>	
			
	        <tbody> 
		 <td>
			<form method="post" action="traitement.php">
			<p>
			<label1 for="civilite">Civilité : *</label1>
			<select class="infos" name="civilite" id="civilite">
			<option value="monsieur">Monsieur</option>
			<option value="madame">Madame</option>
			</select>
		        </p>
			</form>
						
			<form method="post" action="traitement.php">
			<p>
			<label1 for="nom">Nom: <span style="color: red"> * </span></label1><input type="text" id="nom" />
			</p>
			</form>
						
			<form method="post" action="traitement.php">
			<p>
		        <label2 for="prenom">Prenom: <span style="color: red"> * </span></label2><input type="text" id="prenom" />
			</p>
			</form>
						
			<form method="post" action="traitement.php">
		        <p>
			<label1 for="adresse">Adresse : *</label1><br />
			<textarea name="adresse" id="adresse" rows="3" cols="3"></textarea><br />
			</p>
			</form><br />
						
			<form method="post" action="traitement.php">
			<p>
			<label1 for="email">Email : *</label1><input type="text" id="email" /><br />
			<p class="msgmail">Un email valide est indispensable car la réception des billets se fait par mail.
					
			</td>
			</tbody>
		</table>

Merci d'avance!

Afficher la suite

2 réponses

jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832

Bonjour,

Oula.....
Qu'est-ce que c'est que ces : <label1 .... <label2 ...

Modifie ton code ainsi :


label{
	display: block;
	width: 8%;
	}

label .label1{
  float: left;
}

label .label2{
  float: right;
}

et pour tes labels :

<label class="label1" for="civilite">Civilité : *</label>

<code html>
 <label  class="label2" for="prenom">
     Prenom: <span style="color: red"> * </span>
 </label>

bat2408 Messages postés 385 Statut Membre 88

Merci pour la réponse. J'ai changé pas mal de choses, mais toujours impossible d'aligner proprement mon formulaire, je n'arrive pas à mettre mes input alignés avec (par exemple) "Nom :", ni à les décaler plus loin...

Voilà mon code de formulaire :

<table>
	<thead>
		<tr>
		<th class="titretab2">Adresse de facturation</th>
		</tr>
	</thead>	
			
	<tbody> 
		<td>
		<form method="post" action="traitement.php">
		<span class="gauche">
		<label for="civilite">Civilité : *</label>
		<select class="cadregauche" name="civilite" id="civilite">
	        <option value="monsieur">Monsieur</option>
		<option value="madame">Madame</option>
		</select>
		</span><br><br>
						
						
		<span class="gauche">
		<label for="nom">Nom : <span style="color: red"> * </span></label>
		<input class="cadregauche"  type="text" id="nom" />
		</span>		
		<span class="droite">
		<label for="prenom" >Prenom : <span style="color: red"> * </span></label>
		<input type="text" id="prenom" /> 
				
		</span><br><br>
						
		<span class="gauche">
		<label for="adresse">Adresse : *</label>
		<input class="cadregauche"  type="text" id="adresse1" />
								
		</span>
					
		<span class="droite">
		<label for="cpostal">Code postal : *</label>
		<input type="text" id="cpostal" />
								
		</span><br><br>
						
		<span class="gauche">
		<label for="adresse2"></label>
		<input class="cadregauche"  type="text" id="adresse2" />
								
		</span>
						
		<span class="droite">
		<label for="ville">Ville : *</label>
		<input type="text" id="ville" />
								
		</span><br><br>
						
		<span class="gauche">
						
		<label for="email1">Email : *</label>
		<input class="cadregauche" type="text" id="email1" />
								
		</span>
						
		<span class="droite">
		<label for="email2">Confirmer votre email : *</label>
		<input type="text" id="email2" />
								
		</span><br><br>
						
						
		<span class="msgmail">
		<p>Un email valide est indispensable car la réception des billets se fait par mail.</p>
						
		</span>
		<p class="msgbp">
		<input type="checkbox" name="bonplan" id="bonplan" /> <label for="bonplan">Cochez la case pour être informé des bons plans du salon</label>
		</p>
		</form>	
	        </td>
	</tbody>
</table>

table
{
    border-collapse: collapse;
	width: 75%;
	margin : 1% auto auto auto;
}

td, th 
{
    border: 1px solid black;
	padding: 0.5%;
	text-align:center;
}

p
{
	text-align:left;
}

.gauche{
	display:block;
	float:left;
	text-align:left;
}	

.droite{
	display:block;
	float:right;
}

.cadregauche{
	display:block;
	margin-left:20%;
}

J'aimerais arriver à ça en fait : https://prnt.sc/awrm5m

Je ne comprend pas pourquoi peu importe ce que je met dans .cadregauche il va me placer le input SOUS le texte...

Un grand merci d'avance!

bat2408 Messages postés 385 Statut Membre 88

J'ai finalement réussi, en mettant un tableau dans mon tableau, merci!
0

Débutant : form en html

2 réponses

Discussions similaires

Newsletters