Casella di Testo in HTML – Creare un Campo di Testo in HTML con il Tag Input

Articolo originale: https://www.freecodecamp.org/news/text-box-in-html-the-input-field-html-tag/

In questo articolo imparerai come creare un campo di testo usando il tag input in HTML. Imparerai anche cosa sono i moduli web e otterrai una panoramica di come funzionano, poiché le caselle di testo sono una caratteristica fondamentale dei moduli.

Cominciamo!

Cosa sono i Moduli Web ?

I moduli sono un modo efficiente per raccogliere informazioni.

In molte occasioni potrebbe capitarti di compilare un modulo fisico, un documento stampato e fornire informazioni personali.

Per esempio, potresti compilare un modulo e consegnarlo a qualcuno quando stai iniziando un nuovo lavoro, o quando stai andando a fare un controllo medico, o quando sei in procinto di affittare/acquistare una casa – o in genere quando è necessario fornire delle informazioni.

Proprio come i moduli fisici, i moduli web sono un modo per ricevere e raccogliere input, informazioni e dati importanti da utenti e visitatori, ma utilizzando una combinazione di tecnologie web.

Un modulo web imita un modulo fisico contenendo spazi in cui gli utenti possono inserire le proprie informazioni.

I moduli web utilizzano una varietà di strumenti, o controlli del modulo, per raccogliere l'input dell'utente.

Un sito web può disporre di una casella di ricerca o di un campo di immissione del testo per l'immissione di una singola riga di testo. Ciò consente agli utenti di cercare qualcosa di specifico.

Un sito web può anche contenere un modulo di registrazione che consente agli utenti di iscriversi a una newsletter o ad altri aggiornamenti.

In questo caso, conterrebbe un campo di immissione del testo per l'inserimento del nome, del cognome e dell'indirizzo e-mail dell'utente.

Molti siti web dispongono anche di moduli di iscrizione/accesso quando si effettua un acquisto online, ad esempio, in cui gli utenti inseriscono il nome utente in un campo di testo e la password in un campo separato. Sebbene il campo della password sia anche un campo di testo, ogni carattere di testo è coperto da un punto nero per nascondere ciò che viene digitato.

Un sito web può anche avere un'area di testo più ampia per consentire agli utenti di inserire passaggi di testo più lunghi, utile per lasciare un commento sotto il post di un blog.

Molti moduli consentono inoltre all'utente di scegliere una particolare opzione tra una serie di alternative selezionando un pulsante di opzione.

I moduli web possono inoltre consentire all'utente di scegliere più di un'opzione selezionando/deselezionando una casella di spunta.

Infine, tutti i moduli hanno un pulsante di invio, per inviare i dati a un server dove verranno archiviati o elaborati.

Come Funzionano i Moduli Web

Internet è una grande rete globale che collega milioni di computer in tutto il mondo.

I computer che fanno parte della rete comunicano tra di loro inviando e ricevendo informazioni.

Questo avviene grazie all'architettura di richiesta/risposta client/server del web.

Il client, che in genere è un browser come Google Chrome, invia una richiesta a un server web.

Un server web è un componente hardware o software del computer che memorizza i file che compongono i siti web e li distribuisce ogni volta che riceve una richiesta.

La richiesta potrebbe essere quella di visualizzare un modulo che fa parte di una pagina web.

Il server restituisce i file che compongono il modulo web come risposta. Il browser quindi assembla i file e l'utente visualizza il modulo nel browser.

Questo ciclo di richiesta/risposta è strutturato da un protocollo, chiamato HTTP (che sta per HyperText Transfer Protocol).

Pertanto, quando si utilizza un modulo web, l'utente inserisce i dati richiesti dal modulo. Quindi, dopo la convalida lato client che controlla se tutti i campi obbligatori sono stati compilati e se i dati sono nel formato corretto, l'utente fa clic sul pulsante di invio.

I dati vengono quindi inviati al server in coppie nome-valore in una richiesta HTTP. Questo metodo di organizzazione delle informazioni in coppie nome-valore assicura che i dati corretti corrispondano all'elemento del modulo corretto.

Quindi viene utilizzato un linguaggio lato server come PHP, Ruby o Python per elaborare le informazioni e memorizzarle in un database per un uso successivo o il recupero.

Come Creare Moduli Web in HTML

Per creare un modulo in HTML, è necessario utilizzare l'elemento <form> utilizzato per raccogliere informazioni.

L'elemento <form> ha un tag di apertura <form> e un tag di chiusura </form>.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form>
        
    </form>
</body>
</html>

L'elemento <form> accetta due attributi:

• L'attributo action , che specifica l'URL in cui si desidera inviare ed elaborare i dati.
• L'attributo method che accetta come valore uno dei due verbi HTTP,  GET o POST. Se non è incluso alcun attributo method, per impostazione predefinita viene utilizzato il metodo GET.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">

    </form>
</body>
</html>

Tuttavia, questo da solo non raccoglie alcun input dell'utente.

Cosa è l'elemento input in HTML?

L'elemento <input> è più comunemente usato per raccogliere e recuperare i dati utente da un modulo web.

È dove gli utenti inseriscono i propri dati.

È annidato all'interno dell'elemento <form> ed è un elemento che si chiude automaticamente. Ciò significa che non richiede un tag di chiusura (i tag di chiusura hanno una barra, </>).

Si usa per creare diversi stili di campi di input, o controlli di input del modulo, per consentire agli utenti di inserire una varietà di informazioni diverse.

Crea campi di testo, campi e-mail, campi password, caselle di spunta, pulsanti di opzione, menu a tendina, pulsanti di invio, inoltre offre la possibilità di selezionare e caricare file e immagini dal computer dell'utente e molto altro.

Il modo per determinare il tipo di campo di input, o controllo di input del modulo, consiste nell'impostare l'attributo type e assegnargli un valore.

La sintassi generale di <input> è simile a questa:

<input type="value"> <!-- il valore dell'attributo type determina lo stile del campo di input -->

Ad esempio, per creare un campo che consenta agli utenti di caricare un file, l'elemento <input> avrà il seguente aspetto:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <input type="file">
    </form>
</body>
</html>

L'attributo type determina che tipo di dati può accettare l'elemento input.

Come Creare un Campo di Input di una Casella di Testo HTML

Il valore predefinito dell'attributo type di un input, quando non specificato è text. Quindi l'input di testo è lo stile di input più comune.

La riga <input type="text"> crea un campo di input di testo a riga singola, in cui l'utente può digitare qualsiasi input di testo.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter some text below:</p>
        <input type="text">
    </form>
</body>
</html>

Quando visualizzi la pagina nel browser, vedrai che è stato creato un campo di input di testo a riga singola:

Come Aggiungere Testo Segnaposto a un Campo di Testo

Il testo segnaposto, chiamato anche testo di riempimento, è un modo per richiedere e fornire un suggerimento agli utenti sul tipo di informazioni di cui hanno bisogno per compilare il modulo. Può anche offrire un valore predefinito prima che inizino a digitare.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter your first and last name:</p>
        <input type="text" placeholder="John">
        <input type="text" placeholder="Doe">
    </form>
</body>
</html>

Il codice qui sopra viene visualizzato così:

L'Importanza dell'Attributo name nei Campi di Testo

Quando si invia il modulo e questo viene trasmesso al server, il server deve distinguere e differenziare tra i diversi tipi di dati inviati che deve raccogliere.

Ad esempio, deve sapere qual è il nome utente, qual è la password e qual è l'indirizzo e-mail.

Ciò significa che ogni campo di testo necessita di un attributo name e di un valore per rendere più chiari i tipi di dati inviati.

Ad esempio, puoi utilizzare quanto segue per chiedere a qualcuno di inserire il proprio nome completo in un campo di testo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter your full name:</p>
        <input type="text" name="name" placeholder="John Doe">
    </form>
</body>
</html>

Supponiamo che l'utente inserisca il nome "John Bexley" nel campo di testo. Questo diventerà quindi il valore dell'attributo name.

Come accennato in precedenza, i dati nei moduli vengono inviati in coppie nome-valore. In questo caso, il server saprebbe che il nome (name) dell'utente è John Bexley, in particolare sarebbe name=John Bexley.

Per fare un altro esempio:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter your first  name:</p>
        <input type="text" name="first_name" placeholder="John">
        <p>Please enter your last  name:</p>
        <input type="text" name="last_name" placeholder="Doe">
    </form>
</body>
</html>

Il codice sopra ha due campi di testo separati in cui l'utente può inserire il proprio nome e cognome separatamente.

Se ha inserito "John" come nome, la coppia nome-valore inviata al server sarà first_name=John".

Se ha inserito "Bexley" come cognome, la coppia nome-valore inviata al server sarà last_name=Bexley.

Come Rendere Obbligatorie le Informazioni di Testo

Puoi fare in modo che determinati campi siano obbligatori e debbano essere compilati dagli utenti.

HTML5 ha introdotto la convalida lato client.

Questa è una funzione grazie alla quale viene visualizzato un messaggio se l'utente non ha compilato i campi richiesti o non ha inserito le informazioni correttamente. Significa anche che non sarà in grado di inviare il modulo.

Tutto quello che devi fare per abilitare questa funzione è aggiungere l'attributo required all'elemento <input>. Questo attributo non deve avere un valore.

Tieni a mente che quando aggiungi più attributi all'elemento <input>, non è necessario aggiungere gli elementi in un certo ordine.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter your first  and last name:</p>
        <input type="text" name="first_name" placeholder="John" required>
        <input type="text" name="last_name" placeholder="Doe" required>
        <button type="submit">Submit</button>  
    </form>
</body>
</html>

Guarda cosa succede se un utente non compila uno dei campi:

Apparirà un messaggio e l'utente non sarà in grado di inviare il modulo se i campi richiesti non sono stati compilati.

Come Impostare un Numero Minimo e Massimo di Caratteri in una Casella di Testo

È possibile specificare il numero minimo e massimo di caratteri che un utente può immettere in un campo di testo.

Per creare un numero minimo di caratteri, utilizzare l'attributo minlength.

Ad esempio, puoi impostarlo in modo che il nome utente sia lungo almeno tre caratteri:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter your username</p>
        <input type="text" name="username" minlength="3" required>
        <button type="submit">Submit</button>  
    </form>
</body>
</html>

L'utente non sarà in grado di inviare il modulo se il nome utente è più corto di tre caratteri:

Per limitare il numero di caratteri immessi da un utente in un campo di testo, utilizza l'attributo maxlength.

Un esempio di combinazione degli attributi minlength e maxlength potrebbe essere simile al seguente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter your username</p>
        <input type="text" name="username" minlength="3" maxlength="20" required>
        <button type="submit">Submit</button>  
    </form>
</body>
</html>

Nell'esempio qui sopra, il nome utente deve essere lungo almeno 3 caratteri e non più di 20 caratteri.

Come Etichettare i Controlli del Modulo con l'Elemento label

Finora ho utilizzato un elemento <p> per scrivere del testo prima di usare la casella di testo, in modo da dare un'indicazione all'utente sulla compilazione.

Ma questa non è una buona pratica e non è accessibile.

Ogni controllo del modulo, in questo caso ogni campo di testo, dovrebbe avere il proprio elemento <label>.

Ciò rende il modulo accessibile agli utenti ipovedenti che utilizzano tecnologie assistive come i lettori di schermo.

Un modo per usarlo è annidare qualsiasi testo introduttivo e <input type="text"> in un elemento <label> in questo modo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <label>
            Please enter your username
            <input type="text" name="username" minlength="3" maxlength="20" required>
        </label>
        <button type="submit">Submit</button>  
    </form>
</body>
</html>

Un altro modo per utilizzare <label> e ottenere lo stesso risultato è separarlo dall'elemento <input>.

In questo caso, l'attributo for deve essere aggiunto a <label> e l'attributo id aggiunto a <input>, per poterli associare tra loro.

Il valore di for sarà lo stesso di id.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <label for="username"> Please enter your username:</label>
            <input type="text" id="username" name="username" minlength="3" maxlength="20" required>
        <button type="submit">Submit</button>  
    </form>
</body>
</html>

In Conclusione

Riassumendo, per creare un campo di input di testo in HTML, è necessario almeno:

• Un elemento <input>, che in genere va all'interno di un elemento <form>.
• Impostare l'attributo type in modo che abbia il valore di text. Questo creerà un campo di input di testo a riga singola.
• Non dimenticare di aggiungere un attributo name. Questo identifica le informazioni per ogni controllo del modulo che viene creato e rende le cose più chiare per il server.

Per saperne di più su HTML e CSS, dai un'occhiata alla certificazione Responsive Web Design di freeCodeCamp, dove imparerai in modo interattivo mentre costruisci progetti divertenti lungo il percorso.

Grazie per la lettura e buona programmazione!