在使用表单时,例如姓名、年龄字段我们可以使用单行文本框,但是当涉及到描述信息,内容比较多时,单行文本框很有可能放不下所有的内容,这时就需要用到多行文本框。

在 HTML 中,使用 标签来表示多行文本框,又叫做文本域。与其它 标签不同, 标签是单闭合标签,它包含起始标签和结束标签,文本内容需要写在两个标签中间。具体语法格式如下:

文本内容

接下来我们通过一段简单的代码来看一下:

描述信息:此处是描述信息

运行效果如图所示:

图1:HTML 文本域

通过运行结果可以发现,文本域的右下角有一个收缩按钮,拖拽按钮可以手动改变文本域的宽高。这个按钮默认显示,也可以隐藏,我们来看一下怎么隐藏它呢?

描述信息:此处是描述信息

注意:此处用到的是 CSS 样式中的内容,读者只需了解即可。当收缩按钮隐藏后,不能手动调节文本域的宽高。

同所有表单元素相同,文本域要想正确提交,也必须设置 name 属性。除了 name 属性以外,文本域还有其它属性,接下来我们看一下:

文本域其它属性

其他属性

说明

cols

用来指定每行显示的字符数。

rows

用来指定正常情况下(没有滚动条)显示的文本行数。

id

用来定义文本域的唯一 id 属性。

1. cols属性

cols 属性用来指定每行可以显示的字符数,也就是文本域的可见宽度。一般情况下,如果内容超出文本域宽度,会自动换行显示,但是如果文本内容较长,而且在大于文本域宽度时,还没有空格可以进行换行,就会出现横向滚动条。

我们来看一个示例:

HTML教程描述:这套「HTML教程」可以帮助读者快速入门,其中包含了作者大量的实践经验,将知识系统化,浓缩为精华,用通俗易懂的语言直指网页设计初学者的痛点。

运行结果如图所示:

图2:设置了宽度的文本域

通过运行结果可以发现,当文本内容超出了文本域的宽度时,会自动换行显示。这时,出现了纵向的滚动条是因为高度不够。下面我们就来学习一下如何设置文本域的高度。

2. rows属性

在文本域中,rows 属性用来设置文本域的可见行数,也就是文本域的高度。当文本内容超出设置高度时,会出现纵向滚动条。用户拖动滚动条可以查看全部内容。

示例如下:

HTML教程描述:这套「HTML教程」可以帮助读者快速入门,其中包含了作者大量的实践经验,将知识系统化,浓缩为精华,用通俗易懂的语言直指网页设计初学者的痛点。

运行结果如图所示:

图3:设置了高度的文本域

通过运行结果可以看出,当文本高度小于文本域高度时,不会出现纵向滚动条。

注意:除了使用 rows、cols 属性设置文本域的宽高,css 也可以实现,在 css 教程中我们会详细讲解。

3. id属性

id 属性用来定义文本域的唯一 id 值。为文本域添加 id 属性,主要有以下 2 个方面:

在 css 中,可以使用 id 获取元素为其添加 css 样式;

在 JavaScript 中,可以根据设置好的 id 属性获取文本域,然后对它进行一系列操作,例如操作文本域的内容。

mysql设置文本域边框_HTML textarea标签(文本域)相关推荐

  1. html之CSS设计(文本、边框、列表标签、display设置、内外边距)

    文章目录 一.文本属性 二.边框属性 三.列表标签 四.display设置 五.内外边距 本篇文章主要介绍CSS设计中的文本属性.边框边距.列表标签.display的几种用法,还有一个最容易被忽视的点 ...

  2. 文本分类模型_多标签文本分类、情感倾向分析、文本实体抽取模型如何定制?...

    文心(ERNIE)是依托百度深度学习平台飞桨打造的语义理解技术与平台,集先进的预训练模型.全面的NLP算法集.端到端开发套件和平台化服务于一体,为企业和开发者提供一整套NLP定制与应用能力.在2020 ...

  3. delphi trichviewedit 设置一行的段落_HTML中的文本与段落(3)

    上期文章: panda456:小边框,大秘密​zhuanlan.zhihu.com 哈哈,没想到吧.自从以前连续出了两期HTML中的文本与段落,这次又出了一期. 就不多讲废话了,直接开门见山--这期文 ...

  4. 数据可视化之matplotlib实战:plt.xlabel() ylabel()函数 设置x轴y轴的标签文本

    import matplotlib.pyplot as plt import numpy as npx = np.linspace(0.05,10,1000) y = np.sin(x)plt.plo ...

  5. html 设置textarea字体颜色,textarea标签设置值

    html中怎样给textarea赋值 jquery给textarea赋值的方法跟普通input一样. 举例说明,有如下代码: $("" + "").append ...

  6. html在边框线中加文本框,怎么设置幻灯片里的文本框边框线?

    通过设置文本框格式来实现 选中刚刚插入的文本框,右键,选择"设置自选图形/图片格式": 在文本框格式中的颜色与线条界面中,将线条的颜色改为无颜色,然后点击保存. 可以用border ...

  7. Web前端 HTML常用标签 文本格式化标签 图像标签

    文本格式化标签 在网页中,有时需要为文字设置粗体.斜体或下划线等效果,这就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示. 标签语义:突出重要性,比普通文字更重要 语义 标签 说明 加粗 ...

  8. Highmaps网页图表教程之数据标签与标签文本

    Highmaps网页图表教程之数据标签与标签文本 Highmaps数据标签 数据标签用于在地图图表上展现节点对应的数据.数据标签展现数据是静态的,只要节点一加载,数据标签就会出现在节点附近.在High ...

  9. 多标签文本分类研究进展概述

    多标签文本分类研究进展概述 1.多标签文本分类的研究还有很大的提升空间. 2.多标签文本分类的基本流程,包括数据集获取.文本预处理.模型训练和预测结果: 3.多标签文本分类的方法:传统机器学习的方法和 ...

最新文章

  1. 在Ubuntu 16.04.6 LTS升级python 3.5.x到3.7.3之后导致gnome-ternimal无法打开的解决办法
  2. 并行博弈树搜索算法-第6篇 百花齐放:各种并行Alpha-Beta算法
  3. 如何在Chrome开发者工具console里手动调用focus方法给元素设置focus
  4. c#自定义控件做漂亮的列表
  5. 【snmp】测试流程
  6. Bean的自动装配Autowiring
  7. android studio2.4,Android Studio 2.4 Preview 7 发布
  8. 【Java】菜鸟教程个人Java学习笔记
  9. 转载:Gabor 特征总结
  10. QQ自定义表情巧收藏换了电脑照样用(转)
  11. SpringCloud-Alibaba之入门
  12. python fun函数、求4x4整型数组的主对角线元素的和_输入4行4列的二维数组,求计算主对角线各元素之和,计算副对角线各元素之和。...
  13. 【计算机网络】ARP协议工作原理
  14. 使用Meterperter会话获取目标屏幕与键盘记录
  15. 12306出票时间表,买别人买不到的票
  16. OSError: [Errno 22] Invalid argument问题解决
  17. 商务与经济统计 | 描述统计学
  18. DAC8760+STM32F407单电源电路硬件测试
  19. ppt在单机模式下(未连接投影设备)如何使用演讲者模式
  20. Github每日精选(第64期):IOS永久免费签名-TrollStore

热门文章

  1. shell编程(六) : [shell基础] 基本shell脚本
  2. 2021牛客暑期多校训练营9 Cells(LGV引理,FFT)
  3. VMware虚拟机的官网下载和安装激活(简单易懂)
  4. python中if函数的使用方法_Python-15 (if的基础使用)
  5. 如何通过 Matplotlib 绘制动画及保存 GIF 图片?
  6. Css教程玉女心经版本
  7. OpenGL透视投影原理与实现
  8. python输入秒数输出分钟小时_如何在Python中将时间数组分解为小时、分钟、秒?...
  9. 外滩画报: 人人都在玩网页游戏
  10. 微信小程序---上拉/下拉获取信息组件