入力フィールドのサイズ属性が守られていない
撮影 W3Schoolsから直接 ：
定義と使用法size属性は、入力フィールドの幅を指定します。
ために
<input type="text">および<input type="password">、サイズ属性は、表示される文字数を定義します。他のすべての入力タイプの場合、サイズは入力フィールドの幅をピクセル単位で定義します。
そう..
それが本当なら、なぜ私のフィールドは<input type="text" size="2"/> 5つのCAPTIAL MMMMMを表示するのに十分な幅ですか？
同じ「誤った」情報がHTML4仕様、HTML5仕様、Sitepoint、Mozilla Developer Network、およびMicrosoftのMSDNライブラリで指定されています。したがって、それはW3Schoolsのせいではありません。
いずれにせよ、仕様ではsize属性は表示される文字数である必要があると述べていますが、ほとんどのWebブラウザーはem単位の数、つまり大文字のMの文字の幅を使用することに決めています。
幅をピクセル単位または任意の単位で正確に指定するには、CSSのwidthプロパティを使用します。
更新された質問に答えるには、CSSスタイル設定によってテキストボックスに適用されるデフォルトのフォントサイズでの大文字のMの幅ですが、通常、テキストボックス内のテキストのフォントサイズは小さくなります。
ボックス内に一定数の文字を収めたいですか？固定幅フォントに切り替える必要があります。
問題は、size = x属性がピクセル単位ではないことです...むしろ、<input />要素がxを保持するために必要な非常に近似サイズを示します文字。したがって、たとえば、<input size=2 />は、2文字を保持できる入力ボックスを表示する必要があります。
残念ながら、これはフォントごとに異なります（特に可変幅フォント）。したがって、size属性を2に設定すると、実際には入力ボックスが5などのサイズでレンダリングされることがわかります。モノスペースフォントを使用する場合、ただし、size=2は、正確に2文字を保持できるテキストフィールドをレンダリングする必要があります...または少なくとも近づきます。
ただし、<input>要素の幅をピクセル、emsなどで設定するには、代わりにwidth CSSプロパティを使用してみてください。
<input type="text" style="width:20px" />
上記の例では、ボーダーやパディングを除いて、入力幅をちょうど20ピクセル幅にします。
それは不可能なので、文字通りそれを取ることはできません。
要素の幅はsize属性と使用されるフォントサイズに基づいていますが、これは不可能であるため、その文字数に正確に適合しません。
すべての文字の幅が同じではないため、llllはsize="4"を使用した入力に簡単に収まりますが、mmmmはそうではありません。
また、追加のスペースがいくつかあるため、size="2"を使用した入力は、size="1"を使用した入力の2倍の幅にはなりません。
平均文字幅として何が使用されるかは、ブラウザーによって異なる場合があります。私はFirefoxでテストしましたが、完全に一致する文字は見つかりませんでしたが、文字*はその平均的な幅にかなり一致しています。
その答えは、固定幅フォントを使用しない限り、ブラウザは2文字の幅を正確に決定できないということです。あなたの2文字のフィールドは、おそらく2つの "m"が並んで収まると思います。
W3schoolsの正当性に関する限り、以下はW3Cからのものです。
size = cdata [CN]この属性は、ユーザーエージェントにコントロールの初期幅を通知します。 type属性の値が「text」または「password」の場合を除き、幅はピクセル単位で指定されます。その場合、その値は（整数）文字数を参照します。