Un form, o modulo, è il modo più efficace per chiedere all'utente di un sito informazioni di vario tipo e per inviarle ad un database - o ad un indirizzo di posta elettronica - nel quale verranno memorizzate. Un form abbastanza tipico che si può trovare in giro per il web è del tipo:

che tutti, almeno una volta, avranno visto. Un modulo di questo tipo si limita a permettere all'utente, previo inserimento dei propri dati, di accedere ad are protette di un sito che sarebbero altrimenti inaccessibili. Analizziamo più nello specifico il source che sta alla base di questo semplicissimo form.

<form name="form" method="post" action="http://tuospazio.est/paginaraccoltadati.est">
<p>User name
<input type="text" name="textfield" value="Ciao! Io sono un campo di testo!">
<br>
Password
<input type="password" name="textfield1">
</p>
</form>

Ovviamente, come ogni blocco di codice, è delimitato da tags di confine (nello specifico <form> e </form> che indicano al browser l'inizio e la fine del modulo. L'attributo name indica il nome del modulo, sebbene possa sembrare un particolare di poco conto è sempre bene dare nomi diversi ad ogni modulo, sia per correttezza formale, sia per il corretto funzionamento della raccolta dati. Method rappresenta il metodo di invio dei dati (get o post); per quello che si tratterà in questo tutorial il metodo post sarà sempre il più efficiente, quindi faremo riferimento solo ad esso. Come dicevo all'inizio i form servono, essenzialmente, alla raccolta di dati, da inviare ad un database o ad un indirizzo di posta elettronica, nel primo caso - database - si deve indicare come riferimento per l'action una pagina, generalmente dinamica, che conterrà, poi, il codice per la trasmissione dati al database; se, invece, si vuole che le informazioni vengano inviate ad un indirizzo di posta elettronica, il tag diventa:

<form name="form" method="post" action="mailto:tuoindirizzo@serverposta.est">

Passando ai tags interni notiamo che l'input type definiscela tipologia di oggetto che va ad essere inserito nel modulo. Nel nostro caso specifico, dal momento che il campo destinato all'user name deve essere visibile a tutti, abbiamo associato ad esso il tipo text, ovvero, abbiamo detto al browser che il testo che andremo ad inserire in quello spazio dovrà essere mostrato a video così com'è, mentre per la casella relativa alla password abbiamo deciso di occultare la parola scelta, sicché associamo al campo di testo l'input type password. Anche in questo caso, anzi a maggior ragione, è bene dare nomi diversi ai diversi oggetti del form attraverso l'apposito tag name.

Di seguito saranno indicati i codici per l'inserimento dei diversi oggetti all'interno di un form.

I div-layouts sono sicuramente i modelli più semplici e diffusi di pagina web. Ecco qualche nota essenziale per imparare a costruirli. Ovviamente la sezione dei css può esser arricchita dall’utente a proprio piacere.

Strumenti richiesti:
Adobe Photoshop (o qualunque altro programma grafico),
HTML editor
Parte I: Immagine
Scansiona od importa l'immagine che vuoi utilizzare. Decorala e seleziona gli spazi in modo da adattarla alla navigazione. Ricorda che per un template ottimizzato per ogni risoluzione, la dimensione complessiva non dovrà superare i 780 px di larghezza. Una volta definito lo schema base, ritaglia la parte finale (consiglio un crop che abbia l'altezza massima di 1px, a meno che non ci sia un elemento di decorazione). Sarà il background! (per comodità, lo chiamo "bg")
Parte II: Codice (io uso il notepad. Un utente meno esperto può tranquillamente affidarsi a frontpage)
Inserire nel css questo tag:
body {
background-image: url(yourbackground.jpg);
background-color: #your color;
background-attachment: scroll;
background-repeat: repeat-y;
}

L'istruzione "repeat-y" Serve ad evitare una ripetizione orizzontale.

Nell'html della pagina, in corrispondenza del punto in cui si vuol collocare l'immagine d'intestazione, va inserito tale codice (#-> valori a scelta)

<div id="image" style="position: absolute; z-index: 2; left: ###px; top: ###px; width: ###px; height: ###px"><img border=0 src="yourimage.jpg" width="###" height="###"></div>

I valori left e top di solito vengon mantenuti a 0px. In Splinder, meglio calcolare un top:33px, per la barra. In width ed height debbono essere inseriti i valori dell' immagine. Ovviamente, se il livello non contiene immagini, non è necessario specificare l'altezza.
Altri layer:
<div id="content" style="position: absolute; z-index: 2; left: ###px; top: ###px; width: ###px; overflow: visible">

your content

</div>



<div id="navigation" style="position: absolute; z-index: 2; left: ###px; top: ###px; width: ###px; overflow: visible">

your links

</div>

Ed è tutto!