risposta-alla-domanda-sullo-sviluppo-web-bd.com

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

È meglio usare un attributo 'testo' con un limite sul numero di caratteri, oppure posso usare un attributo numero in un input per un codice postale.

Sto solo cercando di capire tutti i diversi attributi con i moduli in html5 . Cheers

24
homer5677

Puoi provare questo

<Label>Zip Code</Label><input type="text" pattern="[0-9]{5}" title="Five digit Zip code" />
38
Md Johirul Islam

"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.

11
Jukka K. Korpela

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 

5
Andrew M

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.

2
Satyen

<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.

1
Kevin N.

"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.

0
mac9416

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!

0
Patrick Hofman

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/

0
Shomz