区别:

  1. <textarea>标签是成对的,有结束标签进行闭合,标签的内容写在标签对中间;<input>是单个标签,标签的内容通过 value 属性设置;
  2. <textarea>的值是纯文本;<input>的值根据类型不同而不同;
  3. <textarea>没有type属性;<input>有多种type来满足表单与用户的数据交互;
  4. <textarea>的值可以是多行的,并且有rowscols来控制多行结构;<input>的值是单行的;

用div模拟textarea的步骤:

  1. 给 div 添加一个HTML全局属性:contenteditable="true",使 div 元素变成用户可编辑的;
  2. 给 div 添加样式 resize: vertical;,使 div 可以被用户调整尺寸,注意:别忘了设置 overflow: auto; 样式,因为resize样式不适用于overflow: visible;的块,不然 resize 不起效哦;
  3. 增加一个属性:placeholder="I am placeholder"
  4. 通过 CSS 选择器获取并显示 placeholder 的值;

input和textarea的区别的更多相关文章

  1. HTML中<input>和<textarea>的区别

    在HTML中有两种方式表达文本框 一个是<input>元素的单行文本框 一种是<textarea>的多行文本框. <input>元素: 1.一定要指定type的值为 ...

  2. 知识点---<input>、<textarea>

    一.在pc端的input是一个大的知识点 [1]文本框 <input type="text"> [2] 密码框 <input type="passwor ...

  3. 关于<button> 没写 type='button' 导致点击时提交以及<button>和<input type="button">的区别

    这是我的第一篇博客,如果写的不好,请见谅 这是一个关于button按钮一个小问题 最近刚开学跟着老师一起写代码,在模仿JAVA web程序设计(慕课版) P61页第三章 Ajax处理XML的代码中发现 ...

  4. 取消chrome浏览器下input和textarea的默认样式;html5默认input内容清除“×”按钮去除办法

    取消chrome浏览器下input和textarea的默认样式: outline:none;/*清空chrome中input的外边框*/ html5默认input内容清除“×”按钮去除办法: inpu ...

  5. $POST 、$HTTP_RAW_POST_DATA、php://input三者之间的区别

    $POST .$HTTP_RAW_POST_DATA.php://input三者之间的区别 访问原始 POST 数据的更好方法是 php://input或者$HTTP_RAW_POST_DATA.$H ...

  6. button与input[type=”button”]的区别

    button与input[type="button"]的区别 特别感谢 @守护晴天 ,指出了博客中不细致不严谨的地方,也让我学到了更多,更多是觉得抱歉,由于自己的不细致可能误导了一 ...

  7. 去掉谷歌浏览器获取焦点时默认的input、textarea的边框和背景

    去掉chrome(谷歌)浏览器默认的input.textarea的边框(border)和背景(background) 及chrome下不可更改textarea大小 1.使用Chrome的都知道,当鼠标 ...

  8. iScroll滚动区域中select、input、textarea元素无法点击的Bug修复

    最近在一个项目中使用了iScroll4模拟滚动效果,调试过程中发现一个表单页中的所有表单项都无法点击聚焦, 如<select>.<input>.<textarea> ...

  9. 取消chrome浏览器下input和textarea的默认样式

    最近一个细节引起了我的注意,chrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框,而且textarea还可以任意拖动放大,这是不能容忍的,影响美观不说,有时候拖动texta ...

随机推荐

  1. superset采集流程

    superset采集流程: 先从业务的bi从库oride-slave-bi(10.52.123.212)去拿数,然后计算(每10分钟由airflow调py代码),放到bi的库(BI业务-数据指标存储1 ...

  2. 20191204-使用nginx解决ajax测试调用接口跨域问题

    问题描述 之前要测试一个http的接口,在postman中测试成功,但使用ajax调用却跨域.于是通过使用ngin反向代理的方式来解决ajax调用跨域问题 测试页面的内容 <html> & ...

  3. Java更新Oracle的clob类型字段

    Java更新Oracle的clob类型字段 1.查询该clob字段 2.处理该clob字段查询结果 3.更新该clob字段查询结果 1.查询该clob字段 <select id="se ...

  4. python+pycharm+PyQt5 图形化界面安装教程

    python图形化界面安装教程 配置环境变量 主目录 pip所在目录,及script目录 更新pip(可选) python -m pip install --upgrade pip ps:更新出错一般 ...

  5. 什么是NameNode和DataNode?他们是如何协同工作的?

    [学习笔记] 什么是NameNode和DataNode?他们是如何协同工作的? 马克-to-win @ 马克java社区:一个HDFS集群包含一个NameNode和若干的DataNode(start- ...

  6. T100——英文版凭证报表

    范例:cxrr001 效果:增加英文版报表选择 1.azzi301,复制cxrr001_g01,把样板编号改为cxrr001_g01_01: 2.下载cxrr001_g01的GR样板,把cxrr001 ...

  7. 植物大战僵尸:寻找阳光掉落Call调用

    实验目标:通过遍历阳光产生的时间,寻找阳光产生的本地Call,使用代码注入器注入,自定义生成阳光 阳光CALL遍历技巧: 进入植物大战僵尸-> 当出现阳光后->马上搜索未知初始数值 返回游 ...

  8. Java 日志系统

    Java 日志系统 1. 创建日志记录器 private final Logger logger = LoggerFactory.getLogger(LoggerTest.class); 2. 打印日 ...

  9. Spring 的 AOP 概述和底层实现

    Spring 的 AOP 概述和底层实现 1. 什么是 AOP AOP (Aspect Oriented Programing),即面向切面编程 AOP 采取横向抽取机制,取代了传统纵向继承体系重复性 ...

  10. tracert命令详解_tracert结果详解_tracert命令使用详解

    17:06:40 正在等待客服售后工程师令狐冲接入,您可以先简单描述所要咨询的问题,如果长时间没有响应,您也可以 重新选择客服 . 17:06:42 您好,客服售后工程师令狐冲为您服务.售后工程师令狐 ...