前端技巧关于文本输入框的标签textarea的常识

关于文本输入框的标签textarea的常识

在html中可以出现一个支持多行文本的文本输入框,网站用户可以对框内的文字进行编辑等操作,文本输入框的标签为textarea,这是一个多行文本输入控件。一般的,在这个文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体。

下面我们简单的做一个多行文本框:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
body {margin:50px;}
textarea {width:300px;height:120px;padding:10px;font-size:16px;}
</style>
</head>
<body>
<textarea>
香港是一座高度繁荣的国际大都市,全境由香港岛、九龙半岛、新界三大区域组成,总人口约720万人,人口密度居全世界第三。
</textarea>
</body>
</html>

这里我们用CSS定义了文本框的尺寸,如果使用Chrome或火狐等浏览器,则用户可以使用鼠标拖动文本框的大小。如果不想用户拖动文本框的大小,则可以使用下面的CSS定义:

textarea {resize:none;}

在没有做CSS设置的情况下,文本框的宽度靠cols属性来控制,cols表示一行中可容纳下的字节数。例如cols=60,表示一行中最多可容纳60个字节,也就是30个汉字。如果定义了cols的数值,再定义文版框内字体的大小,就可确定文本框的宽度。 

文本框的rows属性表示可显示的行数,例如rows=10,表示可显示10行。超过10行,则需要拖动滚动条来浏览了,同样道理,如果没定义CSS,那么文本框的高度就是通过可显示的行数来决定的。

下面介绍一下关于textarea标签的一些特殊属性:

如果想定义网页加载后文本框自动获取焦点,则应使用autofocus属性:

<textarea autofocus="autofocus"></textarea>

如果想定义文本输入框的最大字符长度,则应使用maxlength属性:

<textarea maxlength="140">此处最多可输入140字</textarea>

如果想定义文本框未输入文本前显示的文字(类似于搜索框中的请输入关键词的提示),可使用placeholder属性:

<textarea placeholder="请在此输入你的内容..."></textarea>

如果想设置文本框内的文本为只读,不可修改,则使用readonly属性:

<textarea readonly="readonly"></textarea>

如果想设置文本框的内容是必填的项目,则使用required属性:

<textarea required="required"></textarea>

此外,rows属性规定textarea的可见高度(取值为行数):

<textarea rows="value"></textarea>

文本框的wrap属性规定当文本在表单中提交时,文本框区域中的文本如何换行:

wrap="off" 表示文本框内的文字不自动换行,文本超过宽度后会出现横向滚动条。

wrap="soft" 表示当在表单中提交时,textarea中的文本不换行,此为默认值。

wrap="hard" 表示当在表单中提交时,textarea中的文本换行(包含换行符)。当使用 "hard" 时,文本框必须规定cols属性。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.flooren.com.cn/skill/57.html