Ogni volta che sviluppo un nuovo modulo che include un textareaho il seguente dilemma quando devo specificare le sue dimensioni:

Usa CSS o usa gli textareaattributi di colse rows?

Quali sono i pro e i contro di ciascun metodo?

Quali sono le semantiche dell'uso di questi attributi?

Come si fa di solito?

Consiglio di usare entrambi. Righe e colonne sono obbligatori e utili se il client non supporta i CSS. Ma come designer li sovrascrivo per ottenere esattamente le dimensioni che desidero.

Il modo consigliato per farlo è tramite un foglio di stile esterno, ad es

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

<textarea> </textarea>

textarea { height: auto; }

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

Ciò attiverà il browser per impostare ESATTAMENTE l'altezza dell'area di testo sulla quantità di righe più le imbottiture circostanti. L'impostazione dell'altezza CSS su una quantità esatta di pixel lascia spazi bianchi arbitrari.

Secondo il w3c, i col e le righe sono entrambi attributi obbligatori per le textareas. Righe e colonne sono il numero di caratteri che si adatteranno nell'area di testo anziché in pixel o altri valori potenzialmente arbitrari. Vai con le righe / colonne.

La risposta è si". Cioè, dovresti usare entrambi. Senza righe e colonne (e ci sono valori predefiniti anche se non li usi esplicitamente) l'area del testo è insolitamente piccola se CSS è disabilitato o sostituito da un foglio di stile utente. Tieni sempre presente i problemi di accessibilità. Detto questo, se il tuo foglio di stile è autorizzato a controllare l'aspetto dell'area di testo, generalmente finirai con qualcosa che sembra molto meglio, si adatta bene al design complessivo della pagina e che può ridimensionare per tenere il passo con l'input dell'utente ( nei limiti del buon gusto, ovviamente).

Per l'area di testo possiamo usare sotto css per correggere le dimensioni

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

Testato in angularjs e angular7

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

La dimensione di un'area di testo può essere specificata dagli attributi cols e righe, o anche meglio; tramite le proprietà CSS di altezza e larghezza. L'attributo cols è supportato in tutti i principali browser. Una differenza principale è che <TEXTAREA ...>è un tag container: ha un tag start ().

Di solito non lo specifica height, ma lo specifica width: ...e rowse cols.

Di solito, nei miei casi, solo widthe rowssono necessari, affinché l'area di testo appaia gradevole rispetto ad altri elementi. (Ed colsè un fallback se qualcuno non usa i CSS, come spiegato nelle altre risposte.)

((Specificare entrambi rowse heightsembra un po 'come duplicare i dati, penso?))

Una caratteristica importante delle textareas è che sono espandibili. In una pagina Web ciò può comportare la visualizzazione di barre di scorrimento nell'area di testo se la lunghezza del testo supera lo spazio impostato (sia che utilizzi le righe, sia che utilizzi i CSS. Questo può essere un problema quando un utente decide di stampare, in particolare con 'stampa' in PDF - quindi imposta un'altezza minima comodamente grande per le aree di testo stampate con una regola CSS condizionale:

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

se non si usa ogni volta usare line-height: '..'; proprietà controlla l'altezza della textarea e la larghezza per la larghezza della textarea.

oppure puoi utilizzare la dimensione del carattere seguendo i css:

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

Righe e colonne HTML non rispondono!

Quindi definisco la dimensione in CSS. Come suggerimento: se definisci una dimensione ridotta per i cellulari, pensa all'utilizzotextarea:focus {};

Aggiungi un po 'di spazio extra qui, che si aprirà solo nel momento in cui un utente vuole effettivamente scrivere qualcosa

CSS

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

HTML

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