Débutant : form en html

Résolu
bat2408 Messages postés 329 Date d'inscription   Statut Membre Dernière intervention   -  
bat2408 Messages postés 329 Date d'inscription   Statut Membre Dernière intervention   -
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!

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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>
0
Réponse 2 / 2
bat2408 Messages postés 329 Date d'inscription   Statut Membre Dernière intervention   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!
0
bat2408 Messages postés 329 Date d'inscription   Statut Membre Dernière intervention   88
 
J'ai finalement réussi, en mettant un tableau dans mon tableau, merci!
0

Discussions similaires

Toutes la doc sur sap
katuicia -
bedda -

22 réponses
FORMATION SAP DEBUTANT
zara93 -
ddpois -

7 réponses
formation pratique sap
patricia -
na3im05 -

49 réponses
OU TELECHARGER SAP
aurely51 -
sapeasy -

6 réponses
Comment faire pour devenir consultant SAP: FI/CO
pegson -
Hour -

4 réponses