区别:

  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. 关于安装Git后,项目目录右键菜单无Git Bash Here命令的选项

    修改注册表配置 1.第一步,window + R,输入regedit回车进入注册表 2.依次进入HKEY_CLASSES_ROOT --> Directory -->Background ...

  2. vultr 更换服务器

    今天打算去p站看看电影 结果发现自己的vps被封了......记录一下换服务器的过程 首先去 https://www.17ce.com/ ping一下,发现只有国外的服务器能ping通 果然是被封了. ...

  3. ubuntu上安装及使用docker

    关于Docker: Docker 是一个开源项目,为开发者和系统管理员提供了一个开放的平台,在任何地方通过打包和运行应用程序作为一个轻量级的容器.Docker 在软件容器内自动部署应用程序.Docke ...

  4. POSTGRESQL日期函数大全

    一:各个数据中的连接符 SqlServer的连接符:+(加号) Sqlite的连接符:.(点) PostgreSQL的连接符:||(或) 二: 今天在PostgreSQL计算日期的时候,翻了一些资料, ...

  5. java水题集

    POJ - 1220 进制转换 import java.io.*; import java.util.*; import java.math.*; public class Main { public ...

  6. [POI2012]ROZ-Fibonacci Representation (贪心)

    大意: 给定数$n$, 求将$n$划分为最少的斐波那契数的和或差. 每次取相邻$n$的斐波那契数一定最优, 考虑证明. 结论1:存在一个最优解,使得每个斐波那契数使用不超过1次.(考虑$2F_n=F_ ...

  7. Eclipse 快捷键、文档注释、多行注释的快捷键

    关于快捷键 Eclipse 的很多操作都提供了快捷键功能,我们可以通过键盘就能很好的控制 Eclipse 各个功能: 一.多行注释快捷键 1.选中你要加注释的区域,用ctrl+shift+C 或者ct ...

  8. 04 Go语言之包

    1.为什么有包这个概念? 1)开发中,往往要在不同的文件中调用其他文件的函数 2)Go代码最小粒度单位是”包” 3)go的每一个文件都属于一个包,通过package管理 4)go以包的形式管理文件和项 ...

  9. git commit报错解决,绕过代码检查

    上一个项目用的svn,新项目用了git,很开心,终于学习了git了,本以为把git都学会了,但是还是遇到了一个不在自己学习的知识点范围内的问题,最后是同事帮忙解决的. 问题:第一次代码commit的时 ...

  10. apache备忘录

    apache多站点局域网访问: <VirtualHost *:80> DocumentRoot "E:/website/pxsj" ServerName host7.c ...