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 ...
随机推荐
- [Nowcoder212D]禁书目录_概率期望
禁书目录 题目大意:清教需要定期给Index清除记忆,在此之前需要把当中的十万三千本禁书取出来......不幸的是,禁书一旦离开了Index就非常脆弱,具体来说,每一本禁书都有一个魔力值 ai ,其记 ...
- vsphere6.7-虚拟机与ESXI时间同步
环境介绍 esxi 6.7+vsphere6.7 需求配置 设置虚拟机时间与esxi时间同步.esxi时间与NTP服务器同步 配置方式 在esxi上开启NTP服务器时间同步,如下图: 修改虚拟服务器的 ...
- Base64encoder干什么用的
https://baike.baidu.com/item/base64/8545775?fr=aladdin BASE64加密算法.用来给字符串加密的.已经不安全了. 一直以来Base64的加密解密都 ...
- Vue.js学习笔记-script标签在head和body的区别
初学JavaScript,项目需要没有系统学习,只能边查资料边码代码,埋下的坑不知道有多少,还是建议时间充足的情况下系统的将Javascript学习一遍 ,涉及的HTML知识也务必了解. 问题 最开始 ...
- go install
go get使用时的附加参数 使用 go get 时可以配合附加参数显示更多的信息及实现特殊的下载和安装操作,详见下表所示. go get 使用时的附加参数 附加参数 备 注 -v 显示操作流程的日志 ...
- flume收集日志直接sink到oracle数据库
因为项目需求,需要保存项目日志.项目的并发量不大,所以这里直接通过flume保存到oracle 源码地址:https://github.com/jaxlove/fks/tree/master/src/ ...
- mvc验证码图片生成
/// <summary> ///生成验证码 /// </summary> public class VerifyCode { /// <summary> /// ...
- webmagic学习之路-1:采集安居客列表页测试
---恢复内容开始--- package com.action; import java.util.ArrayList; import java.util.List; import java.util ...
- mybatis 插入语句 返回自增长id方法
背景:目前有个插入语句需要获取插入记录的id 因为id是自增长的,所以要在插入后返回这个id 错误1: mapper.xml: <!-- 新增 返回自增长id--> <insert ...
- 【Javascript】 js的构造函数与原形对象的关系
构造函数只是提供了一个创建对象的模板,它并不是对象的原形. 对象的原形是构造函数的原形,即object. ----------------------------------------------- ...