Eingabegröße gegen Breite

<input name="txtId" type="text" size="20" />

oder

<input name="txtId" type="text" style="width: 150px;" />

Welcher ist der optimale browserübergreifende Code?

Natürlich hängt es von den Anforderungen ab, aber ich bin gespannt, wie und auf welcher Grundlage Menschen entscheiden.

Sie können beide verwenden. Der sizeCSS- Stil überschreibt das Attribut in Browsern, die CSS unterstützen, und macht das Feld auf die richtige Breite. Für diejenigen, die dies nicht tun, wird auf die angegebene Anzahl von Zeichen zurückgegriffen.

Edit: Ich sollte erwähnt haben , dass das sizeAttribut keine genaue Methode der Dimensionierung ist: nach der HTML - Spezifikation , es sollte auf die Anzahl der Zeichen der aktuellen Schriftart die Eingabe sofort in der Lage , anzuzeigen beziehen.

Sofern es sich bei der angegebenen Schriftart nicht um eine Schriftart mit fester Breite / Monospace handelt, ist dies keine Garantie dafür, dass die angegebene Anzahl von Zeichen tatsächlich sichtbar ist. In den meisten Schriftarten haben unterschiedliche Zeichen unterschiedliche Breiten. Diese Frage hat einige gute Antworten zu diesem Thema.

Das folgende Snippet zeigt beide Ansätze.

@font-face {
    font-family: 'Diplomata';
    font-style: normal;
    font-weight: 400;
    src: local('Diplomata'), local('Diplomata-Regular'), url(https://fonts.gstatic.com/s/diplomata/v8/8UgOK_RUxkBbV-q561I6kFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
    font-family: 'Open Sans Condensed';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'), url(https://fonts.gstatic.com/s/opensanscondensed/v11/gk5FxslNkTTHtojXrkp-xBEur64QvLD-0IbiAdTUNXE.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
p {
  margin: 0 0 10px 0;
}
input {
  font-size: 20px;
}
.narrow-font {
  font-family: 'Open Sans Condensed', sans-serif;
}
.wide-font {
  font-family: 'Diplomata', cursive;
}
.set-width {
  width: 220px;
}

<p>
  <input type="text" size="10" class="narrow-font" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="wide-font" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="narrow-font set-width" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="wide-font set-width" value="0123456789" />
</p>

Ich schlage vor, wahrscheinlich ist es am besten, die Breite des Stils in em-Einheiten festzulegen :) Für eine Eingabegröße von 20 Zeichen einfach einstellen style='width:20em':)

size ist in verschiedenen Browsern und ihren möglichen Schriftarteinstellungen inkonsistent.

Der widthin px festgelegte Stil ist zumindest konsistent, modulo Probleme bei der Größe der Box . Möglicherweise möchten Sie den Stil auch in 'em' festlegen, wenn Sie die Größe relativ zur Schriftart ändern möchten (dies ist jedoch wiederum inkonsistent, es sei denn, Sie legen die fontFamilie und Größe der Eingabe explizit fest) oder '%', wenn Sie eine erstellen Liquid-Layout-Formular. In beiden Fällen ist ein Stylesheet dem Inline- styleAttribut wahrscheinlich vorzuziehen .

Sie müssen noch sizefür <select multiple>die Höhe bekommen richtig mit den Optionen aufreihen. Aber ich würde es nicht auf einem verwenden <input>.

Ich möchte sagen, dass dies gegen die "konventionelle Weisheit" verstößt, aber ich bevorzuge im Allgemeinen die Verwendung von Größe. Der Grund dafür ist genau der Grund, den viele Leute nicht sagen: Die Breite des Feldes variiert je nach Schriftgröße von Browser zu Browser. Insbesondere ist es immer groß genug, um die angegebene Anzahl von Zeichen anzuzeigen, unabhängig von den Browsereinstellungen.

Wenn ich beispielsweise ein Datumsfeld habe, soll das Feld normalerweise breit genug sein, um entweder 8 oder 10 Zeichen anzuzeigen (zweistelliger Monat und Tag und entweder zwei- oder vierstelliges Jahr mit Trennzeichen). Das Festlegen des Größenattributs garantiert mir im Wesentlichen, dass das gesamte Datum sichtbar ist und nur wenig Speicherplatz verschwendet wird. Ähnliches gilt für die meisten Zahlen - ich kenne den erwarteten Wertebereich, daher setze ich das Größenattribut auf die richtige Anzahl von Stellen plus ggf. Dezimalpunkt.

Soweit ich das beurteilen kann, tut dies kein CSS-Attribut. Das Festlegen einer Breite in em basiert beispielsweise auf der Höhe und nicht auf der Breite und ist daher nicht sehr genau, wenn Sie eine bekannte Anzahl von Zeichen anzeigen möchten.

Natürlich gilt diese Logik nicht immer - ein Namenseingabefeld kann beispielsweise eine beliebige Anzahl von Zeichen enthalten. In diesen Fällen werde ich auf die Eigenschaften der CSS-Breite zurückgreifen, normalerweise in px. Ich würde jedoch sagen, dass die meisten Felder, die ich erstelle, einen bekannten Inhalt haben. Durch Angabe des Größenattributs kann ich sicherstellen, dass der größte Teil des Inhalts in den meisten Fällen ohne Beschneiden angezeigt wird.

Ich habe gerade mit einem Tisch gekämpft, den ich nicht kleiner machen konnte, egal welches Element ich zu verkleinern versuchte, die Breite des Tisches blieb gleich. Ich habe mit Firebug gesucht, aber das Element, das die Breite so hoch eingestellt hat, nicht gefunden.

Schließlich habe ich versucht, das Größenattribut der eingegebenen Textelemente zu ändern, und das hat es behoben. Aus irgendeinem Grund die Größe Attribut ritten über die CSS - Breiten. Ich habe jQuery verwendet, um einer Tabelle dynamisch Zeilen hinzuzufügen, und diese Zeilen enthielten die Eingaben. Also vielleicht , wenn es darum geht, dynamisch Eingänge Zugabe mit der appendTo () Funktion vielleicht ist es besser ist , die eingestellte Größe Attribut zusammen mit der Breite.

Sie erhalten mehr Konsistenz, wenn Sie width verwenden (Ihr zweites Beispiel).

Sie können die Größe mithilfe von Stil und Breite ändern, um die Größe des Textfelds zu ändern. Hier ist der Code dafür.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

</head>
<body>
<div align="center">

    <form method="post">
          <div class="w3-row w3-section">
            <div class="w3-rest" align = "center">
                <input name="lastName" type="text" id="myInput" style="width: 50%">
            </div>
        </div>
    </form>
</div>
</body>
</html>

Verwenden Sie ausrichten, um das Textfeld zu zentrieren.

Sowohl das sizeAttribut in HTML als auch die widthEigenschaft in CSS legen die Breite von an <input>. Wenn Sie die Breite auf etwas einstellen möchten, das näher an der Breite jedes Zeichens liegt, verwenden Sie die **ch**Einheit wie folgt:

input {
    width: 10ch;
}

HTML steuert die semantische Bedeutung der Elemente. CSS steuert das Layout / den Stil der Seite. Verwenden Sie CSS, wenn Sie Ihr Layout steuern.

Kurz gesagt, verwenden Sie niemals size = ""