Unterschied zwischen dem Attribut “maxlength” und “size” in HTML?

Ich bin etwas verwirrt über den Unterschied zwischen den maxlength und die size Attribut.

<input type="text" name="telephone" maxlength="30" size="34">

ich weiß das maxlength wird verwendet, um die Eingabedaten zu kontrollieren. Was ist also der Grund, beide Attribute gleichzeitig zu verwenden?

Das maxlength (nicht max-length)-Attribut gibt die maximale Länge des Eingabestrings in Zeichen oder genauer gesagt in Codeeinheiten an. Es wird erwartet, dass der Browser dies erzwingt, indem er sich weigert, weitere Zeichen zu akzeptieren. Dies ist jedoch nicht als Sicherheitsmaßnahme gedacht, da es trivial überschrieben werden kann. Vielmehr teilt es dem Benutzer mit, dass bei der Verarbeitung der Daten keine Zeichen mehr akzeptiert werden. Dies ist nützlich, wenn Sie eine Obergrenze festlegen müssen, z. B. kann Ihre Datenbank nur eine feste Anzahl von Zeichen für einige Informationen speichern, und auch wenn es eine logische Begrenzung der Länge gibt (z. B. wenn die Daten ein Zwei-Buchstaben-Code sind für einen US-Bundesstaat hat es die logische Obergrenze von 2).

Das maxlength Das Attribut ist daher logisch, und es wird erwartet, dass es sogar in einer nicht-visuellen Benutzeroberfläche funktioniert. Es soll das optische Erscheinungsbild des Eingabefeldes in keiner Weise beeinflussen.

Das size Im Gegensatz dazu dient das Attribut nur der visuellen Wiedergabe. Es schlägt eine sichtbare Breite für das Feld in Bezug auf „durchschnittliche“ Zeichen vor. Dieses vage Konzept wurde nicht in Spezifikationen geklärt, und Browser implementieren es uneinheitlich. Es funktioniert am besten, wenn eine Monospace-Schriftart verwendet wird. Dieses Attribut schränkt die Anzahl der eingegebenen Zeichen nicht ein, wirkt sich jedoch auf die Benutzerfreundlichkeit aus: Es ist schwierig, beispielsweise eine 30 Zeichen lange Zeichenfolge in ein Feld einzugeben, in dem Sie nur 10 Zeichen gleichzeitig sehen können. Auch die Breite eines Feldes ist ein Signal an den Benutzer: Sie gibt die erwartete maximale Breite der Eingabe an.

Oft ist es sinnvoll, beide Attribute zu verwenden, oft mit dem gleichen Wert. Wenn das Feld beispielsweise für eine 5-stellige Postleitzahl ist, size=5 maxlength=5 geeignet ist, vor allem wenn man auch einstellt font-family: monospacesodass die tatsächliche Breite ziemlich genau fünf Stellen beträgt.

Die Werte können jedoch abweichen. Wenn Sie beispielsweise nach einer Zeile in einer Postanschrift fragen, können Sie festlegen size=30da dies normalerweise für eine Zeile ausreicht, aber maxlength=80wenn dies den Beschränkungen Ihrer Datenbank oder Datenverarbeitung entspricht und Sie keinen besonderen Grund haben, solche langen Zeilen nicht zuzulassen.

Das size Attribut kann grundsätzlich durch ersetzt werden CSS, da es sich nur um das visuelle Rendering handelt. Die Breite wird jedoch normalerweise am besten in Zeichen angegeben, und es gibt keine allgemein unterstützte Einheit für die durchschnittliche Breite eines Zeichens in CSS; das neue ch unit kommt dem nahe, ist aber nicht ganz dasselbe und wird von alten Browsern nicht unterstützt.

maxlength wird verwendet, um die Anzahl der Zeichen anzugeben, die in das Eingabefeld eingegeben werden können, unabhängig davon, wie groß die Felder auf dem Bildschirm erscheinen. Das size -Attribut bestimmt, wie breit das Feld auf dem Bildschirm sein wird.

Ich verwende dies zB im Allgemeinen für Dinge wie die Eingabe einer E-Mail-Adresse, wo sie ziemlich lang sein kann, aber aus ästhetischen Gründen (gutes Webdesign) möchten Sie, dass das Eingabefeld eine bestimmte Länge hat.

<input type="text" name="email" maxlength="50" size="20">

Sobald ein Benutzer mehr als 20 Zeichen für seine E-Mail-Adresse eingegeben hat, beginnt das Feld während der Eingabe zu scrollen.

Maximale Länge bezieht sich auf die maximal mögliche Länge der Eingabezeichenfolge. Größe bezieht sich auf die Größe der Eingabe selbst.

size Das Attribut kann verwendet werden, um die Größe des Eingabefelds zu ändern (wie breit das Feld auf dem Bildschirm ist). maxlength Mit dem Attribut kann eine maximale Zeichenanzahl für das Eingabefeld definiert werden.

size ist “wie groß” es auf dem Bildschirm sein sollte. maxlength ist die maximale Anzahl von Zeichen, die der Browser für die Eingabe in ein Feld zulassen sollte. Sie sind überhaupt nicht verwandt. Hättest du haben können size = 50 kajillion, max-length=1 wenn du ein sadistischer Seitengestalter werden wolltest.