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 ...
随机推荐
- [bzoj3162]独钓寒江雪_树hash_树形dp
独钓寒江雪 题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=3162 题解: 首先,如果没有那个本质相同的限制这就是个傻逼题. 直接树形dp ...
- makefile中=、:=和+=的区别
经常有人分不清= .:=和+=的区别 这里我总结下做下详细的分析: 首先你得清楚makefile的运行环境,因为我是linux系统,那么我得运行环境是shell 在Linux的shell里,shel ...
- 【深入浅出-JVM】(1):Java 虚拟机
Java 虚拟机地位 种类 BEA的JRockit Solaris的Exact VM IBM的J9 感谢您的耐心阅读,如果您发现文章中有一些没表述清楚的,或者是不对的地方,请给我留言,您的鼓励是作者写 ...
- JZOJ.1002【USACO题库】1.1.3 Friday the Thirteenth黑色星期五
每日一博第一天! 保持你的决心 题目描述 13号又是星期五是一个不寻常的日子吗? 13号在星期五比在其他日少吗?为了回答这个问题,写一个程序来计算在n年里13 日落在星期一,星期二......星期日的 ...
- ci框架读取上传的excel文件数据
原文链接: https://blog.csdn.net/qq_38148394/article/details/87921373 此功能实现使用到PHPExcel类库,PHPExcel是一个PHP类库 ...
- python-day7(正式学习)
目录 数字类型内置方法 整形内置方法(int) 常用操作+内置方法 是否可变 浮点型内置方法(float) 常用操作+内置方法 是否可变 字符串内置方法 常用操作+内置方法 是否可变 数字类型内置方法 ...
- vue和react区别
vue和react区别
- springMVC基础框架搭建
1.导入springMVC相关jar包: 2.添加Web.xml配置文件中关于SpringMVC的配置 <servlet> <servlet-name>springmvc< ...
- php-fpm三种运行模式
php-fpm配置 配置文件:php-fpm.conf 开启慢日志功能的: slowlog = /usr/local/var/log/php-fpm.log.slowrequest_slowlog_t ...
- springboot搭建web项目与使用配置文件
目录 一.准备工作 二.创建基础web项目 1. maven配置 2.创建maven项目.配置pom.xml为web基础项目 3.编写启动类 4.使用maven打包 5.使用命令java -jar x ...