Sollte ich einen Textbereich mit CSS-Attributen width / height oder HTML cols / rows dimensionieren?

307

Jedes Mal, wenn ich ein neues Formular entwickle, das a enthält, habe textareaich das folgende Dilemma, wenn ich seine Dimensionen angeben muss:

Verwenden Sie CSS oder verwenden Sie die textareaAttribute colsundrows ?

Was sind die Vor- und Nachteile jeder Methode?

Was ist die Semantik der Verwendung dieser Attribute?

Wie wird es normalerweise gemacht?

Pherrymason
quelle

Antworten:

268

Ich empfehle beide zu verwenden. Zeilen und Spalten sind erforderlich und nützlich, wenn der Client CSS nicht unterstützt. Aber als Designer überschreibe ich sie, um genau die Größe zu erhalten, die ich mir wünsche.

Die empfohlene Vorgehensweise erfolgt über ein externes Stylesheet, z

textarea {
  width: 300px;
  height: 150px;
}
<textarea> </textarea>

Kogakure
quelle
4
Das ist in Ordnung, aber Sie müssen sich darüber im Klaren sein, dass jeder beliebige Platz, mit dem Sie die Größe einstellen, verschwendet wird und wirklich nur zur Schau gestellt wird.
Explosion Pills
4
@tandu: Was meinst du mit "wird verschwenden und ist wirklich nur für die Show"?
BoltClock
2
Zeilen / Spalten basieren auf der Zeichengröße des Benutzers. Wenn Sie also eine CSS-definierte Breite / Höhe haben, die nicht durch die Pixel eines Zeichens im Textbereich geteilt werden kann, bleibt vertikal und horizontal so viel Weißraum übrig. Wahrscheinlich wird es niemand bemerken, sondern nur sagen.
Explosion Pills
21
Sie können "em" anstelle von Pixeln als Maß verwenden. 1em ist die Breite des "M" in einer beliebigen Schriftart und Größe. Spalten sind jedoch nur relevant, wenn sie mit Monospace-Schriftarten verwendet werden, was in den meisten Designs nicht der Fall ist. Um eine perfekte Höhenanpassung zu erhalten, verwenden Sie ein Vielfaches line-heightder Höhe Ihres Textbereichs.
Kogakure
5
@LeoGalleguillos "Erforderlich und nützlich, wenn der Client CSS nicht unterstützt ". Niemand sagte etwas über die Validierung.
Janus Bahs Jacquet
96

textarea { height: auto; }
<textarea rows="10"></textarea>

Dadurch wird der Browser veranlasst, die Höhe des Textbereichs genau auf die Anzahl der Zeilen plus die Auffüllungen um ihn herum einzustellen. Wenn Sie die CSS-Höhe auf eine exakte Anzahl von Pixeln einstellen, bleiben beliebige Leerzeichen übrig.

Jan Werkhoven
quelle
4
Leider stimmt "Höhe des Textbereichs nicht mit den Zeilen in Firefox überein" - es ist "Zeilen + 1" stackoverflow.com/q/7695945/1266880
apurkrt
2
Ich bin mir nicht sicher, ob sich die Dinge seit '13 geändert haben oder ob meine spezielle Situation etwas nicht offensichtliches ist, aber die Einstellung height: auto;in CSS scheint meinen Textbereich überhaupt nicht zu beeinflussen.
Clozach
10

Laut w3c sind sowohl Spalten als auch Zeilen erforderliche Attribute für Textbereiche. Zeilen und Spalten sind die Anzahl der Zeichen, die in den Textbereich passen, anstatt in Pixel oder einen anderen potenziell willkürlichen Wert. Gehen Sie mit den Zeilen / Spalten.

Explosionspillen
quelle
8
In w3c-Schulen wird angegeben, dass Sie es über das Attribut Zeilen und Spalten festlegen können, die Einstellung von Höhe und Breite jedoch besser ist. Es wird nicht erwähnt, dass Zeilen und Spalten ein erforderliches Attribut für den Textbereich auf w3c.org sind. w3schools.com/tags/tag_textarea.asp w3.org/wiki/HTML/Elements/textarea
Michael Stramel
17
@ MichaelStramel meine Antwort ist vier Jahre alt :) - übrigens ist es nicht w3c Schulen. Sie sind nicht verbunden. Ich bin mir nicht sicher, ob HTML5 ein Konzept der erforderlichen Attribute mehr hat, aber ich könnte mich darin irren. Ich verstehe immer noch nicht, warum das Einstellen von Breite / Höhe besser wäre als Zeilen / Spalten
Explosion Pills
3
Nachdem ich kommentiert hatte, wurde mir klar, dass dies für jeden, der diesen Beitrag liest, relevant war. Bei reaktionsschnellen Designs können die Zeilen und Spalten Probleme verursachen, sofern sie nicht über JavaScript festgelegt werden. Diese IMO macht das Einstellen über CSS viel besser.
Michael Stramel
6

Die Antwort ist ja". Das heißt, Sie sollten beide verwenden. Ohne Zeilen und Spalten (und es gibt Standardwerte, auch wenn Sie diese nicht explizit verwenden) ist der Textbereich ungewöhnlich klein, wenn CSS durch ein Benutzer-Stylesheet deaktiviert oder überschrieben wird. Denken Sie immer an die Barrierefreiheit. Wenn Ihr Stylesheet jedoch das Erscheinungsbild des Textbereichs steuern darf, erhalten Sie im Allgemeinen etwas, das viel besser aussieht, sich gut in das gesamte Seitendesign einfügt und dessen Größe geändert werden kann, um mit den Benutzereingaben Schritt zu halten ( natürlich im Rahmen des guten Geschmacks).

Stan Rogers
quelle
6

Für den Textbereich können wir unten CSS verwenden, um die Größe festzulegen

    <textarea  class="form-control" style=" min-width:500px; max-width:100%;min-height:50px;height:100%;width:100%;" ></textarea>

Getestet in Angularjs und Angular7

Rohit Parte
quelle
1
Was hat das mit Angular zu tun? Und wie fügt sich dies im Vergleich zu den vorhandenen Antworten von 2010 /
Lazar Ljubenović
5
 <textarea style="width:300px; height:150px;" ></textarea>
user470962
quelle
19
@ user470962 Ad hominem. Wenn Sie den Syntaxfehler auf '<textarea style = "width: 300px; height: 150px;">' korrigieren, ist der Code in Ordnung. Es besteht keine Notwendigkeit, jemanden zu beleidigen. Wie Sie sehen können, ist die beliebteste Antwort seiner nicht unähnlich. +1
TAAPSogeking
1
@TAAPSogeking in Fairness, das ist die gleiche Antwort, 4 Jahre später. -1
Rambatino
4

Die Größe eines Textbereichs kann durch die Spalten- und Zeilenattribute oder noch besser angegeben werden. durch die Höhen- und Breiteneigenschaften von CSS. Das Attribut cols wird in allen gängigen Browsern unterstützt. Ein Hauptunterschied besteht darin, dass <TEXTAREA ...>es sich um ein Container-Tag handelt: Es hat ein Start-Tag ().

AsifQadri
quelle
2

Ich spezifiziere normalerweise nicht height, aber spezifiziere width: ...und rowsundcols .

Normalerweise nur in meinen Fällen widthund rowswerden benötigt, damit der Textbereich im Verhältnis zu anderen Elementen gut aussieht. (Undcols ist ein Fallback, wenn jemand kein CSS verwendet, wie in den anderen Antworten erläutert.)

((Beides angeben rowsund heightein bisschen wie das Duplizieren von Daten, denke ich?))

KajMagnus
quelle
2

Ein Hauptmerkmal von Textbereichen ist, dass sie erweiterbar sind. Auf einer Webseite kann dies dazu führen, dass im Textbereich Bildlaufleisten angezeigt werden, wenn die Textlänge den von Ihnen festgelegten Bereich überfüllt (z. B. mithilfe von Zeilen oder mithilfe von CSS). Dies kann ein Problem sein, wenn sich ein Benutzer zum Drucken entscheidet, insbesondere mit 'Drucken' in PDF - Stellen Sie daher eine angenehm große Mindesthöhe für gedruckte Textbereiche mit einer bedingten CSS-Regel ein:

@media print { 
textarea {
min-height: 900px;  
}
}
Geoff Kendall
quelle
2

Wenn Sie nicht jedes Mal verwenden, verwenden Sie die Zeilenhöhe: '..'; Eigenschaft seine Steuerung der Höhe des Textbereichs und der Eigenschaft width für die Breite des Textbereichs.

oder Sie können die Schriftgröße verwenden, indem Sie CSS folgendermaßen verwenden:

#sbr {
  font-size: 16px;
  line-height:1.4;
  width:100%;
}
Nurealam Sabbir
quelle
2

HTML-Zeilen und Spalten reagieren nicht!

Also definiere ich die Größe in CSS. Als Tipp: Wenn Sie eine kleine Größe für Mobiltelefone definieren, denken Sie über die Verwendung nachtextarea:focus {};

Fügen Sie hier zusätzlichen Platz hinzu, der sich erst dann entfaltet, wenn ein Benutzer tatsächlich etwas schreiben möchte

jemand
quelle
-11

CSS


input
{
    width: 300px;
    height: 40px;
} 


HTML


<textarea rows="4" cols="50">HELLO</textarea>
ASHU
quelle
Sie können mit dem CSS sehr leicht tun
ASHU
Sie können in beide Richtungen per CSS oder manuell wie folgt füttern: <textarea rows = "4" cols = "50"> HALLO </ textarea>
ASHU
Warum würden Sie diese Eigenschaften auf alle Elemente anwenden?
Blackmambo