 Buono sconto 4% su Toner e Cartucce agli utenti AZpoint. SU Iomiricarico.it!!
Formattare un form
Avete presente il bottone ed il campo di ricerca nel nostro sito?
Ebbene è un semplice form con un campo di testo dove inseriamo le parole chiave da ricercare ed
un bottone per avviare la nostra ricerca. Solitamente questo tipo di form viene scritto dai più
in questo modo :
<form name="ricerca" method="post" action="avvia_ricerca.asp">
Ricerca nel sito:
<input name="Testo" id="Testo">
<input type=submit value="trova">
</form>
Il risultato di questo form ve lo proponiamo qui sotto:
Ebbene sulla funzionalità di questo form non abbiamo assolutamente niente da dire, ma il problema è più che altro
il suo aspetto grafico. E' infatti evidente che se noi abbiamo un sito con colori differenti dal bianco o nero come sfondo, è difficile integrare nell'interfaccia questo campo per la ricerca.
Ma a questo piccolo problema esiste una soluzione, possiamo infatti formattare i bordi, gli sfondi ed il colore del testo aggiungendo alcune parti di codice a quelle standard. Possiamo infatti:
- cambiare il colore dello sfondo: BACKGROUND-COLOR: #[colore]
- cambiare il colore dei bordi: BORDER-COLOR: #[colore]
- formattare il testo con dimensioni, colori e tipo carattere: FONT-FAMILY: [primo tipo carattere], [secondo tipo carattere]; FONT-SIZE: [dimensioni]pt; COLOR: #[colore]
Questi sono i comandi più importanti che possiamo utilizzare per formattare il nostro form, ma per il loro inserimento bisogna sapere qualche particolare che vi faremo notare attraverso un esempio qui sotto.
Vedete l'esempio qui sopra, questo tipo di formattazione è stata ottenuta attraverso questo codice:
<form name="ricerca" method="post" action="ricerca.asp">
Ricerca nel sito:
<input name="Testo" id="Testo" style='BACKGROUND-COLOR: #64AFFC; BORDER-COLOR: #569BE2; color: #2C4F72; FONT-SIZE: 8pt'>
<input type=submit value="trova" style='BACKGROUND-COLOR: #1872CE; BORDER-COLOR: #94C2F6; COLOR: #C7E2FD; FONT-FAMILY: Verdana, Arial; FONT-SIZE: 10pt'>
</form>
Come vedete, per introdurre la formattazione dobbiamo usare il tag [style] seguito da [=] e poi [']. L'apice andrà chiuso non appena abbiamo finito di inserire tutti i codici per la formattazione. Altro particolare molto importante è quello del ; che intervalla un comando dall'altro. Con questo abbiamo finito. Al prossimo script!
|
Shopping
