form senza tabella!

[alemoppo]

Salve!.

Sto cercando di fare un form, senza l'utilizzo di tabelle per posizionare i vari elementi.

Sono arrivato a questo punto:

[...]
<style type="text/css">
.contenitore_form
{
	width: 200px;
	padding: 10px;
}
.contenitore_form label, input
{
	width: 90px;
	margin-bottom: 10px;
}
.contenitore_form label
{
	float: left;	
	text-align: right;
}
.contenitore_form input
{
	float:right;
}
.contenitore_form .submit
{
	width: auto;
	margin: auto;
}
</style>
[...]
<div class="contenitore_form">
	<form action="form_senza_tabella.html" method="post">
		<label for="nick">Nick: </label><input id="nick" type="text" name="nick">
		<label for="password">password: </label><input id="password" type="password" name="pass">
		<label for="ricorda">Ricorda</label><input id="ricorda" type="checkbox" name="ricorda">
		<input type="submit" value="login" class="submit">
	</form>
</div>
[...]

(qui la pagina).

Non riesco a:

• allineare la checkbox a sinistra (facendolo stare più vicino alla scritta "ricorda").
• centrare il pulsante submit.

Altre cose scondarie: mi piacerebbe eliminare «class="submit"». Mi piacerebbe anche eliminar tutti gli id negli input; li ho messi per far in modo che la pagina sia validata (per il fatto dei label).

Grazie!

Ciao!

EDIT:
Ovviamente, suggerire o proporre altri miglioramenti che non ho scritto è ben accetto .

[dreadnaut]

Gli id degli input ti servono, altrimenti le label non sono associate ai campi e cliccarci sopra non funziona. Se ti confondono, al massimo dagli un prefisso tipo c- per differenziarli dagli altri.

Per la checkbox, io la metterei prima della label, tipo [ ] ricordami bla bla. Inoltre, mettere ogni riga in un paragrafo aiuta assai per l'allineamento.

[karl94]

Per centrare verticalmente le etichette e i rispettivi campi usa la proprietà line-height: impostala pari all'altezza esterna dei campi (padding+bordo+contenuto).

Altre cose scondarie: mi piacerebbe eliminare «class="submit"»

Puoi:

• usare l'elemento button (che tra l'altro mi sta anche più simpatico di quell'accozzaglia di input), oppure
• usare i selettori di attributo CSS2.1 (che sono comunque ben supportati se escludiamo versioni vetuste di un noto browser).

[alemoppo]

Grazie 1000 ad entrambi!. Sinceramente, non mi ero nemmeno accorto del problema dell'allineamento delle scritte con gli input!

Prima che rispondesse karl, ho fatto così.

Con la risposta di karl, ho rifatto così.

Probabilmente userò la seconda solluzione, perché a "livello html" è più pulita, senza <p>. Peccato soltanto per «class="testo_ricorda"», altrimenti a livello html sarebbe stato l'ideale

Se avete atri suggerimenti, son qui; ma per adesso mi accontento così

Grazie ancora,

Ciao!

EDIT:

Come non detto, la seconda soluzione non va su IE (io ho il 10). La prima invece funziona bene. Penso sia "colpa" del line-height: fa la stessa cosa negli altri browser impostando questo valore a livello maggiore di 22px (dovrebbe essere a 29px).

[dreadnaut]

Nota che allineare il testo a destra può essere scomodo: l'inizio della riga è sempre diverso, invece di essere nella stessa posizione, e quindi l'occhio fa più fatica a trovarlo.

Ehm, nota che la "pulizia" a livello html è una metrica tutta tua —c'è chi si lamenterebbe del form-container, chi della mancanza di fieldset e legend— pensa a come l'hai inventata e dove ti porta, quando la usi per valutare il tuo codice.

Mi sembra che input debba sempre essere all'interno di un blocco, quindi p o div sono entrambe valide scelte. La tua forza l'uso di un div esterno senza alcuna semantica.

Comunque guarda form in giro per il web, e vedrai i mille modi di implementarle.

[alemoppo]

Prima di provare a far quel codice sopra, ho cercato, ed in particolare ho letto questo. Alla vista del form, mi è subito piaciuto l'allineamento a destra del testo, perché mi da l'idea di una cosa ordinata. In effetti però sarebbe più comodo da leggere allienando il testo a sinistra.

Comunque, ho pensato di farne uno io perché lì usa i <br>, e volevo evitarli (quando ho visto i <br>, non ho nemmeno letto approfonditamente il css che hanno usato).

Per "pulizia del codice", intendo di usare meno tag html possibile (non tralasciando quelli necessari): a me il div esterno serve per la "misura", ovvero per dar un width al form. Potrebbe esser sostituito da un eventuale div del template. Anche utilizzando i <p> dovrei comunque usare un div, altrimenti ogni riga del <p> mi prenderebbe "tutto" quello che può (sarebbe dire impostare il width:100%; non so se mi son spiegato).

I fieldset e legend in effetti ci vorrebbero. Li metterò, grazie. .

Grazie ancora.

Ciao!

[dreadnaut]

Invece del div, puoi applicare la larghezza direttamente al tag <form>

Confronto fra i diversi allineamenti, ognuno con i suoi pro e contro:
http://webylife.com/design/how-to-al...-in-web-forms/

[alemoppo]

Invece del div, puoi applicare la larghezza direttamente al tag <form>

Perché non mi è venuto in mente?!

Articolo interessantissimo. Grazie!

Ciao!