HTMLの「maxlength」と「size」属性の違いは？
maxlength属性とsize属性の違いについて少し混乱しています。
<input type="text" name="telephone" maxlength="30" size="34">
maxlengthが入力データの制御に使用されることを知っています。では、両方の属性を同時に使用する理由は何ですか？
maxlength （max-lengthではない）属性は、入力文字列の最大長を文字単位で、より正確にはコード単位で指定します。ブラウザは、これ以上の文字の受け入れを拒否することにより、これを実施することが期待されています。ただし、これは簡単に上書きできるため、セキュリティ対策として機能することを意図したものではありません。むしろ、データの処理でこれ以上文字が受け入れられないことをユーザーに伝えます。これは、上限を設定する必要がある場合に役立ちます。データベースには一定の文字数だけ情報を保存できます。また、長さに論理的な制限がある場合（たとえば、データが米国の州の2文字のコードの場合、論理的な上限は2です。 ）。
したがって、maxlength属性は論理的であり、非視覚的なユーザーインターフェイスでも機能すると予想されます。入力フィールドの外観に影響を与えることを意図したものではありません。
対照的に、 size 属性は視覚的なレンダリング専用です。 「平均」文字の観点から、フィールドの表示幅を提案します。このあいまいな概念は仕様で明確にされておらず、ブラウザは一貫性なく実装しています。等幅フォントが使用されている場合に最適です。この属性は入力文字数を制限しませんが、使いやすさに影響します。たとえば、一度に10文字しか表示できないフィールドに30文字の文字列を入力することは困難です。フィールドの幅は、ユーザーへのシグナルでもあります。入力の予想最大幅を示します。
多くの場合、同じ値で両方の属性を使用するのが適切です。たとえば、フィールドが5桁の郵便番号の場合、size=5 maxlength=5が適切です。特にfont-family: monospaceも設定すると、実際の幅は多かれ少なかれ正確に5桁になります。
ただし、値は異なる場合があります。たとえば、郵便住所の行を要求する場合、通常は行に十分なのでsize=30を設定できますが、データベースまたはデータ処理によって設定された制限に対応する場合はmaxlength=80また、そのような長い行を割り当てない特別な理由はありません。
size属性は、視覚的なレンダリングのみを処理するため、原則としてCSSに置き換えることができます。ただし、通常、幅は文字で設定するのが最適であり、CSSの文字の平均幅に対して普遍的にサポートされている単位はありません。新しいchユニットが近づいていますが、まったく同じではなく、古いブラウザーではサポートされていません。
max-lengthは、画面に表示されるフィールドの大きさに関係なく、入力フィールドに入力できる文字数を示すために使用されます。 size属性は、画面上のフィールドの幅を決定します。
たとえば、私は通常、メールアドレスを入力するなど、かなり長い場合にこれを使用しますが、美的な理由（Webデザインの良さ）のために、入力フィールドを特定の長さにしたいです。
<input type="text" name="email" maxlength="50" size="20">
ユーザーが電子メールアドレスに20文字を超える文字を入力すると、入力時にフィールドがスクロールし始めます。
最大長とは、入力文字列の最大長を指します。サイズは、入力自体のサイズを指します。