HTML宝典(第 1 版)
3.3.3 textarea控件
阅读(

HTML基础

HTML元素

表单及应用

什么是表单

Form元素

表单控件

input控件

label控件

textarea控件

textarea控件用来创建一个支持多行的文本输入区域,如果没有使用 maxlength  属性限制文本区域的最大字符数量,访问者可以输入多达 32700 个字符。

可以通过 rows 属性和 cols 属性,来定义 textarea控件的默认尺寸,即可见的行数和列数。由于 textarea控件没有 value 属性,在定义 textarea控件时,出现在 <textarea> 和 </textarea> 之间的文本,就是控件的默认值。如:

<textarea name="comment" rows="5" cols="50">这里是 textarea 的内容</textarea>

上述代码定义了一个多行输入文本区域,其默认尺寸为 5 行×50 列,并包含默认值。运行结果如图 3‑23 所示:

textarea控件
图3-23 textarea控件

定义 rows 属性后,当用户输入的行数超过 rows 属性设定的值后,textarea控件会自动添加滚动条。因此,为了方便用户使用,可以根据应用场景,大概预测一下用户要输入文本的行数,并设定合理的行数。当然,用户可以通过拖曳 textarea控件右下角的斜线,来改变控件的大小。但是,如果设置了textarea { resize: none; },就无法执行拖曳操作了。

虽然可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过,在实际应用中,最好还是使用 CSS 的 height 和 width 属性,来显式设置 textarea控件的宽度和高度。

可以通过 placeholder 属性来定义 textarea控件的占位文本,如果同时定义了默认值和 placeholder 属性,则优先显示默认值。

提交表单时,textarea元素的 name 属性值和用户在 <textarea> 和 </textarea> 之间输入的文本,将会被提交到服务器端。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验