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.