Devo dimensionar uma área de texto com atributos de largura / altura CSS ou colunas / linhas HTML?


307

Sempre que desenvolvo um novo formulário que inclui um textarea, tenho o seguinte dilema quando preciso especificar suas dimensões:

Use CSS ou use os textareaatributos de colse rows?

Quais são os prós e os contras de cada método?

Quais são as semânticas do uso desses atributos?

Como é geralmente feito?

Respostas:


268

Eu recomendo usar os dois. Linhas e colunas são necessárias e úteis se o cliente não suportar CSS. Mas como designer, eu os sobrescrito para obter exatamente o tamanho que desejo.

A maneira recomendada de fazer isso é através de uma folha de estilo externa, por exemplo

textarea {
  width: 300px;
  height: 150px;
}
<textarea> </textarea>


4
Tudo bem, mas você deve perceber que qualquer espaço arbitrário com o qual você estiver definindo o tamanho será desperdiçado e será realmente apenas para mostrar.
Explosion Pills

4
@tandu: O que você quer dizer com "vai desperdiçar e é realmente apenas para mostrar"?
BoltClock

2
linhas / colunas baseia-se no tamanho dos caracteres do usuário. Portanto, se você tiver uma largura / altura definida por css que não possa ser dividida pelos pixels de um caractere na área de texto, haverá muito espaço em branco na vertical e na horizontal. Provavelmente ninguém nunca vai notar, mas apenas dizendo.
Pílulas de explosão

21
Você pode usar "em" como medida, em vez de pixels. 1em é a largura do "M" em qualquer fonte e tamanho. Porém, as colunas só são relevantes se usadas com fontes monoespaçadas, o que não ocorre na maioria dos designs. Para obter um ajuste perfeito em altura, use um múltiplo de line-heightpara a altura da área de texto.
kogakure

5
@LeoGalleguillos “Necessário e útil se o cliente não suportar CSS ”. Ninguém disse nada sobre validação.
Janus Bahs Jacquet

96

textarea { height: auto; }
<textarea rows="10"></textarea>

Isso acionará o navegador para definir a altura da área de texto EXATAMENTE para a quantidade de linhas mais os preenchimentos ao redor. Definir a altura do CSS para uma quantidade exata de pixels deixa espaços em branco arbitrários.


4
Infelizmente, "A altura da área de texto não corresponde às linhas no Firefox" - é "linhas + 1" stackoverflow.com/q/7695945/1266880
apurkrt 21/03/2015

2
Não tenho certeza se as coisas mudaram desde 13 ou se há algo super óbvio na minha situação em particular, mas a configuração height: auto;no CSS não parece afetar minha área de texto.
clozach

10

De acordo com o w3c, colunas e linhas são atributos necessários para áreas de texto. Linhas e Cols são o número de caracteres que cabem na área de texto em vez de pixels ou algum outro valor potencialmente arbitrário. Vá com as linhas / colunas.


8
O w3c escolas afirma que você pode configurá-lo através do atributo de linhas e colunas, mas que a configuração de altura e largura é melhor. Não há menção de linhas e colunas sendo um atributo necessário para a área de texto no w3c.org. w3schools.com/tags/tag_textarea.asp w3.org/wiki/HTML/Elements/textarea
Michael Stramel

17
@ MichaelStramel, minha resposta tem quatro anos :) - a propósito, não são as escolas w3c. Eles não são afiliados. Não tenho certeza de que o HTML5 tenha mais um conceito de atributos obrigatórios , mas posso estar errado sobre isso. Eu ainda não vejo por que definir largura / altura seria melhor do que linhas / cols embora
Explosão Pills

3
Percebi que depois que comentei, mas ainda senti que era relevante para quem estava lendo este post. Além disso, com designs responsivos, as linhas e colunas podem causar problemas, a menos que sejam definidas por meio de JavaScript. Esse IMO torna a configuração através do CSS de uma maneira muito melhor.
Michael Stramel

6

A resposta é sim". Ou seja, você deve usar os dois. Sem linhas e colunas (e existem valores padrão, mesmo que você não os use explicitamente), a área de texto é inutilmente pequena se o CSS estiver desabilitado ou substituído por uma folha de estilo do usuário. Sempre tenha em mente as preocupações de acessibilidade. Dito isto, se sua folha de estilo tem permissão para controlar a aparência da área de texto, você geralmente acabará com algo que parece muito melhor, se encaixa bem no design geral da página e pode ser redimensionado para acompanhar a entrada do usuário ( dentro dos limites do bom gosto, é claro).


6

Para a área de texto, podemos usar abaixo do css para corrigir o tamanho

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

Testado em angularjs e angular7


1
O que isso tem a ver com Angular? E como isso adiciona em comparação com as respostas existentes de 2010 /
Lazar Ljubenović

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

19
@ user470962 Anúncio hominem. Se você corrigir o erro de sintaxe como '<textarea style = "width: 300px; height: 150px;"> ", o código está correto. Não há necessidade de insultar alguém. Como você pode ver, a resposta mais popular não é diferente da dele. +1
TAAPSogeking

1
@TAAPSogeking com justiça, esta é a mesma resposta, 4 anos depois. -1
Rambatino 29/10

4

O tamanho de uma área de texto pode ser especificado pelos atributos colunas e linhas, ou melhor ainda; pelas propriedades de altura e largura do CSS. O atributo cols é suportado em todos os principais navegadores. Uma diferença principal é que <TEXTAREA ...>é uma tag de contêiner: ela tem uma tag de início ().


2

Normalmente não especifico height, mas especifico width: ...e rowse cols.

Geralmente, nos meus casos, apenas widthe rowssão necessários, para que a área de texto tenha uma boa aparência em relação a outros elementos. (E colsé um substituto se alguém não usar CSS, conforme explicado nas outras respostas.)

((Especificando os dois rowse heightparecendo um pouco com a duplicação de dados, eu acho?))


2

Uma característica importante das áreas de texto é que elas são expansíveis. Em uma página da Web, isso pode resultar na exibição de barras de rolagem na área de texto se o comprimento do texto exceder o espaço definido (seja usando linhas ou usando CSS. Isso pode ser um problema quando um usuário decide imprimir, especialmente com 'printing' to PDF - defina uma altura mínima confortavelmente grande para áreas de texto impressas com uma regra CSS condicional:

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

2

se você não usar sempre, use line-height: '..'; property seu controle a altura da área de texto e a propriedade width para a largura da área de texto.

ou você pode usar o tamanho da fonte seguindo css:

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

2

Linhas e colunas HTML não respondem!

Então, eu defino o tamanho em CSS. Como uma dica: se você definir um tamanho pequeno para celulares, pense em usartextarea:focus {};

Adicione um espaço extra aqui, que só será revelado no momento em que um usuário quiser realmente escrever algo


-11

CSS


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

HTML


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

você pode fazer com o css muito facilmente
ASHU

Você pode fazer isso de maneira bidirecional por css ou pode alimentar manualmente dessa maneira <textarea lines = "4" cols = "50"> HELLO </textarea>
ASHU

Por que você aplicaria essas propriedades a todos os elementos?
precisa saber é o seguinte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.