Elementi di form di diversi tipi

7.1 Campo di testo

HTML offre vari tipi di input per elementi di form che consentono agli utenti di inserire dati in diversi formati, come testo, email, date e molto altro. Diamo un'occhiata dettagliata ai diversi tipi di input e al loro utilizzo.

L'elemento <input type="text"> viene utilizzato per inserire testo su una riga. È il tipo di input più basilare e comunemente usato.

Esempio di utilizzo:

    
      <label for="name">Nome:</label>
      <input type="text" id="name" name="name">
    
  

Attributi

• maxlength: limita il numero massimo di caratteri
• placeholder: testo segnaposto che appare all'interno del campo di input finché l'utente non inizia a digitare
• required: indica che il campo è obbligatorio

Esempio con attributi:

    
      <label for="username">Nome utente:</label>
      <input type="text" id="username" name="username" maxlength="20" placeholder="Inserisci il nome utente" required>
    
  

7.2 Campi per numeri

L'elemento <input type="number"> viene utilizzato per inserire valori numerici. Limita l'input solo ai numeri e può includere frecce per aumentare o diminuire il valore.

Esempio di utilizzo:

    
      <label for="quantity">Quantità:</label>
      <input type="number" id="quantity" name="quantity" min="1" max="10" step="1" value="1">
    
  

Attributi

• min: imposta il valore minimo consentito
• max: imposta il valore massimo consentito
• step: definisce l'incremento del valore
• value: imposta il valore iniziale

7.3 Campi per email

L'elemento <input type="email"> è destinato all'inserimento di indirizzi email. Controlla se il testo inserito corrisponde al formato di un indirizzo email.

Esempio di utilizzo:

    
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" placeholder="example@example.com">
    
  

Attributi

• multiple: consente di inserire più indirizzi email separati da virgole
• pattern: imposta un'espressione regolare per controlli aggiuntivi sui dati inseriti

Esempio con attributi:

    
      <label for="emails">Indirizzi email (separati da virgole):</label>
      <input type="email" id="emails" name="emails" multiple placeholder="example1@example.com, example2@example.com">
    
  

7.4 Campi per numeri di telefono

L'elemento <input type="tel"> viene utilizzato per inserire numeri di telefono. Non controlla il formato del numero, ma permette di configurare una maschera di input tramite l'attributo pattern.

Esempio di utilizzo:

    
      <label for="phone">Telefono:</label>
      <input type="tel" id="phone" name="phone" placeholder="+1 (XXX) XXX-XX-XX">
    
  

Attributi

pattern: imposta un'espressione regolare per controlli sul formato del numero inserito.

Esempio con attributi:

    
      <label for="phone">Telefono:</label>
      <input type="tel" id="phone" name="phone" pattern="[+][0-9]{1,3} [0-9]{1,4} [0-9]{3,4} [0-9]{4}" placeholder="+1 123 456 7890">
    
  

7.5 Campi per date

L'elemento <input type="date"> viene utilizzato per inserire una data. Nei browser supportati, appare un widget calendario per facilitare la selezione della data.

Esempio di utilizzo:

    
      <label for="birthday">Data di nascita:</label>
      <input type="date" id="birthday" name="birthday">
    
  

Attributi

• min: imposta la data minima consentita
• max: imposta la data massima consentita

Esempio con attributi:

    
      <label for="appointment">Data dell'appuntamento:</label>
      <input type="date" id="appointment" name="appointment" min="2023-01-01" max="2024-12-31">
    
  

7.6 Campi per inserire l'ora

L'elemento <input type="time"> viene utilizzato per inserire l'ora. Nei browser supportati appare un widget per selezionare l'ora.

Esempio di utilizzo:

    
      <label for="meeting_time">Ora dell'incontro:</label>
      <input type="time" id="meeting_time" name="meeting_time">
    
  

Attributi

• min: imposta l'ora minima consentita
• max: imposta l'ora massima consentita
• step: definisce l'incremento dell'ora

Esempio con attributi:

    
      <label for="alarm">Sveglia:</label>
      <input type="time" id="alarm" name="alarm" min="06:00" max="22:00" step="300">
    
  

7.7 Campi per inserire URL

L'elemento <input type="url"> viene utilizzato per inserire indirizzi web (URL). Controlla se il testo inserito corrisponde al formato di un URL.

Esempio di utilizzo:

    
      <label for="website">Sito web:</label>
      <input type="url" id="website" name="website" placeholder="https://example.com">
    
  

Attributi

pattern: imposta un'espressione regolare per controlli aggiuntivi sui dati inseriti.

Esempio con attributi:

    
      <label for="personal_website">Sito web personale:</label>
      <input type="url" id="personal_website" name="personal_website" pattern="https://.*" placeholder="https://example.com">
    
  

7.8 Campi per inserire password

L'elemento <input type="password"> viene utilizzato per inserire password. I dati inseriti vengono nascosti, sostituiti da simboli (ad esempio, asterischi o punti).

Esempio di utilizzo:

    
      <label for="password">Password:</label>
      <input type="password" id="password" name="password">
    
  

Attributi

• maxlength: limita il numero massimo di caratteri
• placeholder: testo segnaposto
• required: indica che il campo è obbligatorio

Esempio con attributi:

    
      <label for="new-password">Nuova password:</label>
      <input type="password" id="new_password" name="new_password" maxlength="20" placeholder="Inserisci password" required>
    
  

7.9 Campi per valori di intervallo

L'elemento <input type="range"> viene utilizzato per inserire valori entro un intervallo definito. Si presenta come un cursore.

Esempio di utilizzo:

    
      <label for="volume">Volume:</label>
      <input type="range" id="volume" name="volume">
    
  

Attributi

• min: imposta il valore minimo consentito
• max: imposta il valore massimo consentito
• step: definisce l'incremento del valore
• value: imposta il valore iniziale

Esempio con attributi:

    
      <label for="brightness">Luminosità:</label>
      <input type="range" id="brightness" name="brightness" min="0" max="100" step="1" value="75">
    
  

7.10 Campi per scegliere il colore

L'elemento <input type="color"> viene utilizzato per scegliere un colore. Nei browser supportati appare un widget per la selezione del colore.

Esempio di utilizzo:

    
      <label for="favcolor">Scegli il tuo colore preferito:</label>
      <input type="color" id="favcolor" name="favcolor" value="#ff0000">
    
  

Attributi

• value: imposta il colore iniziale.

7.11 Campi per ricerca

L'elemento <input type="search"> viene utilizzato per inserire query di ricerca. La maggior parte dei browser ha stili e funzionalità integrate per cancellare il testo inserito.

Esempio di utilizzo:

    
      <label for="search">Ricerca:</label>
      <input type="search" id="search" name="search" placeholder="Inserisci query di ricerca">