In questo capitolo analizziamo alcune possibilità per la personalizzazione e la modifica degli elementi contenuti in un form tramite l'utilizzo di Dreamweaver .

In questa specifica lezione vedremo come personalizzare l'aspetto grafico di un form.

Innanzitutto realizziamo una nuova pagina HTML e chiamiamola FormLayout.html. Al suo interno creiamo un nuono form come quello dell'immagine sottostante.


Cominciamo con la modifica dei campi di testo realizzando una nuova regola css che definisca un colore di sfondo grigio chiaro ed un bordo grigio scuro e la chiameremo input in modo tale che ogni campo, che nel codice è identificato dalla parola input, venga modificato da questa regola.

input {
  background-color: #CCC;
  border: 1px solid #333;
}

Notiamo come anche il tasto di invio sia stato modificato da questa regola perchè anche questo è un elemento di imput. Per modificare solamente il tasto di invio realizziamo una nuova regola che chiameremo tasto. Questa regola sarà una classe e definirà un colore di sfondo grigio scuro ed il testo bianco.

.tasto {
  background-color: #333;
  color: #FFF;
}

Per applicarla al bottone di invio dobbiamo inserire la dicitura class="tasto" all'interno della riga di codice che lo rappresenta.

< input type="submit" class="tasto" name="Invia" id="Invia" value="Invia" />

Inseriamo ora un riquadro con una didascalia che racchiuda tutto il nostro form. Per fare questo scriviamo, subito sotto la riga di codice che definisce il form, il tag di apertura per la realizzazione del riquadro ossia il tag fieldset e chiudiamolo subito dopo la riga di codice che definisce il tasto di invio. Al di sotto del tag di apertura fieldset inseriamo il testo CONTATTO racchiuso tra i tag di apertura e chiusura legend.

< fieldset>
  < legend>CONTATTO< /legend>
  .......
  .......
  .......
  .......
< /fieldset>

Andiamo a modificare graficamente anche il tag legend realizzando una regola che chiameremo appunto legend in modo che identifichi direttamente il destinatario delle modifiche. In questa regola definiamo che il testo sarà di colore verde ed il font Verdana

legend {
  color: #060;
 font-family:Verdana, Geneva, sans-serif;
}

Modifichiamo infine l'intero riquadro definito dal fieldset realizzando una regola che chiameremo appunto fieldset per i motivi spiegati in precedenza. In questa regola definiamo che lo sfondo sarà di colore azzurrino, il bordo azzurro, la larghezza totale di 300 pixel ed una spaziatura interna di 40 pixel.

fieldset {
  background-color: #9CC;
  border: 2px solid #06C;
  padding: 40px;
  width: 300px;
}

L'aspetto del nostro form adesso sarà quello dell'immagine sottostante.

COMMENTI