web-dev-qa-db-ja.com

郵便番号にはどのhtml5フォーム属性を使用する必要がありますか？

文字数に制限のある「テキスト」属性を使用することをお勧めしますか、または郵便番号の入力で数値属性を使用できますか？.

Html5のフォームを使用して、さまざまな属性をすべて回避しようとしています。乾杯

htmlhtml5formsvalidation
25
homer5677

これを試すことができます

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

「Should」は強力な言葉ですが、実際にはこのような問題に関する「should」のクラスステートメントがあります。 HTML5 CRは input type=number について述べています：

注：type = number状態は、たまたま数字だけで構成されているが、厳密に言えば数字ではない入力には適していません。たとえば、クレジットカード番号や米国の郵便番号には不適切です。 type = numberを使用するかどうかを決定する簡単な方法は、入力コントロールがスピンボックスインターフェイスを持つことが理にかなっているかどうかを検討することです（たとえば、「上」および「下」矢印を使用）。

これは、組み込みの構成要素を使用する場合、その目的のために実行可能な唯一の要素がinput type=textであることを意味します。 maxlength属性を使用して最大文字数（すべてのブラウザーで機能）を設定し、さらに許可された文字と組み合わせを指定するpattern属性を使用できます。その値は当然、使用する郵便番号のタイプに依存します。国際郵便住所の場合は、形式が異なるため、patternまたはmaxlengthを使用しないでください。

11
Jukka K. Korpela

国際ユーザーがいる場合は、type = "text"を使用して英数字を許可する必要があります。

例：英国の郵便番号はAA9A 9AAとしてフォーマットされています

9 =任意の数

A =任意の文字

5
Andrew M

Zip + 4を許可するには：

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

ユーザーにとって使いやすいように、これは、開発者がサーバーサイドをトリミングする必要がある文字列の前後の空白も許可します。

2
Satyen

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

Set telと入力して、テンキーを表示し、パターンを0〜9の値に設定し、maxを設定して、米国7桁の郵便番号を超える値を防止します。

1
Kevin N.

「ベスト」は主観的/文脈的です。しかし、使いやすさの観点からは、 ザック・レザーマンは2016年に数字っぽい入力を研究しました であり、具体的にはジップ入力に対処しました。

目標は、「ビッグナンバーキーボード」をモバイルデバイスに表示することでした。これは取るに足らないように思えるかもしれませんが、eコマースチェックアウトフォームでのフォーム入力の緩和は重要な目標です。

いつかinputmode="numeric"属性は、Zip入力に適しています。しかし今のところ、 Chrome/Androidのみがサポートしています （Firefoxはフラグの後ろにあります）。

Zachは formcore パッケージの一部として数値入力と呼ばれる小さなライブラリを開発しました。これは、使用されているブラウザに最適なケースを実装します。

ライブラリは数年前のものであり、ブラウザの動作はそれ以降変更されている可能性があります。

0
Michael Crenshaw

私のPOVにはさまざまなオプションがありますが、Md Johorul Islamによって既に最高のオプションが与えられていると思います：pattern属性。

オプション：

  • 正規表現（パターンattribute）を使用します。
  • jQuery mask ;などのカスタム（jQuery）マスクコントロールを使用します。
  • これがサポートされていないプラットフォームでは、type=textとmaxlength。

注：これらのオプションにもかかわらず、常にサーバー側を検証してください！

0
Patrick Hofman

どちらでも使用でき、フォームは機能します。ただし、たとえば、モバイルデバイスは別のキーボードレイアウトを呼び出すため、数字を使用することをお勧めします-完全な英数字キーボードの代わりに数字とヘルパー文字を使用します。

しかし、あるタイプを別のタイプに設定するとより高いレベルのセキュリティが提供されると考える場合、あなたは間違っています。どのタイプを入れても、noセキュリティが提供されます。すべてのフォーム入力もサーバー上でチェックする必要があります-そこで実際のセキュリティチェックが行われます。ブラウザで行うチェックは、UI/UXの問題です。

さまざまな入力タイプに関する素晴らしい記事を次に示します。 http://html5doctor.com/html5-forms-input-types/

0
Shomz