Pillola: Form e CSS (tableless)

**Marcolino's** · 19-03-2004, 18:40

Ciao ragazzi, come da titolo metto qui in questo spazio, un articoletto scritto e sviluppato da me medesimo che riguarda la formattazione dei campi form utilizzando solo i fogli di stile e l'inpaginazione senza tabelle.

I due listati che allego sono stati testè da me provati con i seguenti browser: linx (testuale), Opera 7.23, Mozilla 1.6, IE 6.0 su macchina Windows, con schermo da 17 pollici e alle seguenti risoluzioni: 640 x 480 pixels, 800 x 600 pixels, 1024 x 768 pixels.

Listato del foglio di stile:

codice:

body {
	background-color: #ADD8E6;
	color: black;
	font-family: "Courier New", Courier, monospace;
	font-size: 0.9em;
	margin: 0;
	padding: 0;
	text-align: center;
}

hr {
	display: none;
}
div#contenitore {
   position: relative;
	margin: auto;
	margin-top: .5em;
	width: 90%;
	min-height: 30em;
	height: auto !important;
	height: 30em;
	border: 1px solid black;
	background-color: #F5F5F5;
}
div#contenitore div#header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3em;
	border-bottom: 1px solid black;
	background-color: #DCDCDC;
}
div#contenitore div#header h1 {
	text-align: center;
	font-size: 1.3em;
}
div#contenitore div#form {
	position: absolute;
	top: 3em;
	left: 0;
	width: 100%;
	min-height: 27em;
	height: auto !important;
	height: 27em;
	background-color: #6B8E23;
}

/* elementi del form */
div#contenitore div#form p {
	margin: 1em auto;
	width: 50%;
	min-height: 2em;
	height: auto !important;
	height: 2em;
	font-family: monospace;
	font-size: 1em;
	font-weight: lighter;
}

div#contenitore div#form p label {
	float: left;
	margin-left: 1em;
	color: #A52A2A;
	line-height: 2em;
}
div#contenitore div#form p label:first-letter {
   font-weight: bold; 
	font-size: 1.1em;
	text-transform: capitalize;
	Color: Maroon;
}
div#contenitore div#form p label:after {
	content: " [" attr(accesskey) "] ";
	color: #f5f5f5;
}

div#contenitore div#form p input {
	float: right;
	margin-right: 1em;
	width: 10em;
	border: 1px inset Maroon;
	background-color: #CD5C5C;
}
div#contenitore div#form p input.pulsante {
	float: right;
	margin-right: 1em;
	width: 6em;
	height: 2em;
	border: 1px outset Maroon;
	background-color: #CD5C5C;
}
div#contenitore div#form p textarea {
	width: 95%;
	margin-right: 1em;
	height: 5em;
	border: 1px inset Maroon;
	background-color: #CD5C5C;
}

E listato del file xhtml

codice:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"
   \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">

<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='it'>


<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Generator" content="Dev-PHP 1.9.4" />
<title>Document Title</title>
<link rel='stylesheet' href='index.css' type='text/css' media='screen' />
</head>
<body>
<div id='contenitore'>
  <div id='header'>
    <h1>Prova per il posizionamento degli elementi di un form</h1>
  </div>
  <hr />
  <div id='form'>
    <form method='post'>
      


        <label for='nome' accesskey='n'>nome:</label>
        <input type='text' id='nome' size='10' />
      </p>
      


        <label for='cognome' accesskey='c'>cognome:</label>
        <input type='text' id='cognome' size='10' />
      </p>
      


        <label for='testo' accesskey='t'>Immetti testo:</label>
        <textarea id='testo' rows='8' cols='20'></textarea>
      </p>
      


        <input class='pulsante' type='submit' value='Invia -->' id='invia' />
        <input class='pulsante' type='reset' value='Cancella' id='cancella' />
      </p>
    </form>
  </div>
</div>
</body>
</html>

Come si vede il file xhtml non è affatto complesso, mentre il foglio di stile è discretamente complesso utilizzando elementi di formattazione discretamente spinti. Vediamolo!

L'idea per formattare il form è stata quella di usare gli elementi di paragrafo, che sono facilmente "impilabili" all'interno di una pagina, ad ognuno di essi sono associati una label ed un input, più uno per la textarea ed uno infine che implementa una classe pulsante che serve a diversificare otticamente un pulsante da una text area, volendo non richiamando la classe, questi mantengono comunque una loro formattazione senza scombussolare nulla.

Iniziano i dolori

body{
background-color: #ADD8E6;
color: black;
font-family: "Courier New", Courier, monospace;
font-size: 0.9em;
margin: 0;
padding: 0;
text-align: center;
}
Non presenta nulla di particolare, utilizzo gli em (emphatized) come elementi di misura perchè sono più pratici per ridimensionare sia il testo che la pagina in particolare. Metto anche l'allineamento del testo al centro, così posso allineare gli altri elementi della pagina al centro. (vedi div#contenitore)

hr{
dislay: none
}
Nasconde la barra che utilizzo per separare l'intestazione della pagina dal form vero e proprio, metodo utile per i browser testuali come linx o per NN4 il quale non sempre prende la formattazione con i layer; tutti gli altri borwser non visualizzano la barra.

div#contenitore {
position: relative;
margin: auto;
margin-top: .5em;
width: 90%;
min-height: 30em;
height: auto !important;
height: 30em;
border: 1px solid black;
background-color: #F5F5F5;
}
Ci siamo; avendo impostato text-align: center all'intero body e dando a questo layer l'impostazione margin: auto esso si sposta al centro della pagina, inoltre do anche subito dopo margin-top: 0.5em in modo da averlo staccato dal bordo superiore della finestra del browser.
Il layer ha anche impostazione di posizionamento relativo, questo perchè conterrà altri elementi che faranno riferimento ad esso, ovvero relativi a questo layer.
Non è finita, utilizzo anche un trucco (hack) per i browser explorer, che non supportano la proprietà min-height dei CSS2 (

); ovvero, dopo min-height: 30em inserisco un - height: auto !important - questo fa si che la proprietà diventi più importante di quella che segue, ma !important non viene letta da IE, così mentre gli altri browser comprendendone il significato saltano l'istruzione successiva, IE legge height: 30em.
In realtà la proprietà height viene letta da IE esattamente come se fosse una min-height e quindi nessuno si accorge della differenza.

Salto per decenza il resto del foglio di stile, a chi interessa come formattare una paginetta tableless però consiglio vivamente di studiarsela, e passo alla formattazione del form vero e proprio:

div#contenitore div#form p {
margin: 1em auto;
width: 50%;
min-height: 2em;
height: auto !important;
height: 2em;
font-family: monospace;
font-size: 1em;
font-weight: lighter;
}
Dopo aver definito dentro contenitore il layer form definisco al suo interno l'elemento P
Lo metto al centro di form con margin: 1em auto, un'altezza minima di 2em (con allegato il solito trucco per IE).

div#contenitore div#form p label {
float: left;
margin-left: 1em;
color: #A52A2A;
line-height: 2em;
}
Eccoci al dunque, dentro contenitore c'è form che al suo interno contiene p che a sua volta contiene label.
L'unica cosa importante da far notare è la proprietà float: left, che sposta la label al margine sinistro dell'elemento che lo contiene (p).

div#contenitore div#form p label:first-letter {
font-weight: bold;
font-size: 1.1em;
text-transform: capitalize;
color: Maroon;
}
Ancora una chicca, la prima lettera di label viene resa in maiuscolo, ingrandita, e di altro colore rispetto al resto del testo.

div#contenitore div#form p label:after {
content: " [" attr(accesskey) "] ";
color: #f5f5f5;
}
Ancora una roba da professionisti, e ancora una roba che IE non legge (

), praticamente defininedo dentro a label l'attributo accesskey che permette di definire una accelleratore di tastiera, con tutti i browse compatibili dopo (after) la stringa definita in label, appare la lettera che richiama l'accellaratore, ovviamente in IE no!

div#contenitore div#form p input {
float: right;
margin-right: 1em;
width: 10em;
border: 1px inset Maroon;
background-color: #CD5C5C;
color: #90EE90;
}
Fine della corsa, siamo all'input, se label era stato spostato a sinistra con float: left, qui usando float: right, sposto l'input sulla destra dell'elemento paragrafo (p).

Ciò che appare nel browser lo potete vedere qui: Form tableless, mentre per le altre questioni che riguardano il foglio di stile, vi consiglio vivamente di darci un'occhiata, ciò che resta da capire è banale, textarea è una ripetizione di input, mentre le classi pulsante modificano solo la dimensione e lo stile dei pulsanti rispetto alle aree di testo.

Note per il file xhtml
Poco o nulla da dire, tranne l'uso di <label> all'interno del form, pochi ne conoscono l'importanza, ma serve proprio a definire un'etichetta (label) per un campo del form (testo, input o altro), è comodo e in questo caso ci aiuta nella formattazione.
Al suo interno ho usato l'accesskey, se premete la lettera corrispondente insieme al tasto ALT (in windows) il cursore si posta nel campo di testo correlato, così si comprende anche bene l'importanza di tale elemento per l'accessiblità dei siti.

Happy hacking by Marcolino.

**Lardoman** · 19-03-2004, 18:49

Davvero interessante!

Complimenti!

**piero06** · 19-03-2004, 20:32

Azzo bella .... mi metto a leggerla

anche se come ben sai sono contrario ai livelli :sexpulp:

**Jerry Masslo** · 19-03-2004, 20:57

sembra funzionare a dovere, a parte forse che ridimensionando con ie e mozilla parte del titolo s'infila sotto il livello sottostante.

Curiosità:
perché

div#contenitore div#header {

invece di

#header {

?

**Marcolino's** · 19-03-2004, 22:19

Originariamente inviato da Jerry Masslo
sembra funzionare a dovere, a parte forse che ridimensionando con ie e mozilla parte del titolo s'infila sotto il livello sottostante.

Curiosità:
perché

div#contenitore div#header {

invece di

#header {

?

Il titolo si "infila sotto" perchè eccede la larghezza del testo, non ho fatto prove in tal senso, probabilmente dando un'altezza minima anche al titolo o definendolo come display: block si risolve il problema, poi vedrò ....

Perchè div#eccetera invece che....
definire un layer invece che un identificatore generico serve a impedire che la classe #contenitore venga associata a qualcosa di diverso che un layer.
E dato che volevo implementare una dipendenza tra contenitore e header, ho preferito "essere chiaro"

Spesso vedo qui fogli di stile che non utilizzano questa tecnica, per la massima parte dei casi vanno bene, ma io volevo che header fosse parte integrante di contenitore, questo per poter sfruttare il posizionamento assoluto all'interno di contenitore.

Ogni cosa in un foglio di stile è figlia della precedente

questo vuol dire che, se uso body { ... } e poi #contenitore { ... } e infine #header { ... } svincolandoli, in realtà sono tutti figli di body e poi mi creo problemi per posizionare i vari elementi e farli stare incollati tra loro se ridimensiono la finestra.
Se non faccio così mi si creerà un problema con il posizionamento dinamico, ho visto che molti qui cadono sempre nella stessa trappola.

Definire div#contenitore significa che l'identificatore #contenitore può essere sempre e solo un layer.
Definendo solo #contenitore in realtà creo qualcosa di generico, funziona, però in questo modo essa non viene associata solo ad un layer ma a qualsiasi altro elemento.
Quindi io specifico: div#contenitore e può essere associato solo e soltanto ad un layer.

I layer nidificati, e pochi topic fa ho notato che qualcuno chiedeva se si poteva fare, servono a definire dei figli di padri, pensate alla programmazione a oggetti.
Quindi div#contenitore div#header definisce un elemento, header, che può essere solo figlio di contenitore e ne eredita tutte le caratteristiche comuni, in più ne aggiunge delle altre.
Ad esempio posso tranquillamente definire del testo (font-family, eccetera) in contenitore, e questo sarà ereditato da tutti i suoi figli, nipoti e pronipoti.
Per esempio: div#contenitore div#form p { .. } se in contenitore mettevo font-family: verdana, p (paragrafo) ereditava quel font senza doverlo ridefinire di nuovo.
Se invece facevo: div#contenitore {font-family: verdana} e poi a parte div#form p { ... } questo non ereditava più il verdana e dovevo reinserirlo di nuovo.

Non so se sono stato chiaro.

Per piero: nessuno ti vuole convincere, ma ostinarsi ad usare il pennino e il calamaio per scrivere, quando esiste la biro da tanto tempo, questo non l'ho capito.

**Jerry Masslo** · 20-03-2004, 12:00

nun l'ho capito. :master:

quando dici che così un l'elemento ti eredità proprietà definite nell'elemento padre succede lo stesso anche senza impostare la discendenza nel css perché comunque la si stabilisce nell'(x)html.

quello che usi tu normalmente si fa per le classi perché si potrebbe volere definire delle caratteristiche diverse solo quando una classe si viene a trovare in una certa posizione senza dover ridefinire un'intera altra classe, usando gli id questa possibilità è esclusa dalla loro univocità.

Una situazione in cui potrebbe servire è per differenziare lo stesso id in pagine diverse in modo che in alcune pagine si comporti in un modo e in altre in modo diverso in dipendenza dalla posizione nella pagina.

Mettiamola così: hai voluto evidenziare la struttura in cui andava usato il css senza bisogno di guardare l'(x)html, la stessa cosa poteva farsi coi commenti ma poi è questione di preferenze personali insidacabili.

**Marcolino's** · 20-03-2004, 16:22

Originariamente inviato da Jerry Masslo
nun l'ho capito. :master:

quando dici che così un l'elemento ti eredità proprietà definite nell'elemento padre succede lo stesso anche senza impostare la discendenza nel css perché comunque la si stabilisce nell'(x)html.

quello che usi tu normalmente si fa per le classi perché si potrebbe volere definire delle caratteristiche diverse solo quando una classe si viene a trovare in una certa posizione senza dover ridefinire un'intera altra classe, usando gli id questa possibilità è esclusa dalla loro univocità.

Una situazione in cui potrebbe servire è per differenziare lo stesso id in pagine diverse in modo che in alcune pagine si comporti in un modo e in altre in modo diverso in dipendenza dalla posizione nella pagina.

Mettiamola così: hai voluto evidenziare la struttura in cui andava usato il css senza bisogno di guardare l'(x)html, la stessa cosa poteva farsi coi commenti ma poi è questione di preferenze personali insidacabili.

Sei completamente fuori strada.
Non serve a nulla differenziare identificatori uguali in paine differenti, dato che la persistenza non è prevista in internet.
La mia scelta è dovuta al fatto che P, label, input; dovevano essere tutti figli di #form e a loro volta sia #form che #header dovevano essere figli di #contenitore.
Se realizzavo la stessa cosa nel modo che avevi detto tu prima, cioè svincolandoli tra di loro, avrei avuto un file più lungo e un'impostazione generale più complessa.
Ad esempio avrei avuto più problemi a tenere uniti al centro della finstra i due layer: #header e #form se svincolati da #contenitore.
Non a caso dentro #contenitore c'è una position: relative, in quanto essa mi serve per far ereditare a #header e a #form la relazione con il #contenitore.
In questo modo, #header che è posizionato in assoluto, prende come livello di top, il livello di #contenitore e non quello della finestra.
E deve essere un identificatore e non una classe perchè "marca" un blocco di codice ben distinto all'interno della pagina.

All'inizio del tuo post dici anche che le dipendenze si stabiliscono pure nello xhtml, niente è più sbagliato di questa affermazione, infatti con lo xhtml non puoi vincolare un bel nulla, l'ereditarietà delle classi di oggetti (proprietà dei CSS) è propria dei CSS e non ha nulla a che vedere con il codice di formattazione della pagina.

**WarriorXP** · 20-03-2004, 17:56

Bella pillola!

**Jerry Masslo** · 20-03-2004, 20:45

Originariamente inviato da Marcolino's
Sei completamente fuori strada.
Non serve a nulla differenziare identificatori uguali in paine differenti, dato che la persistenza non è prevista in internet.

Ti ho solo cercato un caso in cui potrebbe effettivamente servire, dato che gli id sono univoci per una singola pagina non può avere senso, discorso diverso per le classi.

La mia scelta è dovuta al fatto che P, label, input; dovevano essere tutti figli di #form e a loro volta sia #form che #header dovevano essere figli di #contenitore.
Se realizzavo la stessa cosa nel modo che avevi detto tu prima, cioè svincolandoli tra di loro, avrei avuto un file più lungo e un'impostazione generale più complessa.
Ad esempio avrei avuto più problemi a tenere uniti al centro della finstra i due layer: #header e #form se svincolati da #contenitore.
Non a caso dentro #contenitore c'è una position: relative, in quanto essa mi serve per far ereditare a #header e a #form la relazione con il #contenitore.
In questo modo, #header che è posizionato in assoluto, prende come livello di top, il livello di #contenitore e non quello della finestra.
E deve essere un identificatore e non una classe perchè "marca" un blocco di codice ben distinto all'interno della pagina.

All'inizio del tuo post dici anche che le dipendenze si stabiliscono pure nello xhtml, niente è più sbagliato di questa affermazione, infatti con lo xhtml non puoi vincolare un bel nulla, l'ereditarietà delle classi di oggetti (proprietà dei CSS) è propria dei CSS e non ha nulla a che vedere con il codice di formattazione della pagina.

:master:

Mi stai dicendo che con questo codice tu la pagina la vedi diversa?

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">

<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='it'>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Generator" content="Dev-PHP 1.9.4" />
<title>Document Title</title>
<style type='text/css' media='screen' />

body {
background-color: #ADD8E6;
color: black;
font-family: "Courier New", Courier, monospace;
font-size: 0.9em;
margin: 0;
padding: 0;
text-align: center;
}

hr {
display: none;
}
#contenitore {
position: relative;
margin: auto;
margin-top: .5em;
width: 90%;
min-height: 30em;
height: auto !important;
height: 30em;
border: 1px solid black;
background-color: #F5F5F5;
}
#header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3em;
border-bottom: 1px solid black;
background-color: #DCDCDC;
}
#header h1 {
text-align: center;
font-size: 1.3em;
}
#form {
position: absolute;
top: 3em;
left: 0;
width: 100%;
min-height: 27em;
height: auto !important;
height: 27em;
background-color: #6B8E23;
}

/* elementi del form */
#form p {
margin: 1em auto;
width: 50%;
min-height: 2em;
height: auto !important;
height: 2em;
font-family: monospace;
font-size: 1em;
font-weight: lighter;
}

#form p label {
float: left;
margin-left: 1em;
color: #A52A2A;
line-height: 2em;
}
#form p label:first-letter {
font-weight: bold;
font-size: 1.1em;
text-transform: capitalize;
Color: Maroon;
}
#form p label:after {
content: " [" attr(accesskey) "] ";
color: #f5f5f5;
}

#form p input {
float: right;
margin-right: 1em;
width: 10em;
border: 1px inset Maroon;
background-color: #CD5C5C;
}
#form p input.pulsante {
float: right;
margin-right: 1em;
width: 6em;
height: 2em;
border: 1px outset Maroon;
background-color: #CD5C5C;
}
#form p textarea {
width: 95%;
margin-right: 1em;
height: 5em;
border: 1px inset Maroon;
background-color: #CD5C5C;
}
</style>
</head>
<body>
<div id='contenitore'>
<div id='header'>
<h1>Prova per il posizionamento degli elementi di un form</h1>
</div>
<hr />
<div id='form'>
<form method='post'>

<label for='nome' accesskey='n'>nome:</label>
<input type='text' id='nome' size='10' />
</p>

<label for='cognome' accesskey='c'>cognome:</label>
<input type='text' id='cognome' size='10' />
</p>

<label for='testo' accesskey='t'>Immetti testo:</label>
<textarea id='testo' rows='8' cols='20'></textarea>
</p>

<input class='pulsante' type='submit' value='Invia -->' id='invia' />
<input class='pulsante' type='reset' value='Cancella' id='cancella' />
</p>
</form>
</div>
</div>
</body>
</html>

**Marcolino's** · 20-03-2004, 22:02

Non ho mai detto che quello era l'unico modo per poter realizzare ciò che ho fatto, ma che quello che ho usato era il modo implicito per realizzarlo.
Il metodo che hai usato tu non è che non sia corretto, ma porta a errori in pagine più complesse, non puoi gestire le proprietà di eredità dei CSS con il codice xhtml, semplicemente perchè sono due cose completamente distaccate e indipendenti, infatti il testo dei testi è nero e non colorato come nel mio esempio

Discussione: Pillola: Form e CSS (tableless)

Strumenti discussione

Ricerca discussione

Visualizza

Pillola: Form e CSS (tableless)

Permessi di invio