Za każdym razem, gdy opracowuję nowy formularz, który zawiera a textarea, mam następujący dylemat, gdy muszę określić jego wymiary:

Użyj CSS lub użyj textareaatrybutów colsi rows?

Jakie są zalety i wady każdej metody?

Jaka jest semantyka używania tych atrybutów?

Jak to zwykle się robi?

Polecam używać obu. Wiersze i cols są wymagane i przydatne, jeśli klient nie obsługuje CSS. Ale jako projektant nadpisuję je, aby uzyskać dokładnie taki rozmiar, jaki sobie życzę.

Zalecany sposób to zrobić za pomocą zewnętrznego arkusza stylów, np

textarea {
  width: 300px;
  height: 150px;
}

<textarea> </textarea>

textarea { height: auto; }

<textarea rows="10"></textarea>

Spowoduje to, że przeglądarka ustawi DOKŁADNIE wysokość pola tekstowego na liczbę wierszy plus obicia wokół niego. Ustawienie wysokości CSS na dokładną liczbę pikseli pozostawia dowolne białe spacje.

Zgodnie z w3c, kolumny i wiersze są wymaganymi atrybutami dla obszarów tekstowych. Wiersze i Cole to liczba znaków, które zmieszczą się w obszarze tekstowym, a nie w pikselach lub innej potencjalnie dowolnej wartości. Idź z wierszami / cols.

Odpowiedź brzmi tak". Oznacza to, że powinieneś używać obu. Bez wierszy i cols (i istnieją wartości domyślne, nawet jeśli nie używasz ich jawnie), obszar tekstowy jest wyjątkowo mały, jeśli CSS jest wyłączony lub zastąpiony przez arkusz stylów użytkownika. Zawsze miej na uwadze problemy z dostępnością. Biorąc to pod uwagę, jeśli Twój arkusz stylów może kontrolować wygląd obszaru tekstowego, na ogół skończysz z czymś, co wygląda o wiele lepiej, pasuje do ogólnego projektu strony i który może zmienić rozmiar, aby nadążyć za wprowadzaniem przez użytkownika ( oczywiście w granicach dobrego smaku).

Dla obszaru tekstowego możemy użyć poniżej css, aby naprawić rozmiar

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

Testowane w angularjs i angular7

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

Rozmiar pola tekstowego można określić za pomocą atrybutów cols i row, a nawet lepiej; poprzez właściwości wysokości i szerokości CSS. Atrybut cols jest obsługiwany we wszystkich głównych przeglądarkach. Jedną z głównych różnic jest to, że <TEXTAREA ...>jest to znacznik kontenerowy: ma tag początkowy ().

I zazwyczaj nie precyzują height, ale nie określił width: ...i rowsi cols.

Zwykle w moich przypadkach tylko widthi rowssą potrzebne, aby obszar tekstowy wyglądał ładnie w stosunku do innych elementów. (I colsjest rezerwą, jeśli ktoś nie używa CSS, jak wyjaśniono w innych odpowiedziach).

((Podając oba rowsi heightwydaje mi się, że to trochę jak powielanie danych?))

Główną cechą obszarów tekstowych jest to, że można je rozszerzać. Na stronie internetowej może to spowodować pojawienie się pasków przewijania w obszarze tekstowym, jeśli długość tekstu zapełni się na ustawionej przestrzeni (czy to przy użyciu wierszy, czy przy użyciu CSS. Może to być problem, gdy użytkownik zdecyduje się wydrukować, szczególnie z „drukuj” do formatu PDF - ustaw więc komfortowo dużą wysokość minimalną dla drukowanych obszarów tekstowych z warunkową zasadą CSS:

@media print { 
textarea {
min-height: 900px;  
}
}

jeśli nie używasz za każdym razem, użyj wysokości linii: „..”; właściwość jego kontrola wysokość pola tekstowego i szerokość właściwość szerokości pola tekstowego.

lub możesz użyć rozmiaru czcionki, wykonując css:

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

Wiersze i kolory HTML nie reagują!

Więc określam rozmiar w CSS. Wskazówka: jeśli określisz mały rozmiar telefonu komórkowego, pomyśl o jego użyciutextarea:focus {};

Dodaj tutaj trochę dodatkowej przestrzeni, która pojawi się dopiero w momencie, gdy użytkownik zechce coś napisać

CSS

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

HTML

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