Allineamento campi form

Paperino78

Utente Attivo
30 Giu 2012
409
0
16
Milano
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 fig01.png 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
HTML:
{                    
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 /';

HTML:
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao,
prova cosi:
PHP:
<?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

Nuovo Utente
19 Lug 2012
14
0
0
Venezia
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>

Codice:
#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;
}

HTML:
<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

Utente Attivo
30 Giu 2012
409
0
16
Milano
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.
HTML:
/*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
HTML:
	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

Nuovo Utente
19 Lug 2012
14
0
0
Venezia
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ì:

Codice:
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

Utente Attivo
30 Giu 2012
409
0
16
Milano
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.
 
Discussioni simili
Autore Titolo Forum Risposte Data
E Form con campi allineamento HTML e CSS 4
felino [Bootstrap] Allineamento verticale HTML e CSS 1
M [HTML] consiglio su label e checkbox riguardo l'allineamento HTML e CSS 3
E [HTML] Allineamento immagine agli angoli inferiori di un div HTML e CSS 12
C [HTML] Stampo contenuto di una variabile in TEXTAREA allineamento HTML e CSS 1
T Bootstrap: allineamento sotto il BADGE HTML e CSS 1
F [HTML] Allineamento in un TD HTML e CSS 2
C Report problema allineamento testo MS Access 0
N Griglia immagini allineamento "sfasato" HTML e CSS 3
R Bootstrap Carousel allineamento a sinistra impossibile! HTML e CSS 1
otto9due Allineamento tag <h1> e immagine.. HTML e CSS 2
Creatt Allineamento al centro con paragrafo allineato. HTML e CSS 9
E allineamento del testo in vari div HTML e CSS 1
I allineamento immagine WordPress 2
ivarello Allineamento e PHP PHP 3
Y problema allineamento form con internet explorer HTML e CSS 2
M Problemone con allineamento in tabella HTML e CSS 13
M Allineamento Testo html css, help HTML e CSS 1
V problema allineamento div HTML e CSS 1
J Problema allineamento in base al browser HTML e CSS 1
W Problema di allineamento al TOP HTML e CSS 2
G Allineamento tabella verticale PHP 3
A Wordpress: allineamento logo WordPress 6
B problema allineamento contenuti sito HTML e CSS 1
I allineamento HTML e CSS 5
S Problema Allineamento Sito HTML e CSS 3
N allineamento immagine e testo, padding larghezza e float HTML e CSS 2
Nyl Allineamento immagini con CSS HTML e CSS 1
N allineamento tag xml PHP 0
K Allineamento di un movieclip Flash 2
A Allineamento Layout [Front Page] Webdesign e Grafica 0
J Problemi allineamento tabella e testo HTML e CSS 7
R allineamento con publisher HTML e CSS 0
M Problema Doctype e allineamento HTML e CSS 0
M allineamento linx HTML e CSS 0
G Disposizione campi HTML e CSS 6
L Ripetere Campi disabilitando input in riferimento ad un valore della select jQuery 0
G Campi multivalore Database 0
M Memorizzare i dati nei campi prima dell'invio al db PHP 4
D Stampa a video solo campi compilati MySQL 1
M Form: come tornare ai campi già compilati dopo invio PHP 1
M Array associativi php su 2 campi mysql PHP 10
D popolare campi tra th alla select PHP 36
G VBA OpenForm con WhereCondition + LIKE su campi differenti MS Access 5
B Stringa sql per ricerca su più campi Database 1
F Leggere e aggiornare dati di campi <input text> su file di test PHP 0
M Compilazione automatica campi in input stessa pagina PHP 0
MarcoGrazia Gestire lista campi vuoti in fase di autenticazione jQuery 1
M Aggiornare simultaneamente i campi di due tabelle collegate con id PHP 4
L aggiornare 2 campi di una tabella insieme PHP 6

Discussioni simili