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 ...
随机推荐
- kubespray 修改配置
1.安装前的修改配置 # [root@slave1 kubespray]# vim inventory/local/group_vars/k8s-cluster.yml kube_network_pl ...
- fedora使用
1.更改ip 添加ip和掩码 sudo ifconfig p4p1 172.31.8.7/24 up 添加网关 sudo route add default gw 172.31.8.1 2.远程登 ...
- 人渣给我笔记本网络适配器里加的的“bluetooth设备(个人局域网)”,卸载不掉
- 深入应用C++ 11 C2
template<typename T> void print(T& t) { cout << "lvalue" << endl; } ...
- winform中使用TextBox滚动显示日志信息
代码如下: private void ShowInfo(string msg) { this.BeginInvoke((Action)(() => { textBox1.AppendText(s ...
- Mysql-Sqlalchemy-多表操作
import sqlalchemy from sqlalchemy import create_engine from sqlalchemy.ext.declarative import declar ...
- LeetCode面试常见100题( TOP 100 Liked Questions)
LeetCode面试常见100题( TOP 100 Liked Questions) 置顶 2018年07月16日 11:25:22 lanyu_01 阅读数 9704更多 分类专栏: 面试编程题真题 ...
- maven 常见命令 学习笔记(一)之 -pl -am -amd
假设现有项目结构如下 dailylog-parent|-dailylog-common|-dailylog-web 三个文件夹处在同级目录中 dailylog-web依赖dailylog-common ...
- Python 风格指南
https://zh-google-styleguide.readthedocs.io/en/latest/google-python-styleguide/contents/ 目前个人遵循的基本规范 ...
- Atcoder-SoundHound Inc.Contest 2018 -Masters Tournament-比赛报告
A C++ Example #include <iostream> #include <cstdio> #include <cstdlib> #include &l ...