Form con campi allineamento

egalizia

Nuovo Utente
29 Ago 2015
14
0
0
Salve
sto provando ad aggiungere uno stile ad un form ma trovo parecchi problemi nell' allineamento dei cambi ( premetto che purtroppo sono alle prime armi nella programmazione web e nell' uso dei css ).
Ho preso spunto da un form con css preso in rete. Ho fatto un pò di modifiche al css senza molti risultati.
Una cosa strana è che quando ero riuscito ad ottenere un risultato grafico buono sul server dove ho le pagine andando a visualizzare le pagine da un client gli allineamenti sono tutti sballati e cambiano a seconda del programma che uso per vedre la pagina. Metto il codice che ho usato


Form
Codice:
<form method="post" action="inserito.php">

	<div id="form">
		<h1>Dati Utente </h1>
		<label for="Cognome">Cognome :</label><input type ="text" name="Cognome" id="Cognome" />
		<label for="Nome">Nome  </label><input type ="text" name="Nome" id="Nome" /> <br />
		<label for="Com_N">Luogo di Nascita :</label><input type ="text" name="Com_N" id="Com_N" />
		<label for="Data_N">Data di nascita :</label><input type ="text" name="Data_N" id="Data_N" /> <br />
		<label for="Com_R">Comune di Residenza :</label><input type ="text" name="Com_R" id="Com_R" />
		<label for="Via_R">Via :</label><input type ="text" name="Via_R" id="Via_R" /> <br />
		<label for="Civ_R">Civico : </label><input type ="text" name="Civ_R" id="Civ_R" />
		<label for="Int_R">Interno :</label><input type ="text" name="Int_R" id="Int_R" /> 
		<label for="Telefono">Telefono : </label><input type ="text" name="Telefono" id="Telefono" /> <br />
		<input type="submit" value="Invia" id="submit" name="submit"><input type="reset" value="Reimposta" id="reset" name="reset" >
	</div>

</form>

Css
Codice:
body {
	background-color: #000;
	color: #fff;
	font-family: Verdana, sans-serif;
	font-size: 14px
	}

#form {
	width: 90%;
	margin: 10px auto;
	background: #222;
	/* padding: 25px 0; */
	overflow: hidden;
	
	/* -moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px; */
	}
	
h1 {
	font-size: 16px;
	color: #FCCC69;
	margin-bottom: 20px; 
	text-align: center;
	}
	
label, input, textarea { /*Stili comunu agli elementi del form */
	color: #dedede; /* Colore del test */
	float: left; /* float a sinistra */
	font-family: Verdana, sans-serif; /* Tipo di carattere del testo */
	margin: 40px; /* Larghezza */
	}
	
label { /* Stili per le label */
	display: inline-block; /* impostiamo label come elemento bloccato */
	line-height: 10px; /* Altezza della riga */
	width: 20px; /* Larghezza */
	}
	
input, textarea { /*Stili per il campo testo e per la textarea */
	background: #1C1C1C; /* Colore sfondo */
	border: 1px solid #323232; /* bordo */
	color: #fff; /* colore testo */
	height: 20px; /* altezza */
	line-height: 20px; /* Altezza riga */
	width: 245px; /* Largezza */
	padding: 0 10px; /* Padding */
	}
	
input {
	 padding-left: 10px;
	
	}
	
textarea { /* Stili specifici per la textarea */
	background #1C1C1C; /* Sfondo si può mettere anche immagine aggiungendo url('percorso immagine') no-repeat 235px 95px */
	font-size: 12px;
	height: 200px;
	width: 320px;
	overflow: hidden; /* disabilita la scrollbar in IE */}
	

#submit {
	padding: 0;
	width: 100px;
	}
	
#reset {
	padding: 0;
	width: 100px;
	}
	
#Com_N {
	padding: 0;
	width:245px;
	padding-left: 10px;
	}

#Data_N	{
	padding: 0;
	width:135px;
	padding-left: 10px;
	}
	
#Com_R {
	padding: 0;
	width:245px;
	padding-left: 10px;
	}
	
#Civ_R {
	padding: 0;
	width:40px;
	padding-left: 10px;
	}
	
#Int_R {
	padding: 0;
	width:40px;
	padding-left: 10px;
	}
	
br {
	clear: left;
	}
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.389
338
83
Per capire sarebbe meglio che ci facessi vedere la pagina online, perchè così premesso che non ci hai detto il tipo di allineamento che vuoi e neanche il difetto che trovi, ci costringi a copiare il codice e assemblarlo per poter vedere come funziona sempre che tu abbia postato tutto cio che serve.
 

egalizia

Nuovo Utente
29 Ago 2015
14
0
0
Ok non avevo pensato a farvi vedere un layout ora ti allego 2 immagini mi ci sono picchiato un pò modificando il css aggiongendo dei br con clear: left;

firefox.png


ie.png

prima immagine con firefox e risutla centrata nella pagina mentre la seconda con IE rimane tutta a sx i campi direi che ora sono apposto come incolonnamento ma se riuscissi a sistemarli senza usare il br per tabularli sarebbe meglio.

Il problema fondamentale che cambia la visone a seconda del browser che uso e alla risoluzione che viene usata sul pc client. Anche interlinea è un pò ecessiva ....


PS

Altra cosa strana su IE bordi squadrati su firefox arrotondati
 
Ultima modifica:

egalizia

Nuovo Utente
29 Ago 2015
14
0
0
dovrò aggiungere altri campi come posso fdare per ridurre gli spazi tra label e textarea input..... e abbassare interlinea?
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
Perchè secondo te la maggior parte delle form che si trovano su qualsiasi sito web sono posizionate verticalmente?

Nome:
Text area

Cognome:
Text area

Luogo di nascita:
Text area

Data di nascita:
Text area

Comune di residenza:
Text area

.....

Perchè si gestisce meglio la formattazione dagli schermi più grandi a quelli mobile, altrimenti per farla come la tua e visualizzarla correttamente a tutte le risoluzioni devi usare come minimo le media queries in CSS per gestire i vari range di risoluzioni orizzontali (width) dei display: fino a 640 - da 640 a 800 - da 800 in su.
 
Discussioni simili
Autore Titolo Forum Risposte Data
Domenico_Falco1 [Javascript] [HTML] Campi form con sfondo imposto dal browser Javascript 5
A [HTML] form con campi dinamici. HTML e CSS 1
M Form multipagina con campi già compilati se presenti PHP 5
M Form con campi autocomplete Javascript 1
xone Form con campi input text e upload file PHP 4
S Form con campi obbligatori PHP 41
alessandro1997 Form con campi multipli in PHP PHP 5
M Interazione tra un più campi di un form con un solo campo di database - query mysql PHP 2
P form con campi dinamici! Javascript 2
Z Banale invio dati da form con due campi e submit PHP 3
G FORM con campi dinamici PHP 1
Z [Aiuto] Form con 2 campi collegati Javascript 0
M Problema con controllo form in real time jQuery 6
M form con checkbox PHP 8
F query e form con select multipla PHP 17
W Rinominare Documenti Con Form Asp Classic ASP 9
S [PHP] Recupero nome immagine da Form con input file PHP 3
C [PHP] Form con Inserimento dati dalla maschera e un menù a discesa che prende i dati dal db PHP 1
E Form inserimento dati con JavaScript Javascript 0
I [PHP] inviare form con allegato tramite una mail PHP 1
P PHP - Leggere una pagina passata con Form e Captcha PHP 0
M [HTML] form con multipli input type image HTML e CSS 1
alessandra86 [PHP] Popolamento database con form ricorsivi - problema array (foreach ) PHP 5
U [PHP] Form stessa pagina con qualche complicazione PHP 0
S [PHP] form con metodo get e recupero id PHP 4
michela90 [PHP] Refresh page on submit - Form con Swiftmailer PHP 14
Emix Problema con creazione form css/mobile HTML e CSS 3
G [PHP] FORM INVIO VALORI A QUERY CON TRE CONDIZIONI PHP 2
L Scelta form con jquery jQuery 1
F [PHP] Validare form prenotazione appuntamento tattoo con upload image PHP 0
S Html con form e action .php PHP 6
bubino8 [PHP] Auto Submit form con dati PHP 7
W Consiglio su gestione di un form con XMLHttpRequest Ajax 0
Matteo Lorenzon [PHP][WORDPRESS] Form in Wordpress, creazione PDF con dati del form ed invio tramite email WordPress 1
T [Javascript] un form con select dinamica che funzioni da menù... Javascript 2
zammaeng [PHP] Problema form con lista PHP 8
B INSERIRE DATI CON IMMAGINE DA FORM IN MYSQL MySQL 7
V [PHP] Form con elenco a tendina con dati DB PHP 20
asevenx [PHP] form con select che non invia dati se con apostrofo PHP 4
SimooRu [PHP] Non riesco a far passare i dati con i form PHP 4
S [PHP] Form iscrizione senza DB con comandi deprecated PHP 10
Fuego2806 Stampare dati Form su immagine di sfondo con html HTML e CSS 1
Fuego2806 [PHP] Stampare dati Form su immagine di sfondo con html PHP 70
C [PHP] Upload immagine in un form con target _blank: non funziona PHP 7
G validazione form con div tipo alert jQuery 0
M form php con checkbox PHP 4
D form php con chapta PHP 1
I Form/aree di testo con input da lista di nomi!Chiedo aiuto!! HTML e CSS 3
P invio mail da form con dati php PHP 7
P PHP mailer invio form con 2 allegati. PHP 3

Discussioni simili