Form ordinati e puliti con ‘Fieldset’ e CSS

L’ho sempre visto ma non ci ho mai dato troppa importanza (un programmatore guarda raramente alla grafica poiché gli viene consegnata dai grafici) ma in effetti è un metodo semplice per avere dei form di qualsiasi tipo ordinati. In realtà non solo i form ma qualsiasi contenuto a cui si voglia dare un contenitore senza utilizzare immagini per la grafica ma semplice html/css.

Sfortunatamente qui su questo wordpress non si può avere l’anteprima di alcune cose e mi tocca aggiungere un’immagine!

Vi posto il codice così almeno potete provare da voi.

Il CSS è semplice e non necessario per avere un risultato simile:

<style type="text/css">
fieldset.reg {
  padding: 1em;
  font:100%/1 sans-serif;
  }
label {
  float:left;
  width:10%;
  margin-right:0.5em;
  padding-top:0.4em;
  text-align:right;
  font-weight:bold;
  }
</style>

Per quanto riguarda il tag fieldset vero e proprio ho usato una cosa molto semplice, senza nemmeno il bottone submit:

<fieldset class="reg" style="border: solid 1px; padding: 20px;">
<legend><strong style="font-size: 14px;">  TITOLO DEL FORM! E' semplice  </strong></legend>

<label>Email</label>
<input type="text" name="nome" />

<label>Password</label>
<input type="password" name="password" />

<label>Saluto</label>
<input type="text" name="saluto" />

</fieldset>

Ho messo la classe ‘reg’ per abitudine e per maggiore precisione (così se volete più form con stili diversi basta cambiare la classe nel CSS e nel tag fieldset).

E’ facile capire che il titolo viene settato tramite il tag ‘<legend>’. Ho aggiunto dei label per ogni campo così da avere tutto ordinato nello stesso modo. Il resto sono semplici campi testo.

Come vedete il form è carino e ordinato  ed è personalizzabile tarmite css facilmente (colore del bordo, stile del bordo, modifica totale del font del titolo <legend>).

Nel web si trovano un pò esempi (ad esempio aggiungere dei bordi al titolo e spostarlo a destra). Cercateli o sbizzarritevi nel creare fieldset particolari.

Se volete potete aggiungere qualche vostra creazione nei commenti, così da aiutare chi ha bisogno.

Annunci

, , , , , , , , ,

  1. Lascia un commento

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: