Allineamento campi form

[Paperino78]

Buongiorno, ho questo problema. Ho inserito in una pagina di contatti un form normalissimo ma che purtroppo non riesco ad allineare correttamente. Vorrei avere un form uguale a questo ma quando vado a cerare il modello sia in (x)html sia in css i campi vanno dove vogliono loro. Vi allego markup e css. Sapreste darmi una mano? Sono 4 giorni che cerco di capire il problema ma non ne vengo a capo. Il codice html è all'interno della pagina in php ecco perchè la voce echo

{                    
echo'		<br><form method="post" name="form" id="form" action="processor.php"><br />';
echo'		<br><label for="name">Nome<label><input name="name" type="text" class="testo_nome" value="" /><br />';
echo'		<br><label for="azienda">Azienda<label><input name="azienda" type="text" value="" /><br />';
echo'		<br><label for="mail">E-Mail</label><input name="mail" type="text" value="" /><br />';
echo'		<br><label for="messagge">Messaggio</label><textarea name="messagge" cols="50" rows="10" type="text" class="testo_messaggio" value=""></textarea><br />';
echo'		<br><label for="button"></label><input type="submit" name="button" id="fbutton" value="Invia" onclick="return thisform(this.form)"/><br />';
echo'		<br></form><br /';

input,label,textarea {	float:left;}


#form {	width:90%;
		background-color:#CCCCCC;}

#form label {	text-align:left;
				padding: 10px 0;
				font: 1.1 em bold Verdana, Geneva, sans-serif;
				}

 

[criric]

Ciao,
prova cosi:

<?php
echo'<form method="post" name="form" id="form" action="processor.php"><br />';
echo'<label for="name">Nome</label><input name="name" type="text" class="testo_nome" value="" /><br />';
echo'<label for="azienda">Azienda</label><input name="azienda" type="text" value="" /><br />';
echo'<label for="mail">E-Mail</label><input name="mail" type="text" value="" /><br />';
echo'<label for="messagge">Messaggio</label><textarea name="messagge" cols="50" rows="10" type="text" class="testo_messaggio" value=""></textarea><br />';
echo'<label for="button"></label><input type="submit" name="button" id="fbutton" value="Invia" onclick="return thisform(this.form)"/><br />';
echo'</form><br />';
?>

<style>
    #form {	
        width:90%;
        background-color:#CCCCCC;
    }
    #form input {
        
    }
    #form label {
        display: inline-block;
        text-align:left;
        width:100px;
        padding: 10px 0;
    }
</style>

Fai attenzione ch enell'html non chiudi sempre il </label>

 

[Nipponina]

Se non ho capito male vorresti che label e input fossero sulla stessa linea. Seguendo l'immagine ho provato a fare qualcosa di simile non so se va bene ti lascio il codice se hai tempo fai una prova. Attenzione alla chiusura del tag <label>

#form {
background:#ccc;
width:500px;
margin:20px auto;
}
label{
width: 100px;
margin-left:20px;
clear:left;
display:block;
float:left;
}
input, textarea{
width: 300px;
float:left;
margin-bottom:10px;
}
input#fbutton{
width: 100px;
}

<form method="post" name="form" id="form" action="processor.php">
<label for="name">Nome</label><input name="name" type="text" class="testo_nome" value="" />
<label for="azienda">Azienda</label><input name="azienda" type="text" value="" />
<label for="mail">E-Mail</label><input name="mail" type="text" value="" />
<label for="messagge">Messaggio</label><textarea name="messagge" cols="50" rows="10" type="text" class="testo_messaggio" value=""></textarea>
<label for="button"></label><input type="submit" name="button" id="fbutton" value="Invia" onclick="return thisform(this.form)"/>
</form>

 

[Paperino78]

Ragazzi tra mille prove e test ho risolto il problema, era probabilmente un problema di un DIV che conteneva il form. Allego per chi fosse interessato il codice corretto.

/*Inizio Form*/

input[name=name]     { background: #1C1C1C url(../Immagini/user_red.png) no-repeat 7px; }

input[name=mail] {	background:#1C1C1C url(../Immagini/email.png) no-repeat 7px;}
input[name=azienda] {	background:#1C1C1C url(../Immagini/user_red.png) no-repeat 7px;}
input[name=button] {	background: #1C1C1C url(../Immagini/submit.png) no-repeat 7px;}

label, input, textarea {	color:#dedede;
							margin 10px 0;
							margin-top: 15px;
							vertical-align:top;}

input {	background: #1C1C1C;
		border: 1px solid #323232;
		color: #fff;
		height: 30px;
		line-height: 30px;
		width: 300px;
		padding: 0 10px;
		}
		
input {	padding-left: 30px;}		
		
textarea {	background: #1C1C1C;
			border: 1px solid #323232;
			color: #fff;
			height: 200px;
			margin-top: 20px;
			line-height: 30px;
			width: 320px;
			padding: 0 10px;
			background: #1C1C1C url(../Immagini/social_balloon.png) no-repeat 235px 95px;
			font-size: 12px;
			overflow: hidden;}		

#form input {}
 
#form label { 	display: inline-block; 
				text-align:left; 
				width:150px;

				padding: 10px 0; 
					} 

#form {	width:90%;
		max-width: 600px;
		background:#222;
		margin:0 auto;
/*		background-color:#CCCCCC;*/}

input[type=submit] {background: url(../Immagini/submit.png) no-repeat center;
					border: none;
					color: #fff;
					font-weight: bold;
					padding: 0;
					height: 30px;
					width: 80px;
					clear: both;
				}

#fbutton {	width: 100px;
			cursor:pointer;
			margin-top: 20px;}
			
input, textarea {
    -webkit-transition: width 1s ease, height 1s ease;
    -moz-transition: width 1s ease, height 1s ease;
    -o-transition: width 1s ease, height 1s ease;
    -ms-transition: width 1s ease, height 1s ease;
    transition: width 1s ease, height 1s ease;
}
 
input[type=text]:focus { 	width: 390px;
							margin: 5px 5px 5px 0;
							height: 50px; }
textarea:focus {	width: 400px; 
					height: 330px;}

input:disabled { background: #3f3f3f; }
			
			
/*Fine Form*/

E qui il markup

	function form() {                    
echo'		<form method="post" name="form" id="form" action="processor.php"><br />';
echo'		<label for="name">Nome</label><input name="name" type="text" class="testo_nome" value="" /><br />';
echo'		<label for="azienda">Azienda</label><input name="azienda" type="text" value="" /><br />';
echo'		<label for="mail">E-Mail</label><input name="mail" type="text" value="" /><br />';
echo'		<label for="messagge">Messaggio</label><textarea name="messagge" cols="50" rows="10" type="text" class="testo_messaggio" value=""></textarea><br />';
echo'		<label for="button"></label><input type="submit" name="button" id="fbutton" value="Invia" onclick="return thisform(this.form)"/><br />';
echo'		</form><br /';
}

Grazie ancora.

P.S. sapete dirmi come fare per far si che un'immagine fissa in basso a dx nell'area messaggio rimanga fissa nella parte bassa dx quando ci clicco? L'area si allarga al momento in cui clicco dentro. E restando fissa dove si trova mi rimane al centro dell'area messaggio.

 

[Nipponina]

L'immagine sarebbe il background social_balloon della textarea? Se ho capito bene basterebbe usare il posizionamento background in percentuale non in pixel

prova così:

textarea {	
background: #1C1C1C;
border: 1px solid #323232;
color: #fff;
height: 200px;
margin-top: 20px;
line-height: 30px;
width: 320px;
padding: 0 10px;
background: #1C1C1C url(../Immagini/social_balloon.png) no-repeat 99% 99%;
font-size: 12px;
overflow: hidden;
}

 

[Paperino78]

Nipponina, ti devo un caffè. Grazie mille!!! :byebye::quote::quote::quote::beer: Sono senza parole.
Quando sei dalle mie parti hai un caffè pagato.

Grazie.

 

[Nipponina]

Di niente felice di essere d'aiuto. Buon lavoro.

 

[ottimista]

Ciao, mi potresti mandare il link di dove hai trovato quell'esempio del form??