我应该使用CSS宽度/高度或HTML cols / rows属性来设置textarea大小吗?
每当我开发一个包含textarea
的新表单时,当我需要指定它的尺寸时,我有以下两难textarea
:
使用CSS或使用textarea
的属性cols
和rows
?
每种方法的优缺点是什么?
什么是使用这些属性的语义?
通常如何做?
我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: ...
和rows
和rows
。
通常,在我的情况下,只需要width
和rows
,textarea相对于其他elem看起来不错。 (如果有人不使用CSS, cols
是一个后备,正如其他答案中所解释的那样)
((指定rows
和height
感觉有点像复制数据,我认为?))
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>