文本域

定义

文本域是网页表单中用于输入或显示多行纯文本的可编辑控件，在 HTML 中对应的元素为 textarea^[1]。它允许使用者输入大量自由格式的文本，典型场景是评论、留言与反馈表单^[1]。

与之相近但不同的概念是单行输入框，后者由 input 元素配合 type 属性为 text 或 password 的形式提供，一次只显示一行文字；textarea 则是独立元素，可容纳多行内容^[3]。业内通常把 textarea 直接称作文本域，而把单行输入框称为文本框或单行文本域^[4]。在报表工具与低代码平台中，同一概念被称为文本域控件，用于在填报界面或参数面板录入多行文本^[5]。

原理

文本域的实现分两层。在 HTML 标记层，textarea 是一个双标签元素，开始标签与结束标签之间的文字构成控件的默认值，元素的 name 属性决定表单提交时发送到服务器的数据项名称^[1]。由于内容直接写在标签体内，textarea 不支持 value 属性；在 JavaScript 中则可通过 value 读取或写入当前内容，通过 defaultValue 读取或设置初始值^[2]。

尺寸与换行由属性控制。rows 指定可见文本行数，未指定时默认为 2；cols 以平均字符宽度为单位指定可见宽度，未指定时默认为 20^[1]。wrap 属性决定提交时是否按 cols 宽度插入换行符，取 soft 时不添加，取 hard 时要求同时指定 cols^[6]。规范建议使用者代理在文本超出可见范围时通过滚动而不是截断来容纳内容^[7]。

在文档对象模型层，textarea 对应 HTMLTextAreaElement 接口，除继承自 HTMLElement 的属性和方法外，还提供 select() 选中全部内容、setSelectionRange() 选中指定片段、setRangeText() 替换片段，以及 checkValidity()、setCustomValidity() 等约束验证方法^[8]。该接口同时暴露 selectionStart、selectionEnd、textLength、validity 等只读属性，供脚本获取光标位置、内容长度与校验状态^[8]。

发展历程

表单式多行文本输入最初并非独立元素。早期表单设计试图用 input 元素配合 type 属性为 text 的方式承载多行字段，但 SGML 对属性字面量的长度限制使长文本难以存放，SGML 的默认上限为 240 个字符，HTML 2.0 的声明才把上限提高到 1024 个字符^[7]。把内容放进元素内部而非属性值，成为文本域独立成元素的直接原因^[7]。

1995 年 3 月 28 日的 HTML 3.0 草案已对 TEXTAREA 作出规定，要求各行尺寸由 ROWS 与 COLS 决定，并说明标签之间的文字用于初始化字段值^[7]。1995 年 11 月发布的 HTML 2.0 规范 RFC 1866 将 TEXTAREA 与 INPUT、SELECT 并列为相互独立的表单元素，并在表单提交示例中以 name、cols、rows 组合使用^[9]。

此后规范逐步补充交互属性。1997 年的表单设计草案把 disabled 应用于 INPUT、TEXTAREA、SELECT 等元素，并规定 readonly 适用于 TEXTAREA，使只读文本域仍能提交数据而非被视作无关字段^[10]。HTML5 阶段又为 textarea 引入 placeholder、required、autofocus、maxlength、minlength、form 等属性，其中 form 属性允许把文本域放在表单元素之外仍与之关联^[6]。按浏览器兼容性统计，该元素自 2015 年 7 月起在主流浏览器中普遍可用^[1]。

应用

在网页与 Web 应用中，文本域主要承担长文本录入。常见用途包括文章评论、用户反馈、联系表单中的消息框以及个人简介等需要多行书写的栏目^[11]。开发者常借助 maxlength 限制可输入字符数、借助 disabled 或 readonly 控制是否可编辑，并用 CSS 的 resize 属性决定是否允许使用者拖动调整尺寸^[11]。

在企业级工具中，文本域以控件形式出现。报表工具 FineReport 的文本域控件可用于填报报表录入多行数据，也可置于参数面板输入查询条件，其填写规则支持长度校验与正则表达式自定义校验，并允许设置水印提示与是否允许为空^[5]。该控件支持换行符，在填报预览界面需按 Ctrl+Enter 换行，在参数面板与决策报表中按 Enter 即可换行^[12]。

低代码与移动应用平台同样提供文本域组件。阿里云 Mobi 的文本域组件面向长文本展示，可配置只读、提示文字、最大字符长度、展示行数与自动行数，并可绑定数据实体中类型为 CHAR、TEXT 等可显示属性的字段^[13]。该组件支持在内容变化时触发事件，也支持必填项、电子邮件和自定义表达式等表单校验^[13]。

局限

文本域在能力上有明确边界。它编辑的是纯文本，标签之间的内容除实体与字符引用外按字面文本处理，因此不能直接在其中渲染 HTML 结构^[14]。需要加粗、插图、表格等富文本格式时，通常改用带 contenteditable 属性的可编辑区域，再由脚本把结果写回隐藏的文本域随表单提交^[15]。

受浏览器默认样式影响，文本域的呈现一致性有限。不同浏览器对 rows、cols 的默认值处理并不相同，因此规范与文档均建议显式设置尺寸以保持一致^[1]。CSS 2.1 并未规定哪些属性适用于表单控件，仅建议作者把相关支持视为实验性，这使 textarea 等控件在跨浏览器定制样式时长期存在差异^[16]。

此外，文本域原生不自带提交语义之外的处理逻辑。部分第三方控件存在功能限制，例如报表工具中的文本域控件不支持用 Ctrl+Z 撤销输入，其换行符虽可随数据入库，但需在模板预览时才能看到换行效果^[12]。若需要字数统计、语法高亮或自动补全等能力，须另行通过脚本实现。

参见

• HTML —— 文本域是 HTML 表单规范中定义的元素之一。

• 表单 —— 文本域是表单收集用户输入的主要控件类型。

• HTML5 —— 该版本为文本域补充了占位提示、必填等属性。

• 文档对象模型 —— 文本域在脚本中对应 HTMLTextAreaElement 接口。

• 统一资源定位符 —— 表单提交时文本域的数据随请求发往服务器地址。