# Form HTML: come creare moduli per il tuo sito web

I form (o moduli) HTML ti consentono di comunicare in modo semplice e diretto con i visitatori e le visitatrici del tuo sito. Usando vari elementi e attributi puoi adattare i moduli alle tue esigenze.

## Cos’è un modulo HTML?

I form HTML sono **moduli interattivi** attraverso i quali i visitatori e le visitatrici del tuo sito web possono inviarti dati. I dati inseriti vengono inviati al relativo server web per l’elaborazione. Per integrare questa forma di interazione nei tuoi documenti [HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/cose-lhtml/) hai bisogno del tag HTML `<form>`. Questo [tag HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/tag-html/) può essere adattato a seconda dello scopo di utilizzo mediante diversi elementi e attributi. Si possono usare **vari tipi di input** come testo, numeri, e-mail, password, pulsanti e caselle di controllo.

Se dal tuo sito web acquisisci informazioni personali attraverso un modulo HTML, devi indicarlo esplicitamente nella tua [informativa sulla privacy](https://www.ionos.it/digitalguide/siti-web/diritto-informatico/linformativa-sulla-privacy-aumenta-la-fiducia-degli-utenti/) e assicurare che i dati siano trasmessi con una crittografia SSL/TLS.

## Per cosa si usa l’elemento `<form>`?

Il tag form in HTML ti offre tantissime opzioni di input, puoi pertanto usarlo per svariati scopi, ad esempio:

- **Moduli di contatto per richieste o ordini**
- **Moduli di iscrizione per un account o a una newsletter**
- **Funzioni di feedback**
- **Sondaggi**
- **Moduli per ticket di assistenza e di supporto**
- **Dati di accesso ad aree riservate del sito**

In teoria, con un modulo HTML è possibile gestire pressoché qualsiasi forma di interazione tra i visitatori o le visitatrici e un sito internet.

## La sintassi di `<form>` in HTML

I moduli HTML iniziano con un tag `<form>` HTML di apertura e finiscono con un tag `</form>` di chiusura. All’interno dei due tag possono essere inseriti vari altri elementi e attributi, che ti presentiamo più avanti in questo articolo. La sintassi generale dei moduli si presenta come segue:

```html
<form> Elementi </form>
```

## Quali sono gli elementi disponibili per un modulo HTML?

Ci sono vari [elementi HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/elemento-html/) che ti consentono di adattare un modulo HTML alle tue esigenze. Te li presentiamo brevemente nella tabella che segue:

<table>
  <thead>
    <tr>
      <th>Elemento HTML</th>
      <th>Descrizione</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`<button>`</td>
      <td>Un semplice pulsante cliccabile</td>
    </tr>
    <tr>
      <td>`<datalist>`</td>
      <td>Le opzioni per l’elemento `<input>` sotto forma di elenco a discesa</td>
    </tr>
    <tr>
      <td>`<fieldset>`</td>
      <td>Raggruppa dati correlati</td>
    </tr>
    <tr>
      <td>`<input>`</td>
      <td>Raccolta di dati; modificata dall’attributo `type`</td>
    </tr>
    <tr>
      <td>`<label>`</td>
      <td>[HTML label](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/html-label/) crea una didascalia visibile</td>
    </tr>
    <tr>
      <td>`<legend>`</td>
      <td>Nome o titolo del tag `<fieldset>`</td>
    </tr>
    <tr>
      <td>`<optgroup>`</td>
      <td>Raggruppa elementi `<option>` all’interno di `<select>`</td>
    </tr>
    <tr>
      <td>`<option>`</td>
      <td>Indica la possibilità di selezione per `<datalist>` o `<select>`</td>
    </tr>
    <tr>
      <td>`<output>`</td>
      <td>Indica il risultato di un calcolo o di uno script</td>
    </tr>
    <tr>
      <td>`<select>`</td>
      <td>Crea un elenco a discesa</td>
    </tr>
    <tr>
      <td>`<textarea>`</td>
      <td>Definisce un campo di testo con più righe</td>
    </tr>
  </tbody>
</table>

## Gli attributi più importanti per i form HTML

Esistono molti [attributi HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/attributi-html/) per aggiungere funzioni a un modulo. Tra gli attributi più importanti troviamo:

- `action`: indica l’[URL](https://www.ionos.it/digitalguide/server/know-how/url-che-cose-uno-uniform-resource-locator/) a cui inviare i dati del modulo
- `autocomplete`: segnala al browser se un campo di input deve essere compilato automaticamente
- `enctype`: determina come vengono codificati i dati indirizzati al server
- `method`: definisce se i dati devono essere inviati con il metodo `GET` o `POST`
- `target`: definisce dove deve essere aperto un documento collegato
- `name`: assegna al modulo un nome utilizzabile in JavaScript per accedere al modulo
- `accept-charset`: determina la codifica dei caratteri da usare per inviare i dati del modulo.

## Form HTML: esempi

Di seguito ti mostriamo nel dettaglio come funzionano i form HTML servendoci di due esempi. Per prima cosa creiamo un modulo semplice in cui i visitatori e le visitatrici possono **inserire nome e cognome** e inviare i dati. Il codice si presenta come segue:

```html

<html>
<body>
<h2>Esempio di modulo HTML</h2>
<form action="/action_page.php">
<label for="nome">Nome:</label><br>
<input type="text" id="nome" name="nome" value="Pietro"><br>
<label for="cognome">Cognome:</label><br>
<input type="text" id="cognome" name="cognome" value="Rossi"><br><br>
<input type="submit" value="Invia">
</form> 
<p>Facendo clic su "Invia" i dati vengono trasmessi a una pagina chiamata "/action_page.php".</p>
</body>
</html>
```

Nel sito web, il modulo adatto al codice si presenta come segue:

[![Immagine: Un esempio semplice di modulo HTML](https://www.ionos.it/digitalguide/fileadmin/_processed_/4/f/csm_richiesta-nome-modulo-html_e39f368a89.webp "Un esempio semplice di modulo HTML")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/richiesta-nome-modulo-html.png) Tramite i campi di input, nel modulo di esempio gli utenti possono inserire nome e cognome prima di trasmettere questi dati alla pagina prevista con “Invia”. In un altro esempio di form HTML utilizziamo i tag `<select>`, `<option>` e `<optgroup>` per creare un campo modulo in cui gli utenti possono selezionare diverse città da un elenco a discesa:

```html

<html>
<head>
<title>Esempio di modulo HTML</title>
</head>
<body>
<label for="città">Città:</label>
<select id="città">
<optgroup label="Italia">
<option value="roma">Roma</option>
<option value="milano">Milano</option>
</optgroup>
<optgroup label="Francia">
<option value="parigi">Parigi</option>
<option value="marsiglia">Marsiglia</option>
</optgroup>
<optgroup label="Inghilterra">
<option value="londra">Londra</option>
</optgroup>
</select>
</body>
</html>
```


This is a markdown version of: [https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/form-html/](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/form-html/) for AI/LLM consumption.