Come allineare i campi dei form?

**D4rkAng3l** · 11-01-2008, 20:38

Ciao,
se andate sulla sezione dei contatti delmio sito probabilmente capirete: http://www.siatec.net/andrea/fotografia/contact.html

Se vedete i campi dove si inserisce nome, mail e oggetto non sono allineati ed è un po' antiestetico...come posso risolvere?

Il codice HTML è:

codice:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<title>Andrea Nobili Fotografo</title>
<meta name="title" content="Andrea Nobili Fotografo" />
<meta name="description" content="Fotografo di Roma. Appassionato di fotografia naturalistica e subacquea. Studente di informatica e webmaster. Realizzazione siti web accessibili e portali web" />
<meta name="keywords" content="Fotografia, fotografia subacquea, fotografia naturalistica, fotografia notturna, fotografia architettura, webmaster, informatica, realizzazione siti web, portali web, portali php, database" />
<meta name="robots" content="index, follow" />
<meta name="author" content="Andrea Nobili" />
<meta name="generator" content="Hand Coded" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="default01f.css" rel="stylesheet" type="text/css" title="default" />

</head>

<body>

    <div id="container">
    <div id="contieni_bordo">

	<div id="header">
	
	</div>

	<div id="menu">
			<ul>
			[*]Home
			[*]About Me
			[*]Portfolio
			[*]Contact
			[*]Links
			[/list]
	</div>

<div id="content">
	<h1>Andrea Nobili Fotografo e WebMaster</h1>

	<h2>1.Contatti:</h2>
	
    <form method="get" action="send.php">
    

Tuo nome e cognome: <input type="text" name="nomemittente" class="form" /></p>
    

La tua e-mail: <input type="text" name="emailmittente" class="form" /></p>
    

Oggetto: <input type="text" name="oggetto" class="form" />
    

Messaggio:</p>
    

<textarea name="corpomesaggio" rows="7" cols="70" class="form"></textarea></p>
    

<input type="submit" value="Invia" class="pulsante"> <input type="reset" value="cancella" class="pulsante"/>
    </p>
    </form>

</div>

<div id="footer">This Page Is Valid XHTML 1.0 Transitional and Valid CSS v.2
<script type="text/javascript" src="http://www.siatec.net/andrea/stats/php-stats.js.php"></script>
<noscript></img></noscript></div>
</div>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-2949351-1";
urchinTracker();
</script>

</body>
</html>

Grazie
Andrea

**Linux2004** · 11-01-2008, 23:19

Ecco una soluzione:

codice:



   <div style="width: 150px; float: left;">Tuo nome e cognome:</div>
   <input type="text" name="nomemittente" class="form" />
</p>



   <div style="width: 150px; float: left;">La tua e-mail:</div>
   <div><input type="text" name="emailmittente" class="form" /></div>
</p>



   <div style="width: 150px; float: left;">Oggetto:</div>
   <input type="text" name="oggetto" class="form" />
</p>

**D4rkAng3l** · 12-01-2008, 00:34

mmm però così non è validabile...why?

**ricman** · 12-01-2008, 01:45

Originariamente inviato da D4rkAng3l
mmm però così non è validabile...why?

il "because" te lo dice il il validatore... no? Ti scrive per filo e per segno dov'è e cos'è il problema...

**D4rkAng3l** · 12-01-2008, 11:28

eh ma lo sò che non posso avere i <div> dentro i

però vorrei trovare un modo che sia esteticamente carino e validabile...qualche altra soluzione?

Grazie
Andrea

**Linux2004** · 13-01-2008, 00:15

Hai provato togliendo i tag

e usando i
?

Così:

codice:

<div style="width: 150px; float: left;">Tuo nome e cognome:</div>
<input type="text" name="nomemittente" class="form" />



<div style="width: 150px; float: left;">La tua e-mail:</div>
<div><input type="text" name="emailmittente" class="form" /></div>



<div style="width: 150px; float: left;">Oggetto:</div>
<input type="text" name="oggetto" class="form" />

Il risultato è uguale, dovresti riuscire anche a risolvere il problema della validazione

**ricman** · 13-01-2008, 03:42

Originariamente inviato da D4rkAng3l
eh ma lo sò che non posso avere i <div> dentro i

però vorrei trovare un modo che sia esteticamente carino e validabile...qualche altra soluzione?

I P sono paragrafi... servono per il testo... che c'entrano con gli Input?
(i BR non mi piacciono usa solo i div)

**Linux2004** · 13-01-2008, 11:56

Originariamente inviato da ricman
I P sono paragrafi... servono per il testo... che c'entrano con gli Input?
(i BR non mi piacciono usa solo i div)

Infatti, con la nuova soluzione ho tolto gli input da dentro i tag

.
I
sono una potenziale soluzione ai

.

**salasir** · 14-01-2008, 09:53

Direi che con i CSS si possono ottenere ottimi risultati semanticamente corretti, validabili e anche accessibili. Indico qualche link:
Accessible CSS Forms: Using CSS ...
Form fluidi con i CSS
Logica e stile dei form html
Styling form controls with CSS
styling form css

Comunque nei link utili nella sezione CSS trovi altre indicazioni sotto il capitolo form.

**ricman** · 14-01-2008, 09:56

Originariamente inviato da Linux2004
I
sono una potenziale soluzione ai

.

Non mi pare semanticamente corretto fare layout con i BR... Hai i div: usa quelli... con margin e padding risolvi tutto.

Discussione: Come allineare i campi dei form?

Strumenti discussione

Ricerca discussione

Visualizza

Come allineare i campi dei form?

Permessi di invio