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:

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:

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:

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:

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:


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.