HTMLtextarea多行文本框的格式属性和样式调整方法-html教程-PHP中文网

HTMLtextarea多行文本框的格式属性和样式调整方法

雪夜

发布： 2025-10-11 08:13:01

原创

423人浏览过

textarea通过属性设置与CSS样式可提升用户体验，1. 设置cols、rows、placeholder、maxlength等属性控制结构与行为；2. 使用CSS调整宽高、边框、字体、聚焦效果；3. 结合响应式设计与JavaScript实现自适应与自动增高功能。

htmltextarea多行文本框的格式属性和样式调整方法

在网页开发中，textarea 是用于获取用户多行文本输入的常用表单元素。虽然它默认样式较为简单，但通过合理的属性设置和 CSS 样式调整，可以实现良好的用户体验和视觉效果。

基本格式属性设置

通过设置 textarea 的常见属性，可以控制其初始行为和结构：

cols：定义文本框的可见宽度（以字符数为单位），例如 cols="40"
rows：定义文本框的可见行数，例如 rows="5"
placeholder：输入提示文字，帮助用户理解应填写的内容
maxlength：限制用户输入的最大字符数
readonly 或 disabled：控制是否可编辑
required：在表单提交时验证是否为空

示例代码：

<textarea cols="50" rows="6" placeholder="请输入内容..." maxlength="200" required></textarea>

登录后复制

CSS样式自定义方法

使用 CSS 可以更灵活地控制 textarea 的外观和交互体验：

立即学习“前端免费学习笔记（深入）”；

方正魏碑简体

魏碑是指南北朝时期北朝的碑刻书法作品。现存的魏碑书体都是楷书，因此有时也把这些楷书碑刻作品称为“魏楷”。魏碑原本也称北碑，在北朝相继的各个王朝中以北魏的立国时间最长，后来就用“魏碑”来指称包括东魏、西魏、北齐和北周在内的整个北朝的碑刻书法作品。这些碑刻作品主要是以“石碑”、“墓志铭”、“ 摩崖”和“造像记”的形式存在的。构扁方疏朗，内紧外松，多出隶意。此墓志虽属正书，行笔却不拘一格，风骨内敛，自

查看详情

width 和 height：用像素或百分比设定尺寸，替代 cols/rows 的固定字符单位
resize：控制是否允许用户拖动调整大小，可设为 none、vertical、horizontal 或 both
padding：增加内边距提升输入舒适度
border 和 border-radius：自定义边框样式和圆角
font-family、font-size：统一输入字体风格
outline：去除或自定义聚焦时的默认外框
background-color 和 color：设置背景与文字颜色

示例样式：

textarea {
  width: 100%;
  height: 120px;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  resize: vertical;
  outline: none;
}
textarea:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0,123,255,0.3);
}

登录后复制