表单进阶（5）-文本域

最新推荐文章于 2024-04-09 19:55:52 发布

叶不休

最新推荐文章于 2024-04-09 19:55:52 发布

阅读量454

点赞数 7

分类专栏：前端文章标签： javascript 前端开发语言 html5 css chrome css3

本文链接：https://blog.csdn.net/weixin_58694594/article/details/136605489

版权

前端专栏收录该内容

43 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用CSS来设置文本域的大小，包括`resize`属性的不同选项以及`placeholder`的使用。还提到了`cols`和`rows`的设置，以及如何在HTML中创建一个带有默认值和提示文本的多行文本输入区域。

摘要由CSDN通过智能技术生成

默认文本框可以用自由拖动控制大小

通过设置在css中设置控制：

resize:重新设置文本框大小 horizontal（水平），vertical（垂直），none（不能控制大小），默认both（都可以）

placeholder:文本框背景的提示文字。不可删除

默认value：写在双标签内部。注意空格

一般通过css设置文本域大小

cols设置列，rows设置行（一般不用）

<textarea cols="30" rows="10" placeholder="请输入你的意见">提前设置好的文本可删除注意空格 </textarea>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        textarea{
            width: 300px;
            height: 500px;
            resize: none;
            /* resize:重新设置文本框大小 horizontal（水平），vertical（垂直），none（不能控制大小），默认both（都可以） */
        }
    </style>
</head>
<body>
    <h1>多行文本输入-文本域</h1>
    <div>

        <!-- placeholder:背景提示文字。不可删除 -->
        <!-- 默认value：写在双标签内部。注意空格 -->
        <textarea cols="30" rows="10" placeholder="请输入你的意见">提前设置好的文本可删除             注意空格
        </textarea>
    </div>
</body>
</html>

叶不休

关注

7
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
表单进阶（5）-文本域

默认文本框可以用自由拖动控制大小通过设置在css中设置控制：resize:重新设置文本框大小 horizontal（水平），vertical（垂直），none（不能控制大小），默认both（都可以）placeholder:文本框背景的提示文字。不可删除默认value：写在双标签内部。注意空格一般通过css设置文本域大小cols设置列，rows设置行（一般不用）提前设置好的
复制链接

扫一扫

专栏目录