{"id":164035,"date":"2024-10-01T09:00:00","date_gmt":"2024-10-01T07:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/input-html-tipi-campo-moduli\/"},"modified":"2024-10-01T09:00:00","modified_gmt":"2024-10-01T07:00:00","slug":"input-html-tipi-campo-moduli","status":"publish","type":"post","link":"https:\/\/gtechgroup.it\/blog\/input-html-tipi-campo-moduli\/","title":{"rendered":"Input HTML: Tutti i Tipi di Campo per i Moduli Web"},"content":{"rendered":"

Il tag <input><\/code> \u00e8 senza dubbio l’elemento pi\u00f9 versatile<\/strong> dell’intero HTML. Con oltre 20 tipi diversi disponibili, \u00e8 il componente fondamentale di qualsiasi modulo web. Ogni tipo di input modifica radicalmente l’aspetto e il comportamento del campo, dalla semplice casella di testo ai selettori di data e colore. In questo articolo esploreremo tutti i tipi di input disponibili, con esempi pratici e indicazioni su quando utilizzare ciascuno.<\/p>\n

Input di Testo: text, password, email, tel e url<\/h2>\n

I tipi di input testuali sono i pi\u00f9 comuni nei moduli web. Ogni tipo \u00e8 ottimizzato per un formato specifico di dato e, sui dispositivi mobili, attiva la tastiera pi\u00f9 appropriata<\/strong>.<\/p>\n

type=\"text\"<\/code> \u00e8 il tipo predefinito e crea un campo di testo generico a riga singola. Accetta qualsiasi carattere e non applica alcuna validazione specifica. \u00c8 il tipo da utilizzare quando nessun altro tipo specifico \u00e8 appropriato.<\/p>\n

type=\"password\"<\/code> funziona come un campo di testo ma nasconde i caratteri<\/strong> digitati, visualizzandoli come punti o asterischi. I browser moderni offrono spesso un’icona per mostrare\/nascondere la password. I gestori di password riconoscono automaticamente questo tipo di campo per la compilazione automatica.<\/p>\n

type=\"email\"<\/code> \u00e8 specifico per gli indirizzi email. Il browser valida automaticamente<\/strong> il formato dell’email (verifica la presenza di @ e un dominio). Su mobile, mostra una tastiera con il simbolo @ facilmente accessibile. L’attributo multiple<\/code> permette l’inserimento di pi\u00f9 indirizzi email separati da virgola.<\/p>\n

type=\"tel\"<\/code> \u00e8 dedicato ai numeri di telefono. Non applica validazione automatica (i formati telefonici variano troppo nel mondo), ma su mobile mostra il tastierino numerico<\/strong>, rendendo l’inserimento molto pi\u00f9 rapido. Per la validazione, si usa l’attributo pattern<\/code> con un’espressione regolare.<\/p>\n

type=\"url\"<\/code> \u00e8 progettato per gli URL. Valida automaticamente che il valore sia un URL ben formato (con protocollo). Su mobile, mostra una tastiera con tasti dedicati come “\/” e “.com”.<\/p>\n

Input Numerici: number e range<\/h2>\n

Il tipo type=\"number\"<\/code> crea un campo numerico con frecce incremento\/decremento<\/strong> (spinner). Accetta solo valori numerici e supporta gli attributi min<\/code>, max<\/code> e step<\/code> per definire l’intervallo e l’incremento validi. Su mobile, attiva il tastierino numerico.<\/p>\n

Attenzione: type=\"number\"<\/code> non \u00e8 sempre la scelta giusta per dati che contengono cifre. I numeri di carta di credito, i CAP e i numeri di telefono non sono valori numerici nel senso matematico (non si fanno operazioni aritmetiche su di essi). Per questi casi, \u00e8 preferibile usare type=\"text\"<\/code> con inputmode=\"numeric\"<\/code> e un attributo pattern<\/code> appropriato.<\/p>\n

Il tipo type=\"range\"<\/code> visualizza un cursore scorrevole<\/strong> (slider) per selezionare un valore all’interno di un intervallo definito. \u00c8 perfetto per impostazioni dove l’utente non ha bisogno di un valore esatto (volume, luminosit\u00e0, budget approssimativo). Come per number, supporta min<\/code>, max<\/code> e step<\/code>. Per mostrare il valore corrente all’utente, \u00e8 necessario un piccolo script JavaScript o l’elemento <output><\/code>.<\/p>\n

Input per Data e Ora: date, time, datetime-local, month, week<\/h2>\n

HTML5 ha introdotto una serie di tipi di input dedicati alla selezione di date e orari<\/strong>, eliminando la necessit\u00e0 di librerie JavaScript esterne come datepicker per molti casi d’uso.<\/p>\n

type=\"date\"<\/code> mostra un selettore di data<\/strong> nativo del browser con calendario. Il valore viene sempre salvato nel formato ISO YYYY-MM-DD<\/code>, indipendentemente dalla localizzazione visiva. Gli attributi min<\/code> e max<\/code> limitano l’intervallo di date selezionabili.<\/p>\n

type=\"time\"<\/code> visualizza un selettore per l’orario<\/strong>, con formato che varia in base al locale del sistema (12 o 24 ore). Il valore \u00e8 nel formato HH:MM<\/code> (o HH:MM:SS<\/code> con l’attributo step<\/code>).<\/p>\n

type=\"datetime-local\"<\/code> combina data e orario in un unico campo. Non include il fuso orario (per questo esiste l’attributo step<\/code> per specificare la granularit\u00e0). \u00c8 ideale per la prenotazione di appuntamenti o eventi.<\/p>\n

type=\"month\"<\/code> permette di selezionare un mese e anno<\/strong>, utile per date di scadenza di carte di credito o selezione di periodi. type=\"week\"<\/code> seleziona una settimana<\/strong> dell’anno, usato in contesti di pianificazione o reportistica settimanale.<\/p>\n

Input di Selezione: checkbox, radio, select e datalist<\/h2>\n

I campi di selezione permettono all’utente di scegliere<\/strong> tra opzioni predefinite.<\/p>\n

type=\"checkbox\"<\/code> crea una casella di controllo<\/strong> che pu\u00f2 essere attivata o disattivata. Viene utilizzata per accettazione di termini, preferenze multiple o qualsiasi campo booleano (s\u00ec\/no). Pi\u00f9 checkbox con lo stesso name<\/code> (ma value<\/code> diversi) permettono selezioni multiple.<\/p>\n

type=\"radio\"<\/code> crea un pulsante di opzione<\/strong>. I radio button con lo stesso attributo name<\/code> formano un gruppo in cui \u00e8 possibile selezionare una sola opzione<\/strong>. Sono ideali per domande a scelta singola come il genere, il metodo di pagamento o la fascia di prezzo.<\/p>\n

L’elemento <datalist><\/code>, pur non essendo un tipo di input, \u00e8 strettamente correlato. Si collega a un campo <input><\/code> tramite l’attributo list<\/code> e fornisce un elenco di suggerimenti<\/strong> durante la digitazione. A differenza del <select><\/code>, l’utente pu\u00f2 anche inserire un valore libero non presente nell’elenco. \u00c8 perfetto per campi con suggerimenti comuni ma che non devono limitare l’input (come la citt\u00e0 o la professione).<\/p>\n

Input Speciali: file, color, hidden e submit<\/h2>\n

type=\"file\"<\/code> permette all’utente di caricare file<\/strong> dal proprio dispositivo. L’attributo accept<\/code> limita i tipi di file selezionabili (ad esempio, accept=\"image\/*\"<\/code> per sole immagini, accept=\".pdf,.doc\"<\/code> per documenti specifici). L’attributo multiple<\/code> consente la selezione di pi\u00f9 file contemporaneamente. Ricorda che il form deve avere enctype=\"multipart\/form-data\"<\/code> per inviare correttamente i file.<\/p>\n

type=\"color\"<\/code> mostra un selettore di colore<\/strong> nativo del browser. Il valore \u00e8 un codice colore esadecimale nel formato #RRGGBB<\/code>. \u00c8 perfetto per applicazioni di personalizzazione (temi, configuratori di prodotto).<\/p>\n

type=\"hidden\"<\/code> crea un campo invisibile<\/strong> all’utente. Viene utilizzato per inviare dati aggiuntivi con il form, come token CSRF per la sicurezza, ID di riferimento o versioni del form. Il campo non viene visualizzato ma il suo valore viene incluso nell’invio del modulo.<\/p>\n

type=\"submit\"<\/code> crea un pulsante che invia il form<\/strong>. Tuttavia, come discusso nel nostro articolo sui form HTML<\/a>, \u00e8 preferibile usare il tag <button type=\"submit\"><\/code> per la maggiore flessibilit\u00e0 nel contenuto del pulsante.<\/p>\n

Attributi di Validazione e Usabilit\u00e0<\/h2>\n

Oltre al tipo, gli input supportano numerosi attributi<\/strong> che ne migliorano l’usabilit\u00e0 e la validazione:<\/p>\n

    \n
  • placeholder<\/code> \u2014 Testo di esempio visualizzato quando il campo \u00e8 vuoto. Non sostituisce mai la label.<\/li>\n
  • required<\/code> \u2014 Rende il campo obbligatorio, impedendo l’invio del form se \u00e8 vuoto.<\/li>\n
  • readonly<\/code> \u2014 Il campo \u00e8 visibile e il suo valore viene inviato con il form, ma l’utente non pu\u00f2 modificarlo.<\/li>\n
  • disabled<\/code> \u2014 Il campo \u00e8 disattivato: non \u00e8 modificabile e il suo valore non viene inviato con il form.<\/li>\n
  • autofocus<\/code> \u2014 Il campo riceve automaticamente il focus al caricamento della pagina. Usa con cautela: solo un campo per pagina.<\/li>\n
  • autocomplete<\/code> \u2014 Suggerisce al browser il tipo di dato per la compilazione automatica. Valori come name<\/code>, email<\/code>, street-address<\/code> aiutano l’utente a compilare i form rapidamente.<\/li>\n
  • inputmode<\/code> \u2014 Suggerisce il tipo di tastiera su mobile senza modificare la validazione. Valori: numeric<\/code>, decimal<\/code>, tel<\/code>, email<\/code>, url<\/code>, search<\/code>.<\/li>\n<\/ul>\n

    La conoscenza approfondita di tutti i tipi di input e dei loro attributi ti permette di creare moduli web professionali, accessibili e ottimizzati per ogni dispositivo. Scegliere il tipo di input corretto non \u00e8 solo una questione tecnica: migliora concretamente l’esperienza dell’utente e aumenta il tasso di completamento dei tuoi form.<\/p>\n

    Hai bisogno di aiuto con i moduli e i form<\/strong> del tuo sito web? G Tech Group<\/strong> offre servizi di sviluppo web professionale e consulenza tecnica. Contattaci a support@gtechgroup.it<\/strong> o via WhatsApp al 0465 84 62 45<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Il tag <input> \u00e8 senza dubbio l’elemento pi\u00f9 versatile dell’intero HTML. Con oltre 20 tipi diversi disponibili, \u00e8 il componente fondamentale di qualsiasi modulo web.…<\/p>\n","protected":false},"author":2,"featured_media":164215,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"1246","_seopress_titles_title":"Input HTML: Tutti i Tipi di Campo per Moduli Web %%sep%% %%sitename%%","_seopress_titles_desc":"Guida completa a tutti i tipi di input HTML: text, email, number, date, file, checkbox, radio e i nuovi tipi HTML5 per i moduli web.","_seopress_robots_index":"","footnotes":""},"categories":[1246],"tags":[787],"class_list":["post-164035","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","tag-sviluppo-web"],"_links":{"self":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/164035","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/comments?post=164035"}],"version-history":[{"count":0,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/164035\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media\/164215"}],"wp:attachment":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media?parent=164035"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/categories?post=164035"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/tags?post=164035"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}