Devo dimensionar um textarea com atributos CSS width / height ou HTML cols / rows?
cada vez que desenvolvi uma nova forma que inclui um {[[0]} tenho o seguinte dilema quando preciso especificar as suas dimensões:
usar CSS ou usar os atributos de textarea cols e rows?
Quais são as semânticas de usar estes atributos?
Como é que se faz normalmente?10 answers
Eu recomendo usar ambos. Linhas e cols são necessários e úteis se o cliente não suportar CSS. Mas como designer, eu os substituo para obter exatamente o tamanho Que Eu desejo.
A forma recomendada para o fazer é através de uma folha de estilo externa, por exemplo
textarea {
width: 300px;
height: 150px;
}<textarea> </textarea>No conjunto HTML
<textarea rows="10"></textarea>
No conjunto CSS
textarea { height: auto; }
Isto irá despoletar o navegador para definir a altura do textarea exactamente para a quantidade de linhas mais as paddings em torno dele. Configurar a altura do CSS para uma quantidade exacta de pixels deixa espaços em branco arbitrários.
De acordo com o w3c, os caracteres cols e as linhas são atributos necessários para os campos de texto. Linhas e Cols são o número de caracteres que vão caber na textarea ao invés de pixels ou algum outro valor potencialmente arbitrário. Vai com as linhas / cols.
O tamanho de uma área de texto pode ser especificado pelos atributos cols e linhas, ou ainda melhor; através das propriedades de altura e largura do CSS.
O atributo cols é suportado em todos os navegadores principais.
Uma diferença principal é que <TEXTAREA ...> é uma marca de contêineres: ela tem uma marca inicial ().
<textarea style="width:300px; height:150px;" ></textarea>
Normalmente não especifique {[[0]}, mas especifique width: ... e rows e cols.
Normalmente, nos meus casos, apenas width e rows são necessários, para que a área de texto pareça agradável em relação a outros elemas. (E cols é um recuo se alguém não usa CSS, como explicado nas outras respostas.)
(especificando ambos rows e height parece-se um pouco com a duplicação de dados, acho eu?))
Uma característica importante das áreas de texto é que elas são expansíveis. Em uma página web Isso pode resultar em barras de posicionamento aparecendo na área de texto se o comprimento de texto exceder o espaço que você definir (seja o que usa linhas, ou seja o que usa CSS. Isso pode ser um problema quando um usuário decide imprimir, particularmente com 'impressão' para PDF - então defina uma altura mínima confortavelmente grande para áreas de texto impressas com uma regra CSS condicional:
@media print {
textarea {
min-height: 900px;
}
}
Se não usar sempre a altura da linha:"..'; property its control the height of textarea and width property for width of textarea.
Ou pode usar o tamanho da fonte se seguir ao css:
#sbr {
font-size: 16px;
line-height:1.4;
width:100%;
}
CSS
input
{
width: 300px;
height: 40px;
}
HTML
<textarea rows="4" cols="50">HELLO</textarea>