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

<textarea>文本内容</textarea>

  

例子:

<form action="http://vip.biancheng.net/register.php" method="post">
描述信息:<textarea name="description">此处是描述信息</textarea>
</form>

  

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

属性:

1、cols属性

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

<textarea name="" id="" cols="30" placeholder="个人简介"></textarea>

  

2、rows属性

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

<p>
<textarea name="" id="" cols="30" rows="10" placeholder="个人简介"></textarea>
</p>

  

HTML——文本域的更多相关文章

  1. 苹果手机IOS中div contenteditable=true 仿文本域无法输入编辑

    问题: 在苹果手机IOS中 contenteditable="true" 做文本域输入,点击可以弹出键盘但是无法输入,安卓都正常. 经测试后,记得加一个样式 -webkit-use ...

  2. 解决:HTML中多文本域(textarea)回车后数据存入数据库,EL表达式取出异常。

    问题描述: 当多文本域(textarea)回车后数据存入数据库. EL表达式取出异常,值换行倒置页面报错. 问题解决: 存值脚本代码,提交前转换\n为<br/>. <script t ...

  3. 文本域的宽度和高度应该用cols和rows来控制,还是 用width和height来控制

    文本域宽度如果用cols来控制,缩放网页的时候文本域的宽度不会自动变化 用width来表示就会跟着网页缩放而缩放 看到下面一段文字: 对于内容至上的网页,在禁用CSS的情况下,HTML内容要做到易于阅 ...

  4. HTML文本域属性设置

    1.设置文本域的字体 <TEXTAREA STYLE="font-size:9pt;font-family:verdana;color:#333333">输入内容< ...

  5. jquery 文本域光标操作(选、添、删、取)

    一.JQuery扩展 ; (function ($) { /* * 文本域光标操作(选.添.删.取)的jQuery扩展 http://www.cnblogs.com/phpyangbo/p/55286 ...

  6. javaSwing文本域文件

    public class JTextAreaTest extends JFrame{    public JTextAreaTest()    {            setSize(200, 40 ...

  7. Bootstrap系列 -- 16. 文本域textarea

    文本域和原始使用方法一样,设置rows可定义其高度,设置cols可以设置其宽度.但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性.因为Bootstrap框 ...

  8. JS-007-富文本域操作

    在日常 web 编写过程中,富文本域几乎成为了一个网站不可页面元素,同时,其也有着各种各样的实现方式,网络上也存在着各种各样的集成插件可供引用.此文以 js 获取.修改 163 邮箱写邮件时的邮件内容 ...

  9. JavaScript:文本域事件处理

    文本域往往可以输入大量的文字信息,但是在文本域上有一些键盘的处理事件:onkeydown.onkeypress.onkeyup. 范例一:观察文本域的键盘事件处理 代码如下: 效果图如下: 默认状态: ...

  10. Placeholdem文本域占位符符号标识JavaScript插件

    Placeholdem是文本域占位符符号标识的一个JavaScript插件.占位符的值将逐步删除焦点文字,并在焦点离开逐步恢复. 在线demo:http://placeholdem.jackrugil ...

随机推荐

  1. 《深入理解Java虚拟机》读书笔记: 虚拟机类加载的时机和过程

    虚拟机类加载的时机和过程 一.类加载的时机 类从被加载到虚拟机内存中开始,到卸载出内存为止,它的整个生命周期包括:加载(Loading).验证(Verification).准备(Preparation ...

  2. 优先队列的基本实现【数据结构与算法—TypeScript 实现】

    笔记整理自 coderwhy 『TypeScript 高阶数据结构与算法』课程 特性 效率比普通队列高 每个出队元素拥有最高优先级 可以用 数组.链表 等数据结构实现,但是 堆结构 是最常用的实现方式 ...

  3. 重新整理 .net core 实践篇——— 测试控制器[四十九]

    前言 其实就是官方的例子,只是在此收录整理一下. 正文 测试控制器测试的是什么呢? 测试的是避开筛选器.路由.模型绑定,就是只测试控制器的逻辑,但是不测试器依赖项. 代码部分: https://git ...

  4. linux中nginx的https证书过期替换

    linux中nginx的https证书过期替换 工作记录,不然老是忘 一般提示这个就说明过期了 首先把新的证书换上去,最好和之前的文件名字一样,这样就不用改配置文件了 路径就自己找了需要,不过一般挺好 ...

  5. HarmonyOS NEXT应用开发案例——全屏登录页面

    全屏登录页面 介绍 本例介绍各种应用登录页面. 全屏登录页面:在主页面点击跳转到全屏登录页后,显示全屏模态页面,全屏模态页面从下方滑出并覆盖整个屏幕,模态页面内容自定义,此处分为默认一键登录方式和其他 ...

  6. 阿里云张新涛:连接产业上下游,构建XR协作生态

    简介: 用交互技术辅以澎湃的算力带给大家最真实的"沉浸式体验" 2022年9月2日,在世界人工智能大会"区块新生 数字宇宙--元宇宙技术与生态合作"分论坛上,阿 ...

  7. Flink 源码 | 自定义 Format 消费 Maxwell CDC 数据

    Flink 1.11 最重要的 Feature -- Hive Streaming 之前已经和大家分享过了,今天就和大家来聊一聊另一个特别重要的功能 -- CDC. CDC概述 何为CDC?Chang ...

  8. 云原生DevOps的5步升级路径

    简介: 究竟什么是云原生DevOps呢?我们认为:云原生DevOps是充分利用云原生基础设施,基于微服务/无服务架构体系和开源标准,语言和框架无关,具备持续交付和智能自运维能力,从而做到比传统DevO ...

  9. 从 Flink Forward Asia 2021,看Flink未来开启新篇章

    ​简介:本文将对FFA Keynote议题作一些简单的归纳总结,感兴趣的小伙伴们可以在FFA官网[2]找到相关主题视频观看直播回放. ​ 作者 | 梅源(Yuan Mei) 来源 | 阿里技术公众号 ...

  10. 2021年阿里云年中钜惠攻略,注册即可抽 iPhone 12 Pro 等好礼

    简介: 七月流火,燃情盛夏!值此季节,阿里云又推出了年中钜惠,精选百款产品,助力创业新势力.从7月26日开始,每天上午10点.下午4点将会放出爆款产品,进行限量秒杀,大家不要错过.注册登陆还可抽取 i ...