input和textarea的区别
区别:
<textarea>标签是成对的,有结束标签进行闭合,标签的内容写在标签对中间;<input>是单个标签,标签的内容通过value属性设置;<textarea>的值是纯文本;<input>的值根据类型不同而不同;<textarea>没有type属性;<input>有多种type来满足表单与用户的数据交互;<textarea>的值可以是多行的,并且有rows和cols来控制多行结构;<input>的值是单行的;
用div模拟textarea的步骤:
- 给 div 添加一个HTML全局属性:
contenteditable="true",使 div 元素变成用户可编辑的; - 给 div 添加样式
resize: vertical;,使 div 可以被用户调整尺寸,注意:别忘了设置overflow: auto;样式,因为resize样式不适用于overflow: visible;的块,不然resize不起效哦; - 增加一个属性:
placeholder="I am placeholder"; - 通过 CSS 选择器获取并显示 placeholder 的值;
input和textarea的区别的更多相关文章
- HTML中<input>和<textarea>的区别
在HTML中有两种方式表达文本框 一个是<input>元素的单行文本框 一种是<textarea>的多行文本框. <input>元素: 1.一定要指定type的值为 ...
- 知识点---<input>、<textarea>
一.在pc端的input是一个大的知识点 [1]文本框 <input type="text"> [2] 密码框 <input type="passwor ...
- 关于<button> 没写 type='button' 导致点击时提交以及<button>和<input type="button">的区别
这是我的第一篇博客,如果写的不好,请见谅 这是一个关于button按钮一个小问题 最近刚开学跟着老师一起写代码,在模仿JAVA web程序设计(慕课版) P61页第三章 Ajax处理XML的代码中发现 ...
- 取消chrome浏览器下input和textarea的默认样式;html5默认input内容清除“×”按钮去除办法
取消chrome浏览器下input和textarea的默认样式: outline:none;/*清空chrome中input的外边框*/ html5默认input内容清除“×”按钮去除办法: inpu ...
- $POST 、$HTTP_RAW_POST_DATA、php://input三者之间的区别
$POST .$HTTP_RAW_POST_DATA.php://input三者之间的区别 访问原始 POST 数据的更好方法是 php://input或者$HTTP_RAW_POST_DATA.$H ...
- button与input[type=”button”]的区别
button与input[type="button"]的区别 特别感谢 @守护晴天 ,指出了博客中不细致不严谨的地方,也让我学到了更多,更多是觉得抱歉,由于自己的不细致可能误导了一 ...
- 去掉谷歌浏览器获取焦点时默认的input、textarea的边框和背景
去掉chrome(谷歌)浏览器默认的input.textarea的边框(border)和背景(background) 及chrome下不可更改textarea大小 1.使用Chrome的都知道,当鼠标 ...
- iScroll滚动区域中select、input、textarea元素无法点击的Bug修复
最近在一个项目中使用了iScroll4模拟滚动效果,调试过程中发现一个表单页中的所有表单项都无法点击聚焦, 如<select>.<input>.<textarea> ...
- 取消chrome浏览器下input和textarea的默认样式
最近一个细节引起了我的注意,chrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框,而且textarea还可以任意拖动放大,这是不能容忍的,影响美观不说,有时候拖动texta ...
随机推荐
- addRoutes进行权限控制
用addRoutes实现动态路由:https://www.jianshu.com/p/0bea4a1b0350 详解基于vue,vue-router, vuex以及addRoutes进行权限控制:ht ...
- Javascript学习笔记二——操作DOM
Javascript学习笔记 DOM操作: 一.GetElementById() ID在HTML是唯一的,getElementById()可以定位唯一的一个DOM节点 二.querySelector( ...
- better-scroll踩坑合集
better-scroll踩坑合集:https://www.jianshu.com/p/6338a8033281
- spring-boot 使用jdk6(三)
环境 jdk 6 tomcat 7.0.59 sts 4.4.2 maven 3.2.5 背景 由于环境限制,还在使用 JDK6,所以需要将 spring boot 进行配置,支持JDK6. 以下所有 ...
- C++ MinGW 配合 Sublime Text 搭建
本文主旨 使用MinGW 和 文本编辑器 Sublime Text,来搭建c++编译的平台. Sublime Text 安装 和 解除限制 http://rainss.cn/essay/1124.ht ...
- linux的安装和配置
转载:https://www.cnblogs.com/hhaahh/p/10404093.html 1.VMware简介 此软件是一个虚拟的pc机软件,可以在现有操作系统中虚拟出一个新的硬件环境,以此 ...
- LeetCode 203——移除链表(JAVA)
删除链表中等于给定值 val 的所有节点. 示例: 输入: 1->2->6->3->4->5->6, val = 6 输出: 1->2->3->4 ...
- 2019牛客暑期多校训练营(第二场) - B - Eddy Walker 2 - BM算法
参考于: https://www.luogu.org/problemnew/solution/P4723 shadowice1984 (太难) https://www.cnblogs.com/zhgy ...
- windows环境下安装selenium+python
selenium 是一个web的自动化测试工具,不少学习功能自动化的同学开始首选selenium ,相因为它相比QTP有诸多有点: * 免费,也不用再为破解QTP而大伤脑筋 * 小巧,对于不同的语 ...
- [转载]Pytorch中nn.Linear module的理解
[转载]Pytorch中nn.Linear module的理解 本文转载并援引全文纯粹是为了构建和分类自己的知识,方便自己未来的查找,没啥其他意思. 这个模块要实现的公式是:y=xAT+*b 来源:h ...