Ordinare form con i css

**W Thunderbird** · 09-09-2011, 17:00

Buongiorno,
ho delle pagine web la cui impaginazione era stata creata con le tabelle. Le vorrei rifare utilizzando i CSS per renderle maggiormente compatibili.
Non so come ordinate i form. Vi riporto un estratto della pagina per l'inserimento di alcuni dati che ho ripulito dai tag delle tabelle.

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>Modulo di inserimento dati</title>
</head>

<body>
<form action="salva_dati.php" method="post" name="Iscrizione" target="_blank">
Nome <input type="text" name="nome" maxlength="30" size="30" value="" >

Cognome <input type="text" name="cognome" maxlength="30" size="30" value="">

Email <input type="text" name="cognome" maxlength="30" size="30" value="">


<input type="submit" value="Invia"> <input type="reset" value="Cancella">
</form>
</body>
</html>

Vorrei ordinare il form in modo che le scritte venissero messi a destra e i campi per l'inserimento a sinistra ma in modo che sembrino incolonnati (i campi di testo devono essere tutti alla stessa distanza dal bordo della pagina indipendentemente dalla lunghezza dell'etichetta).
Voi come fate ad ordinare i form ?

**lucavizzi** · 10-09-2011, 16:12

Di solito si usa il tag label come marcatore, in aggiunta puoi anche usare i tag Fieldset e Legend

codice:

<form>
  <fieldset>
    <legend>Dati personali</legend>
    <label>Nome</label>
    <input name="Nome" />
    <label>Cognome</label>
    <input name="Cognome" />
  </fieldset>
  <fieldset>
    <legend>Credenziali di accesso</legend>
    <label>Email</label>
    <input name="Email" />
    <label>Password</label>
    <input name="Password" type="password" />
  </fieldset> 
</form>

il tag label deve essere impostato con display block ed una larghezza affinchè gli input siano allineati.

Discussione: Ordinare form con i css

Strumenti discussione

Ricerca discussione

Visualizza

Ordinare form con i css

Permessi di invio