Ci sono diversi tipi di form in HTML e puoi usarli per raccogliere informazioni dai visitatori del tuo sito, le informazioni vengono inviate ad un server che processa i dati con un linguaggio di programmazione che può essere PHP, Java, C#, VB.net etc.

- Aggiungere testo
- Fare scelte
- Inviare le informazioni
- i type del TAG input
- Link utili
Ogni componente dovremo inserirlo all’interno del tag form, di seguito la sua struttura
<form action="percorsoDelloScriptLatoServer/script.php" method="POST">
<p>Qui inseriremo i tag per l'input</p>
</form>
Nota: ovviamente devi conoscere il linguaggio PHP e scrivere un opportuno script per manipolare i dati inviati dal form. Se ancora non lo conosci ti consiglio di lasciare vuoto il valore dell’attributo action e prendere padronanza dei tag HTML per l’input.
Se vuoi iniziare a conoscere il PHP ti consiglio questa lezione: PHP Le istruzioni base.
Text input
<form action="" method="POST">
Nome utente:
<input type="text" name="username" maxlength="20" placeholder="Nome utente"/>
</form>
Attraverso l’attributo name diamo un nome al valore che invieremo, in questo esempio username. L’attributo maxlength indica il numero massimo di caratteri digitabili mentre placeholder fornirà all’utente un ulteriore aiuto/esempio per inserire i dati.
Password input
<form action="" method="POST">
Nome utente:
<input type="password" name="password" minlength="6" placeholder="Password"/>
</form>
Noteremo che i caratteri immessi verrano automaticamente offuscati, minlength è particolarmente utile per stabilire un numero minimo di caratteri. Il tema della validazione client-side dei campi verrà trattato in un apposita lezione Javascript.
Text area
<form action="" method="POST">
<p>Inserisci qui il tuo commento</p>
<textarea name="comments" cols="30" rows="10">
Scrivi qui...
</textarea>
</form>
Con gli attributi cols e rows specifichiamo il numero di caratteri per colonne e per righe. Avremo quindi 10 righe ognuna con 30 caratteri digitabili.

Radio buttons
Nel caso vogliamo ottenere un’informazione rappresentata da una scelta univoca useremo i radio button
<form action="" method="POST">
<p>Il tuo colore preferito</p>
<input type="radio" name="color" value="pink"/>Rosa
<input type="radio" name="color" value="red" checked="checked"/>Rosso
<input type="radio" name="color" value="purple"/>Viola
</form>
l’attributo checked pre selezionerà il valore corrispondete
Checkboxes
Nel caso vogliamo ottenere un’informazione rappresentata da una scelta multipla useremo i checkboxes
<form action="" method="POST">
<p>Il tuo linguaggio/i di programmazione preferito</p>
<input type="checkbox" name="cod_lang" value="Java"/>Java
<input type="checkbox" name="cod_lang" value="Python" checked="checked"/>Python
<input type="checkbox" name="cod_lang" value="C"/>C
<input type="checkbox" name="cod_lang" value="PHP"/>PHP
<input type="checkbox" name="cod_lang" value="C++"/>C++
</form>
Drop-dow list box
<select name="devices">
<option value="tablet">Tablet</option>
<option value="pc">pc</option>
<option value="smartphone">Smartphone</option>
</select>

Inviare le informazioni
<input type="file" name="user-song" /><br/>
<input type="submit" value="Upload" />
Premendo sul bottone Scegli file si aprirà il file chooser del proprio sistema operativo

Nota: Il tag <input type=”submit”> va implementato in ogni form, è il pulsante che triggera l’invio dei dati al server.
Image button
<input type="image" src="img/btn_like.jpg"
width="80" height="20" />
Il valore dell ‘attributo src deve corrispondere al percorso dell’immagine che avete scelto
I tipi di input
Il tag input grazie all’attributo type può automaticamente renderizzare un aspetto diverso e funzionale al tipo di dato che verrà scelto e inoltre da mobile verrà selezionata la tastiera virtuale migliore.
Esempio: se il type è number verrà attivata solo la tastiera numerica.
Di seguito tutti i type disponibili:
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">