Czy powinienem zmienić rozmiar obszaru tekstowego za pomocą atrybutów szerokość / wysokość CSS lub atrybutów cols / rows HTML?


307

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?

Odpowiedzi:


268

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>


4
To jest w porządku, ale musisz zdać sobie sprawę, że dowolna przestrzeń, w której ustawiasz rozmiar, zmarnuje się i naprawdę jest tylko na pokaz.
Explosion Pills,

4
@ tandu: Co rozumiesz przez „zmarnuje się i jest naprawdę tylko na pokaz”?
BoltClock

2
wiersze / kolumny zależą od wielkości znaku użytkownika. Więc jeśli masz zdefiniowaną przez css szerokość / wysokość, której nie można podzielić pikselami znaku w obszarze tekstowym, pozostanie tyle białych znaków w pionie i poziomie. Prawdopodobnie nikt nigdy tego nie zauważy, ale tylko powie.
Tabletki przeciwwybuchowe

21
Możesz użyć „em” jako miary zamiast pikseli. 1em to szerokość „M” w dowolnej czcionce i rozmiarze. Ale cols są istotne tylko wtedy, gdy są używane z czcionkami monospace, co nie jest w większości projektów. Aby uzyskać idealne dopasowanie do wysokości, użyj wielokrotności line-heightdla wysokości obszaru tekstowego.
kogakure

5
@LeoGalleguillos „Wymagane i przydatne, jeśli klient nie obsługuje CSS ”. Nikt nie powiedział nic o walidacji.
Janus Bahs Jacquet

96

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.


4
Niestety „Wysokość pola tekstowego nie pasuje do wierszy w przeglądarce Firefox” - to „wiersze + 1” stackoverflow.com/q/7695945/1266880
apurkrt

2
Nie jestem pewien, czy coś się zmieniło od '13 lub czy jest coś nieoczywistego w mojej konkretnej sytuacji, ale ustawienie height: auto;w CSS wcale nie wpływa na mój obszar tekstowy.
clozach,

10

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.


8
Szkoły w3c stwierdzają, że można ustawić go za pomocą atrybutu wiersze i kolumny, ale ustawienie wysokości i szerokości jest lepsze. Na w3c.org nie ma wzmianki o wierszach i colach stanowiących wymagany atrybut textarea. w3schools.com/tags/tag_textarea.asp w3.org/wiki/HTML/Elements/textarea
Michael Stramel

17
@MichaelStramel moja odpowiedź ma cztery lata :) - nawiasem mówiąc, to nie są szkoły w3c. Nie są powiązane. Nie jestem pewien, czy HTML5 ma już pojęcie wymaganych atrybutów, ale mogę się mylić. Nadal nie rozumiem, dlaczego ustawienie szerokości / wysokości byłoby lepsze niż wiersze / kolumny
Explosion Pills

3
Zdałem sobie sprawę, że po tym, jak skomentowałem, ale nadal czułem, że ma to znaczenie dla każdego, kto czyta ten post. Ponadto w przypadku responsywnych projektów wiersze i kolumny mogą powodować problemy, chyba że zostaną ustawione za pomocą JavaScript. To IMO sprawia, że ​​ustawienie go za pomocą CSS jest znacznie lepszym sposobem.
Michael Stramel,

6

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


6

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


1
Co to ma wspólnego z Angular? A jak to się dodaje do istniejących odpowiedzi z 2010 r. /
Lazar Ljubenović

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

19
@ user470962 Ad hominem. Jeśli poprawisz błąd składniowy na „<textarea style =" width: 300px; height: 150px; ">”, kod będzie w porządku. Nie ma potrzeby obrażać kogoś. Jak widać najpopularniejsza odpowiedź jest podobna do jego. +1
TAAPSogeking

1
@TAAPSogeking w uczciwości, to ta sama odpowiedź, 4 lata później. -1
Rambatino

4

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


2

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


2

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

2

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

2

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ć


-11

CSS


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


HTML


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

z css możesz zrobić bardzo łatwo
ASHU

Możesz to zrobić w obie strony za pomocą css lub ręcznie, tak jak to <textarea wiersze = "4" cols = "50"> CZEŚĆ </textarea>
ASHU

Dlaczego miałbyś stosować te właściwości do wszystkich elementów?
blackmambo,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.