我应该使用CSS宽度/高度或HTML cols / rows属性来设置textarea大小吗?

每当我开发一个包含textarea的新表单时,当我需要指定它的尺寸时,我有以下两难textarea

使用CSS或使用textarea的属性colsrows

每种方法的优缺点是什么?

什么是使用这些属性的语义?

通常如何做?

我build议使用这两个。 如果客户端不支持CSS,则行和列是必需的和有用的。 但作为一名devise师,我会覆盖他们,以获得我想要的尺寸。

推荐的方法是通过外部样式表,例如

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

在HTML集

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

在CSS集

 textarea { height: auto; } 

这将触发浏览器将textarea的高度设置为行数加上周围的填充。 将CSS高度设置为精确的像素数将会留下任意的空格。

根据w3c,cols和rows是textareas的必需属性。 行和列是将在textarea适合的字符数,而不是像素或一些其他可能的任意值。 去与行/列。

答案是“是”。 也就是说,你应该使用两者。 如果没有行和列(即使没有显式使用默认值),如果CSS被禁用或被用户样式表覆盖,textarea就会变得很小。 始终保持对可访问性的关注。 这就是说,如果你的样式表被允许控制textarea的外观,你通常会看到一些看起来好得多的东西,适合整个页面devise, 并且可以resize以跟上用户input在良好的口味范围内,当然)。

textarea的大小可以由cols和rows属性指定,甚至更好; 通过CSS的高度和宽度属性。 所有主stream浏览器都支持cols属性。 一个主要区别是<TEXTAREA ...>是一个容器标签:它有一个开始标签()。

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

我通常不指定height ,但指定width: ...rowsrows

通常,在我的情况下,只需要widthrows ,textarea相对于其他elem看起来不错。 (如果有人不使用CSS, cols是一个后备,正如其他答案中所解释的那样)

((指定rowsheight感觉有点像复制数据,我认为?))

textareas的一个主要特点是它们是可扩展的。 在网页上,如果文本长度超出了设置的空间(使用行或者使用CSS),就会导致滚动条出现在文本区域上。当用户决定打印时,这可能是一个问题,特别是'打印'为PDF – 所以用一个有条件的CSS规则为打印的textareas设置一个舒适的大的最小高度:

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

如果你不使用每一次使用line-height:'..'; property控制textarea的高度和textarea的宽度width属性。

或者你可以使用下面的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>