Devo dimensionare un'area di testo con larghezza / altezza CSS o attributi di colonne / righe HTML?


307

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?

Risposte:


268

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>


4
Va bene, ma devi capire che qualsiasi spazio arbitrario con cui stai impostando le dimensioni andrà sprecato ed è davvero solo per lo spettacolo.
Esplosione di pillole

4
@tandu: Cosa intendi con "sta per sprecare ed è davvero solo per lo spettacolo"?
BoltClock

2
righe / colonne si basa sulla dimensione dei caratteri dell'utente. Quindi, se hai una larghezza / altezza definita dal CSS che non può essere divisa per i pixel di un personaggio nell'area di testo, ci sarà quel gran bianco lasciato in verticale e in orizzontale. Probabilmente nessuno lo noterà mai, ma solo dicendo.
Esplosione di pillole

21
È possibile utilizzare "em" come misura, anziché pixel. 1em è la larghezza della "M" in qualsiasi carattere e dimensione. Ma i col sono rilevanti solo se usati con i caratteri monospace, cosa che non accade nella maggior parte dei progetti. Per ottenere un adattamento perfetto in altezza, utilizzare un multiplo di line-heightper l'altezza dell'area di testo.
Kogakure,

5
@LeoGalleguillos "Richiesto e utile se il client non supporta i CSS ". Nessuno ha detto nulla sulla convalida.
Janus Bahs Jacquet,

96

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.


4
Purtroppo, "Altezza textarea non corrisponde le righe in Firefox" - è "righe + 1" stackoverflow.com/q/7695945/1266880
apurkrt

2
Non sono sicuro se le cose siano cambiate dal '13 o se ci sia qualcosa di super-ovvio nella mia situazione particolare, ma l'impostazione height: auto;in CSS non sembra influenzare affatto la mia area di testo.
clozach

10

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.


8
Le scuole w3c affermano che è possibile impostarlo tramite l'attributo righe e cols ma che l'impostazione di altezza e larghezza è migliore. Non vi è alcuna menzione del fatto che righe e colonne siano un attributo obbligatorio per textarea su w3c.org. w3schools.com/tags/tag_textarea.asp w3.org/wiki/HTML/Elements/textarea
Michael Stramel

17
@MichaelStramel la mia risposta ha quattro anni :) - a proposito non sono scuole w3c. Non sono affiliati. Non sono sicuro che HTML5 abbia più un concetto di attributi richiesti , ma potrei sbagliarmi al riguardo. Non riesco ancora a capire perché impostare larghezza / altezza sarebbe meglio di file / colonne
Pillole di esplosione

3
Mi sono reso conto che dopo aver commentato ma ancora sentito che era rilevante per chiunque leggesse questo post. Inoltre, con design reattivi, le righe e i col possono causare problemi a meno che non vengano impostati tramite JavaScript. Che l'IMO rende l'impostazione tramite CSS un modo molto migliore.
Michael Stramel,

6

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


6

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


1
Cosa c'entra questo con Angular? E come si aggiunge questo rispetto alle risposte esistenti del 2010 /
Lazar Ljubenović,

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

19
@ user470962 Hominem. Se si corregge l'errore di sintassi su '<textarea style = "width: 300px; height: 150px;">' il codice va bene. Non è necessario insultare qualcuno. Come puoi vedere, la risposta più popolare non è diversa dalla sua. +1
TAAPEscoperta

1
@TAAPSinceramente, questa è la stessa risposta, 4 anni dopo. -1
Rambatino,

4

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


2

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


2

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

2

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

2

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


-11

CSS


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

HTML


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

puoi farlo con il css molto facilmente
ASHU,

Puoi farlo in entrambi i modi con css o puoi alimentare manualmente in questo modo <textarea rows = "4" cols = "50"> CIAO </textarea>
ASHU

Perché dovresti applicare tali proprietà a tutti gli elementi?
Blackmambo,

Sebbene questo codice possa rispondere alla domanda, fornire un contesto aggiuntivo riguardo a come e / o perché risolve il problema migliorerebbe il valore a lungo termine della risposta.
Donald Duck
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.