I Componenti HTML

I Componenti HTML In questo articolo elencherò i componenti HTML in maniera da poterne fare un semplice copia/incolla all'occorrenza. AGGIORNAMENTI 15/03/2013: trattare gli spazi bianchi

Componente Radio Button

<input type="radio" name="sesso" value="m" />
<input type="radio" name="sesso" value="f" />


Come si può verificare, è possibile selezionare soltanto uno dei pulsanti. Notare inoltre che i due pulsanti condividono la proprietà name, mentre si differenziano per la proprietà value. Ricorda che l'attributo name è obbligatorio. Di solito quando si carica la pagina nessuno dei pulsanti è selezionato. Se però si preferisce che uno dei due, ad esempio il primo, risulti già selezionato, basta aggiungere la proprietà checked al suo interno, come si vede dalla seguente riga di

Codice:

<input type="radio" name="sesso" value="m" checked />
 

Componente Text

<input type="text" name="nome" maxlength="10" size="4" />
 

Componente Button

<input type="submit" name="Invia" value="INVIA" />
<input type="reset" name="Cancella" value="CANCELLA" />
 

Componente Checkbox

<input type="checkbox" name="leggi" value="uno" />
<input type="checkbox" name="leggi" value="due" />
 

Componente Combo Box

<select NAME ="scelta">
<option value="Libreria">Libreria</option>
<option value="Edicola" selectd>Edicola</option>
<option value="Supermercato">Supermercato</option>
<option value="Via Internet">Via Internet</option>
</select>
 

Componente Text Area

<textarea name="testo" rows="2" cols="10"></textarea>
 

Componente Img

<img src="/nome immagine" alt="breve descrizione testuale" />

Trattare gli spazi bianchi

In HTML lo spazio bianco multiplo non viene renderizzato: se ne vedrà sempre uno solo!

Se volete vedere più spazi bianchi allora il testo dovrà essere racchiuso in un tag PRE come nel seguente esempio:

<pre>in mezzo ci sono 5 spazi bianchi     fine</pre>

oppure usare un comune tag come il div e associandogli lo style seguente:

<p style="white-space:pre-wrap;">in mezzo ci sono 5 spazi bianchi     fine</p>

Il problema che ora si presenta è che il vostro testo verrà posto in una sola linea se non inserite gli dovuti "a capo".

Allora provate ad alterare gli style così:

white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */

Quindi:

<pre style="white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;">in mezzo ci sono 5 spazi bianchi     fine</pre>

Così dovreste risolvere!

Buon lavoro!