Quale attributo del form html5 dovrebbe essere usato per un codice postale?

"Should" è una parola forte, ma in realtà c'è una dichiarazione di classe "dovrebbe" su problemi come questo. HTML5 CR dice di input type=number : 

Nota: Lo stato type = number non è appropriato per l'input che si presenta composto solo da numeri ma non è strettamente parlando a numero. Ad esempio, sarebbe inappropriato per i numeri delle carte di credito o codici postali statunitensi. Un modo semplice per determinare se utilizzare type = numero è da considerare se avrebbe senso per l'input controllo per avere un'interfaccia spinbox (ad esempio con frecce "su" e "giù" ).

Ciò significa che l'unico elemento fattibile per lo scopo è input type=text, quando si usano costrutti built-in. Puoi utilizzare l'attributo maxlength per impostare il numero massimo di caratteri (funziona su tutti i browser) e inoltre un attributo pattern che specifica anche i caratteri e le combinazioni consentiti; il suo valore dipende naturalmente dal/i tipo/i di codice da utilizzare. Per gli indirizzi postali internazionali, probabilmente non dovresti usare pattern o anche maxlength, poiché i formati variano.

Se hai utenti internazionali, vuoi consentire l'alfanumerico tramite type = "text"

Esempio: i codici postali del Regno Unito sono formattati come AA9A 9AA 

9 = qualsiasi numero 

A = qualsiasi lettera 

Per consentire Zip + 4:

<input type="text" placeholder="Zip Code" title="Please enter a Zip Code" pattern="^\s*?\d{5}(?:[-\s]\d{4})?\s*?$">

Per essere amichevole con l'utente, questo permette anche spazi bianchi prima/dopo la stringa, che lo sviluppatore dovrà tagliare sul lato server.

<input type="tel" pattern="[0-9]*" placeholder="Zip Code" max="99999" />

Digitare set tel per mostrare il tastierino numerico, impostare su ecc. I valori 0-9 e max impostati per evitare valori oltre i codici postali statunitensi a 7 cifre.

"Migliore" è soggettivo/contestuale. Ma dal punto di vista dell'usabilità, Zach Leatherman ha studiato gli input numerici nel 2016 e ha indirizzato specificamente l'input di Zip.

L'obiettivo era di far apparire "tastiere numeriche" sui dispositivi mobili. Questo può sembrare insignificante, ma facilitare l'inserimento di moduli di verifica dell'e-commerce è un obiettivo importante.

Sembra che un giorno l'attributo inputmode="numeric" sarà appropriato per gli input Zip. Ma per ora, solo Chrome/Android lo supporta (Firefox lo ha dietro una bandiera).

Zach ha sviluppato una piccola libreria chiamata input numerico come parte del suo pacchetto formcore che implementerà il miglior caso possibile per qualunque browser venga utilizzato.

Tieni presente che la libreria ha un paio d'anni e che il comportamento del browser potrebbe essere cambiato da allora.

Ci sono varie opzioni dal mio POV, ma penso che il migliore sia già dato da Md Johorul Islam: l'attributo pattern.

Le opzioni:

• Utilizzare un'espressione regolare (il modello attribute);
• Utilizzare un controllo maschera personalizzato (jQuery), come maschera jQuery ;
• Per le piattaforme in cui questo non è supportato, utilizzare type=text con un maxlength.

Nota: nonostante queste opzioni: convalidare sempre il lato server!

Puoi usare entrambi e il modulo funzionerà. Tuttavia, potrebbe essere un'idea migliore utilizzare il numero perché, ad esempio, i dispositivi mobili invocano un layout di tastiera diverso, con numeri e caratteri di supporto invece della tastiera alfanum completa.

Ma se pensi che impostare un tipo piuttosto che un altro offrirà un livello più alto di sicurezza, ti sbagli. Indipendentemente dal tipo che hai inserito, ti offrirà la sicurezza no. Ogni input di modulo deve essere controllato anche sul server - ecco dove avviene il vero controllo di sicurezza. Il controllo che fai nel browser, è più di una cosa UI/UX.

Ecco un bell'articolo sui diversi tipi di input: http://html5doctor.com/html5-forms-input-types/