[CSS3] Tabbed section senza JS.. si può!

[Al_katraz984]

Proviamo ad aggiungere qualche dato e le classi alla nostra struttura.

Per lavorare bene con i CSS bisogna sempre partire da una struttura il più efficente possibile. E' meglio perdere 10 minuti in più e scrivere una struttura (html) efficace e semanticamente corretta piuttosto che lavorare su strutture caotiche e a volte non semanticamente corrette.

!!IMPORTANT!! La struttura di una pagina web è data dalla parte HTML

Bando alle chiacchere:

<form class="tab-form">
 <input type="radio" name="radio-set" id="tab-1" class="tabs tab-selector-1" />
 <label for="tab-1" class="tab-label">Dati utente</label>
 <input type="radio" name="radio-set" id="tab-2" class="tabs tab-selector-2" />
 <label for="tab-2" class="tab-label">Indirizzo</label>
 <input type="radio" name="radio-set" id="tab-3" class="tabs tab-selector-3" />
 <label for="tab-3" class="tab-label">Altro</label>

 <fieldset class="content-1">
  <legend>Dati utente</legend>
  <p><label for="name">Nome</label><input type="text" name="name" maxlength="32" value="Valore recuperato da db" required /></p>
 </fieldset>

 <fieldset class="content-2">
  <legend>Indirizzo</legend>
  <p><label for="address">Via</label><input type="text" name="address" value="Valore recuperato da db" /></p>
  <p><label for="town">Paese</label><input type="text" name="town" value="Valore recuperato da db" /></p>
  <p><label for="cap">CAP</label><input type="text" name="cap" value="Valore recuperato da db" /></p>
 </fieldset>

 <fieldset class="content-3">
  <legend>Altro</legend>
  <p><label for="details" class="block">Dettagli</label><textarea name="details">Testo recuperato da db</textarea></p>
 </fieldset>
</form> 

l'unico appunto da fare qui è che il nome dei nostri radio-button deve essere univoco

Ok semplice no? ora che abbiamo un po' di contenuti e abbiamo impostato le etichette e le classi possiamo passare alla parte css.
Riporto il minimo indispensabile per capire l'esempio, i dati mancanti dovete includerli voi