7 – form 3

Pubblicato il di

Text area

<textarea style="background-color: green" name="note" id="note"></textarea>

Posso inserire del testo

<textarea style="background-color: green" name="note" id="note">...inserisci le note... </textarea>

e anche attribuire un value, anche se in questo caso l’attributo più indicato è il placeholder. Posso anche stabilire una dimensione massima di caratteri

<textarea cols="40" rows="10" style="background-color: green" name="note" id="note">

cols sta per colonne (in orizzontale) e row righe (in verticale). Valgono anche qui i soliti attributi: disable, readnoly, maxlenght, autofocus, require, placeholder.

Input file

<input type="file" />

é il classico pulsante di upload. Immaginiamo di chiedere un immagine da inserire come avatar:

<tr>
    <td>Inviaci un'immagine per il tuo avatar</td>
    <td><input type="file" /></td>
</tr>

Un attributo interessante è il controllo del tipo di file da upload con accept

<input type="file" accept="image/*, audio/mp3" />

Il tipo di file accettati sono definiti dal mime type approvati dal iana.

Nell’esempio si accettano tutti i tipi di immagini, mentre nel secondo parametro solo gli mp3. Ancora il supporto non è perfetto per questo attributo. Un attributo che aiuta il server a gestire il tipo di codifica è l’ enctype (encoding type)

<input type="file" enctype="multipart/form-data" accept="image/*, audio/mp3" />

Infine l’attributo per uploader più file: multiple

<input type="file" enctype="multipart/form-data" accept="image/*, audio/mp3" multiple="multiple"/>

Hidden

è un campo nascosto che però memorizza ed invia i dati alla pagina ricevente, solo che è nascosto (utile per esempio per il numero degli id clienti di un database)

<input type="hidden" name="codCliente" id="codice" value="98871">

Image

è un campo contenente visivamente un immagine, gli attributi sono il src per il percorso, alt, le dimensioni e le coordinate dove inserire l’immagine

<input type="image" src="img/facocero.jpg" alt="submit" width="90" height="50" />

I valori che fornirà questo pulsante immagine, è lo stesso del classico submit, anzi la pagina ricevente riceverà anche le coordinate del punto dove avrò fatto il click.