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?

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>

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.

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.

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).

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

 <textarea style="width:300px; height:150px;" ></textarea>

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 ().

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?))

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;  
}
}

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%;
}

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

CSS

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

HTML

<textarea rows="4" cols="50">HELLO</textarea>