0Pricing
HTML Academy · Lezione

Tipi di input: text, password, email, number e tel

Usare il tipo di input corretto per ogni campo dati

Tipi di input: text, password, email, number e tel è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

L'elemento input

L'elemento <input> crea diversi controlli del modulo. L'attributo type ne determina il tipo:

<input type="text">      <!-- single-line text -->
<input type="password"> <!-- masked text -->
<input type="email">    <!-- email address -->
<input type="number">   <!-- numeric -->
<input type="tel">      <!-- phone number -->

type=text

Il tipo di input predefinito: un campo di testo su una sola riga:

<label for="username">Username</label>
<input
  type="text"
  id="username"
  name="username"
  placeholder="e.g. jane_doe"
  maxlength="50"
  autocomplete="username"
>

type=password

L'input password oscura i caratteri mentre l'utente digita:

<label for="pwd">Password</label>
<input
  type="password"
  id="pwd"
  name="password"
  minlength="8"
  autocomplete="current-password"
  required
>
<!-- Browser may offer to save/fill the password -->
<!-- autocomplete="new-password" for registration forms -->

type=email

L'input email convalida il formato dell'indirizzo email su dispositivi mobili e desktop:

<label for="email">Email</label>
<input
  type="email"
  id="email"
  name="email"
  placeholder="you@example.com"
  autocomplete="email"
  required
>
<!-- Mobile: shows @ on keyboard -->
<!-- Browser validates basic email format on submit -->

type=number

L'input number accetta valori numerici con controlli per aumentarli o diminuirli:

<label for="qty">Quantity</label>
<input
  type="number"
  id="qty"
  name="quantity"
  min="1"
  max="100"
  step="1"
  value="1"
>
<!-- min, max, step control allowed values -->
<!-- Mobile: shows numeric keypad -->
<!-- Note: only integers with step=1; decimals need step="0.01" -->

type=tel

L'input tel accetta numeri di telefono senza convalidarne il formato:

<label for="phone">Phone number</label>
<input
  type="tel"
  id="phone"
  name="phone"
  placeholder="+1 (555) 555-0100"
  pattern="[+][0-9 ()-]{7,20}"
  autocomplete="tel"
>
<!-- Mobile: shows phone keypad -->
<!-- No built-in validation — phone formats vary globally -->
<!-- Use pattern attribute for format validation -->

L'attributo name è essenziale

L'attributo name consente al server di identificare ogni campo:

<form action="/search">
  <!-- Without name, the field is NOT sent with the form -->
  <input type="text" name="q" placeholder="Search">
  <button type="submit">Search</button>
</form>
<!-- Submits: /search?q=your+search+term -->
<!-- name="q" → the key in the submitted data -->

Placeholder e label a confronto

L'attributo placeholder fornisce un testo di esempio, ma non lo usi mai al posto di una label:

<!-- BAD: placeholder as label -->
<input type="text" placeholder="Enter your name">

<!-- GOOD: label + helpful placeholder -->
<label for="name">Full name</label>
<input type="text" id="name" name="name" placeholder="e.g. Jane Smith">
<!-- Placeholder disappears on typing — screen readers often skip it -->

value e defaultValue

Precompili gli input con l'attributo value:

<input type="text" name="country" value="United States">
<!-- Renders with 'United States' pre-filled -->

<input type="number" name="qty" value="1" min="1" max="10">
<!-- Default quantity of 1 -->

disabled e readonly

Due modi per rendere un input non modificabile:

<input type="text" value="Fixed value" readonly>
<!-- readonly: user can see and select text, but not edit it -->
<!-- Value IS submitted with the form -->

<input type="text" value="Disabled" disabled>
<!-- disabled: user cannot interact with it at all -->
<!-- Value is NOT submitted with the form -->
<!-- NOT in tab order -->

Valori di completamento automatico degli input

Valori specifici di autocomplete migliorano la precisione del completamento automatico del browser:

<input type="text" name="name" autocomplete="name">
<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">
<input type="text" name="street" autocomplete="address-line1">
<input type="text" name="city" autocomplete="address-level2">
<input type="text" name="zip" autocomplete="postal-code">
<input type="password" autocomplete="new-password">

Verifica rapida

Quale tipo di input dovrebbe usare per un campo con un numero di telefono?

Riepilogo: tipi di input

Tipi di input comuni:

  • type="text" — testo generico (predefinito)
  • type="password" — testo mascherato; usi autocomplete="new-password"
  • type="email" — email con il tasto @ sui dispositivi mobili
  • type="number" — valori numerici con min/max/step
  • type="tel" — numero di telefono con tastierino telefonico
  • Includa sempre name e il relativo <label>

Domande Frequenti

La lezione «Tipi di input: text, password, email, number e tel» è gratuita?

Sì — il testo completo di «Tipi di input: text, password, email, number e tel» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.

Cosa imparerò in «Tipi di input: text, password, email, number e tel»?

Usare il tipo di input corretto per ogni campo dati Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare HTML Academy?

Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Tipi di input: text, password, email, number e tel»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione HTML Academy?

Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. L’elemento form: action, method ed enctype
  2. Tipi di input: text, password, email, number e tel
  3. L’elemento label e l’accessibilità
  4. L’elemento button: submit, reset e button
← Torna a HTML Academy