04. Tag di modulo

Tag di modulo

I tag di modulo in HTML sono utilizzati per creare moduli interattivi all'interno di una pagina web. I moduli consentono agli utenti di inserire, inviare e interagire con dati come campi di input, caselle di controllo, pulsanti e altro ancora. 

L'uso di questi tag normalmente prevede la presenza di moduli lato server, che possono essere realizzati utilizzando linguaggi di programmazione lato server come Python, Ruby, Java, PHP.

Lato client, invece, può essere vantaggioso l'utilizzo di JavaScript per effettuare controlli più sofisticati sull'input.

FORM

<form> </form>

I tag <form> e </form> definiscono un elemento HTML che viene utilizzato per creare un modulo per la raccolta di dati da parte dell'utente. Il tag form può contenere una varietà di elementi di input, come campi di testo, caselle di controllo, pulsanti radio e menu a discesa.

Il tag form ha i seguenti attributi principali:

• action: specifica l'URL del modulo lato server al quale vengono inviati i dati del modulo.

• method: specifica il metodo HTTP utilizzato per inviare i dati del modulo. I metodi HTTP più comuni sono GET e POST.

• enctype: specifica il tipo di dati inviati dal modulo. I tipi di dati più comuni sono application/x-www-form-urlencoded e multipart/form-data.

Esempio:

<form action="form.py" method="post">

    <input type="text" name="nome" placeholder="Inserisci il tuo nome">

    <input type="submit" value="Invia">

</form>

INPUT

<input>

Il tag input è un elemento HTML che viene utilizzato per creare un campo di input per la raccolta di dati da parte dell'utente. Il tag input può essere utilizzato per raccogliere una varietà di tipi di dati, come testo, numeri, date, email, ecc.

Il tag input ha i seguenti attributi principali:

• type: specifica il tipo di dati che vengono raccolti dal campo di input. I tipi di dati più comuni sono text, number, date, email, ecc.

• name: specifica il nome del campo di input. Il nome del campo di input viene utilizzato dal server per identificare il valore del campo di input.

• value: specifica il valore predefinito del campo di input.

• placeholder: specifica un testo di suggerimento che viene visualizzato nel campo di input.

Esempio

<input type="text" name="nome" placeholder="Inserisci il tuo nome" size="20" maxlength="100">

SELECT

<select> </select>

I tag <select> e </select> definiscono un elemento HTML che viene utilizzato per creare un menu a discesa per la raccolta di dati da parte dell'utente. Il tag select può essere utilizzato per raccogliere una varietà di tipi di dati, come testo, numeri, date, e-mail, ecc.

Il tag select ha i seguenti attributi principali:

• • name: specifica il nome del menu a discesa. Il nome del menu a discesa viene utilizzato dal server per identificare il valore del menu a discesa.

  • multiple: specifica se l'utente può selezionare più di un'opzione.

  • size: specifica il numero di opzioni che vengono visualizzate nella finestra a discesa.

Esempio:

<select name="lingua">

    <option value="italiano">Italiano</option>

    <option value="inglese">Inglese</option>

    <option value="francese">Francese</option>

</select>

TEXTAREA

<textarea> </textarea>

il tag textarea è un elemento HTML che viene utilizzato per creare un'area di testo multiriga. Le aree di testo multiriga sono utili per raccogliere una quantità significativa di testo dall'utente, ad esempio un commento o una recensione.

Il tag textarea ha i seguenti attributi principali:

• name: specifica il nome dell'area di testo. Il nome dell'area di testo viene utilizzato dal server per identificare il valore dell'area di testo.

• cols: specifica la larghezza dell'area di testo, in numero di caratteri.

• rows: specifica l'altezza dell'area di testo, in numero di righe.

• placeholder: specifica un testo di suggerimento che viene visualizzato nell'area di testo.

Esempio:

<textarea name="commento" cols="50" rows="10" placeholder="Inserisci il tuo commento"></textarea>

BUTTON

<button> </button> 

Il tag button è un elemento HTML che viene utilizzato per creare un pulsante. I pulsanti possono essere utilizzati per eseguire una varietà di azioni, come inviare un modulo, aprire una nuova pagina o eseguire un comando.

Il tag button ha i seguenti attributi principali:

• • type: specifica il tipo di pulsante. I tipi di pulsante più comuni sono submit, reset e button.

  • name: specifica il nome del pulsante. Il nome del pulsante viene utilizzato dal server per identificare il pulsante.

  • value: specifica il valore del pulsante. Il valore del pulsante viene inviato al server quando l'utente fa clic sul pulsante.

  • onclick: specifica un evento che viene eseguito quando l'utente fa clic sul pulsante.

Esempio:

<button type="submit" name="submit" value="Invia">Invia</button>

Pagina di esempio

<!DOCTYPE html>

<html lang="it">

    <head>

        <meta charset="UTF-8">

        <title>Form locale</title>

    </head>

    <body>

        <h2>ESEMPIO DI FORM PER LA RACCOLTA DI DATI</h2>

        <form action="" method="post" id="myForm">

            <div>

                <label for="nome">Nome:</label>

                <input type="text" name="nome" id="nome" placeholder="Inserisci il tuo nome">

            </div>

            <div>

                <label for="lingua">Lingua:</label>

                <select name="lingua" id="lingua">

                    <option value="italiano">Italiano</option>

                    <option value="inglese">Inglese</option>

                    <option value="francese">Francese</option>

                </select>

                </div>

                <div>

                    <label for="commento">Commento:<br></label>

                    <textarea name="commento" id="commento" cols="50" rows="10" 

                     placeholder="Inserisci il tuo commento"></textarea>

                </div>

                <div>

                    <button type="submit" value="Invia">Invia</button>

                </div>

        </form>

        <p id="myP"></p>

    </body>

</html>

Nota:

La pagina di esempio non invia realmente i dati inseriti nel form perché non è stato inserito un URL per il modulo lato server in corrispondenza dell'attributo action. 

Sito:  7ecnologie

Sezione: 18. HTML & CSS

Capitolo: 04. Tag HTML

Paragrafo: 04. Tag di modulo

Indice dei capitoli: 00. Risorse - 01. Ambiente di sviluppo - 02. HTML: introduzione - 03. Struttura di un documento HTML - 04. Tag HTML - 05. CSS: introduzione - 06. Selettori CSS - 07. Regole CSS - 08. Regole CSS speciali - 09. Esempi - 10. Tutorial - 98. Esercizi 

Indice dei paragrafi: 01. Tag di struttura - 02. Tag di formattazione del testo - 03. Tag multimediali e di collegamento - 04. Tag di modulo - 05. Tag di stile