Sollte ich eine Textarea mit CSS Breite / Höhe oder HTML Spalten / Zeilen Attribute Größe?

Question

Jedes Mal, wenn ich ein neues Formular entwickle, das eine textarea Ich stehe vor folgendem Dilemma, wenn ich seine Abmessungen angeben muss:

Utilice CSS oder verwenden Sie die textarea die Attribute cols y rows ?

Was sind die Vor- und Nachteile der einzelnen Methoden?

Was ist die Semantik dieser Attribute?

Wie wird das normalerweise gemacht?

Answer 1

Wenn Sie nicht jedes Mal verwenden, verwenden Sie line-height:'..'; Eigenschaft seine Kontrolle der Höhe von Textarea und Breite Eigenschaft für Breite von Textarea.

oder Sie können die Schriftgröße mit Hilfe von css verwenden:

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

Answer 2

YES! ....immer Stil textarea Verwenden Sie CSS und vermeiden Sie die Attribute, es sei denn, Sie müssen einen sehr alten Agenten unterstützen, der keine Stylesheets unterstützt. Andernfalls haben Sie die volle Macht, CSS zu verwenden. Im Folgenden finden Sie meine Standard-CSS-Formatierung für Textareas, die auf jeder Website schön aussieht. Passen Sie sie an, wie Sie möchten. Die Kommentare sind unten eingefügt, damit Sie sehen können, warum ich diese CSS-Eigenschaften und -Werte gewählt habe:

textarea {
    display: inline-block;
    margin: 0;
    padding: .2em;
    width: auto;
    min-width: 30em;
    /* The max-width "100%" value fixes a weird issue where width is too wide by default and extends beyond 100% of the parent in some agents. */
    max-width: 100%;
    /* Height "auto" will allow the text area to expand vertically in size with a horizontal scrollbar if pre-existing content is added to the box before rendering. Remove this if you want a pre-set height. Use "em" to match the font size set in the website. */
    height: auto;
    /* Use "em" to define the height based on the text size set in your website and the text rows in the box, not a static pixel value. */
    min-height: 10em;
    /* Do not use "border" in textareas unless you want to remove the 3D box most browsers assign and flatten the box design. */
    /*border: 1px solid black;*/
    cursor: text;
    /* Some textareas have a light gray background by default anyway. */
    background-color: #eee;
    /* Overflow "auto" allows the box to start with no scrollbars but add them as content fills the box. */
    overflow: auto;
    /* Resize creates a tab in the lower right corner of textarea for most modern browsers and allows users to resize the box manually. Note: Resize isn't supported by most older agents and IE. */
    resize: both;
}

In meiner Stilvorlage für das Element "reset" habe ich diese Werte als Standardwerte für "textarea" die allen Textbereichen ein schönes Aussehen und eine angenehme Haptik verleihen, mit Scrollen, wenn es erkannt wird, einer Registerkarte für die Größenänderung (Nicht-IE-Browser) und Korrekturen für die Abmessungen, einschließlich einer Höhe, die es dem Feld ermöglicht, sich selbst zu vergrößern, basierend auf dem vorhandenen Inhalt, den Sie für den Benutzer darin platzieren, und einer Breite, die nicht über die Grenzen des übergeordneten Containers hinausgeht.

Answer 3

CSS

---

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

HTML

---

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