文本框input和textarea的区别

作者: 落花的季节 | 来源:发表于2017-08-14 17:56 被阅读702次

小知识
文本框input和textarea的区别
移动端HTML5点击事件闪现灰色背景解决方案
移动端HTML5点击事件闪现灰色背景解决方案
和的区别</a></li><li><a href="#r6">input和textarea的区别</a></li><li><a href="#r7">input与textarea的区别，并用div模拟textare</a></li><li><a href="#r8">input，textarea的区别</a></li><li><a href="#r9">神奇的css</a></li><li><a href="#r10">Django 学习笔记 - 提交表单及发表文章</a></li></ol></div> <p>在HTML中，有两种方式来表现文本框：一种是使用<code><input></code>元素的单行文本，另一种是使用<code><textarea></code>的多行文本框。这两个控件非常相似，而且使用的时候也差不多。不过，它们之间仍然从在区别。</p> <p>要表现文本框，必须将<code><input></code>元素的type特性设置为<code>text</code>。而通过设置size特性，可以指定文本框中能够显示的字符数。通过<code>value</code>特性，可以设置文本框的初始值，而<code>maxlength</code>特性则用于指定文本框可以接收的最大字符数。如果要创建一个文本框，让它能显示20个字符，但输入不能超过50个字符，可以使用如下代码：</p> <pre><code> <input type="text" size="20" maxlength="50" value="initial value"> </code></pre> <p><code><textarea></code>元素则始终会呈现为一个多行文本框。要指定文本框的大小，可以使用<code>rows</code>和<code>cols</code>特性。其中，<code>rows</code>特性指定的是文本框的字符行数，而<code>cols</code>特性指定的是文本框的字符列数。与<code><input></code>元素不同，<code><textarea></code>的初始值必须要放在<code><textarea></code>和<code></textarea></code>之间，如下所示：</p> <pre><code> <textarea cols="25" rows="5">initial value</textarea> </code></pre> <p>另一个与<code><input></code>的区别在于，不能给<code><textarea></code>设置最大字符数。<br> 无论这两种文本框在标记中有什么区别，但它们都回将用户输入的内容保存在<code>value</code>属性中。可以通过这个属性读取和设置文本框的值，如下面的例子所示：</p> <pre><code>var textbox = documnet.getElementsByTagName("textarea").value; textbox.value = "some new value" </code></pre> </div><div class="relateds"><h2>相关文章</h2><ul><li id="r1"><a href="/user/muunyttx.html"><img src="https://img.haomeiwen.com/us6337204/66f20aec-8e1e-4b7c-8c31-8e2de97492f5.jpg" width="80"></a><h3><a href="/subject/lkppqxtx.html">小知识</a></h3><p>input和textarea区别： input是当行文本框，其type值必须是text,初始值是用value或者p...</p></li><li id="r2"><h3><a href="/subject/geourxtx.html">文本框input和textarea的区别</a></h3><p>在HTML中，有两种方式来表现文本框：一种是使用元素的单行文本，另一种是使用的多行文本框。这两个控件非常相似，...</p></li><li id="r3"><a href="/user/whwyettx.html"><img src="https://img.haomeiwen.com/ud/9-cceda3cf5072bcdd77e8ca4f21c40998.jpg" width="80"></a><h3><a href="/subject/tceivxtx.html">移动端HTML5点击事件闪现灰色背景解决方案</a></h3><p>隐藏文本框阴影 input, textarea{-webkit-appearance:@none;} 取消手机点击...</p></li><li id="r4"><a href="/user/vkgepttx.html"><img src="https://img.haomeiwen.com/ud/4-3397163ecdb3855a0a4139c34a695885.jpg" width="80"></a><h3><a href="/subject/zqecxqtx.html">移动端HTML5点击事件闪现灰色背景解决方案</a></h3><p>隐藏文本框阴影 input, textarea{-webkit-appearance: @none;} 取消手机点...</p></li><li id="r5"><a href="/user/tgpnyttx.html"><img src="https://img.haomeiwen.com/ud/3-9a2bcc21a5d89e21dafc73b39dc5f582.jpg" width="80"></a><h3><a href="/subject/owbtqxtx.html"><input>和<textarea>的区别</a></h3><p>html中有两种文本框的表达方式，一种是元素的单行文本框，第二种是多行文本框，这两种有什么区别呢？的typ...</p></li><li id="r6"><a href="/user/uzmvlttx.html"><img src="https://img.haomeiwen.com/ud/5-33d2da32c552b8be9a0548c7a4576607.jpg" width="80"></a><h3><a href="/subject/benllxtx.html">input和textarea的区别</a></h3><p>都是提供用户输入的标签。区别如下： input 单行文本输入框 textarea多行文本输入框 input tex...</p></li><li id="r7"><a href="/user/qfzmxxtx.html"><img src="https://img.haomeiwen.com/us12636523/bc82930f-ac88-4186-a4ed-4c310660f857" width="80"></a><h3><a href="/subject/uhtugqtx.html">input与textarea的区别，并用div模拟textare</a></h3><p>一、input 和 textarea 的区别 input： HTML 元素用于为基于Web的表单创建交互式控件...</p></li><li id="r8"><a href="/user/ieiydttx.html"><img src="https://img.haomeiwen.com/is4354447/8fe3c68ae4e9fd93.png" width="80"></a><h3><a href="/subject/qklefxtx.html">input，textarea的区别</a></h3><p>在HTML中有两种方式表达文本框，一个是用input标签的单行文本框，一种是textarea标签多行文本框。那我们...</p></li><li id="r9"><a href="/user/dywxmttx.html"><img src="https://img.haomeiwen.com/ud/9-cceda3cf5072bcdd77e8ca4f21c40998.jpg" width="80"></a><h3><a href="/subject/sbxhixtx.html">神奇的css</a></h3><p>在文本框中禁用中文输入法：input,textarea{ime-mode:disabled;} 移除被点链接的点框...</p></li><li id="r10"><a href="/user/mzpldttx.html"><img src="https://img.haomeiwen.com/ud/4-3397163ecdb3855a0a4139c34a695885.jpg" width="80"></a><h3><a href="/subject/ugxovttx.html">Django 学习笔记 - 提交表单及发表文章</a></h3><p>提交表单及发表文章提交表单 1. html表单 input 标签自开自闭 textarea 标签多行文本框 ...</p></li></ul></div></div><div id="comments"><h2>网友评论</h2><ul></ul></div><ul></ul><div class="article_by"><div class="bytitle"><p>本文标题：<font color="#666">文本框input和textarea的区别</font></p><p>本文链接：<font color="#666">https://www.haomeiwen.com/subject/geourxtx.html</font></p></div></div></div><div class="meiwen-left fl mb"><div class="title ht"><h3>延伸阅读</h3><div class="share fr" id="bdshare"></div><i class="lt"></i><i class="rt"></i></div><div class="related"><ul class="related-list"><li><a class="meiwen" href="/mw/lbyctttx.html">那年盛夏诗歌</a></li><li><a class="meiwen" href="/sy/kbyctttx.html">环境监察队工作总结范文</a></li><li><a class="meiwen" href="/sy/hbyctttx.html">优秀教师学习心得范文</a></li><li><a class="meiwen" href="/sy/cbyctttx.html">华胥引的读后感300字</a></li><li><a class="meiwen" href="/yw/qbyctttx.html">《Its red》教学反思范文</a></li><li><a class="meiwen" href="/sy/fbyctttx.html">农资购销的合同范本</a></li><li><a class="meiwen" href="/sy/xbyctttx.html">竞选中队委优秀演讲稿</a></li><li><a class="meiwen" href="/yw/tbyctttx.html">辞金蹈海的成语解释</a></li><li><a class="meiwen" href="/ja/zvyctttx.html">《世纪宝鼎》公开课教案设计</a></li></ul></div><div class="picture" ><ul class="picture-list"><li><a class="meiwen" href="/article/69641.html"><img class="lazy" data-original="/uploads/allimg/1611/1-1611292156350-L.jpg" width="150" height="120" alt="因为爱你，所以牵挂"/><span>因为爱你，所以牵挂</span></a></li><li><a class="meiwen" href="/article/84632.html"><img class="lazy" data-original="/uploads/userup/2800/14V4C648-O08.jpg" width="150" height="120" alt="今生今世红尘醉——美到心碎的古诗词"/><span>今生今世红尘醉——美到</span></a></li><li><a class="meiwen" href="/article/53482.html"><img class="lazy" data-original="/uploads/allimg/1609/1-160ZPU1030-L.jpg" width="150" height="120" alt="一个90后的内心独白"/><span>一个90后的内心独白</span></a></li><li><a class="meiwen" href="/article/3639.html"><img class="lazy" data-original="/uploads/userup/1159/1432YGR-9294.jpg" width="150" height="120" alt="致已逝去的高中年华"/><span>致已逝去的高中年华</span></a></li></ul></div></div><div class="meiwen-left fl mb"><div id="pinglun"><div id="SOHUCS"></div></div></div><div class="meiwen-left fl"><div class="title ht"><h3>深度阅读</h3><ul class="list"><li><font color="#A2B088">您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！</font></li></ul><i class="lt"></i><i class="rt"></i></div><ul class="tags"><li><a class="meiwen" href="/huati/qingrenjie/">情人节</a></li><li><a class="meiwen" href="/huati/muqinjie/">母亲节</a></li><li><a class="meiwen" href="/huati/chongyangjie/">重阳节</a></li><li><a class="meiwen" href="/huati/qingmingjie/">清明节</a></li><li><a class="meiwen" href="/huati/duanwujie/">端午节</a></li><li><a class="meiwen" href="/huati/zhishujie/">植树节</a></li><li><a class="meiwen" href="/huati/yuanxiaojie/">元宵节</a></li><li><a class="meiwen" href="/huati/funvjie/">妇女节</a></li><li><a class="meiwen" href="/huati/yurenjie/">愚人节</a></li><li><a class="meiwen" href="/huati/shengdanjie/">圣诞节</a></li><li><a class="meiwen" href="/huati/fuqinjie/">父亲节</a></li><li><a class="meiwen" href="/huati/jiaoshijie/">教师节</a></li><li><a class="meiwen" href="/huati/ertongjie/">儿童节</a></li><li><a class="meiwen" href="/huati/laodongjie/">劳动节</a></li><li><a class="meiwen" href="/huati/qingnianjie/">青年节</a></li><li><a class="meiwen" href="/huati/jianjunjie/">建军节</a></li><li><a class="meiwen" href="/huati/wanshengjie/">万圣节</a></li><li><a class="meiwen" href="/huati/pinganye/">平安夜</a></li><li><a class="meiwen" href="/huati/guanggunjie/">光棍节</a></li><li><a class="meiwen" href="/huati/zhongqiujie/">中秋节</a></li><li><a class="meiwen" href="/huati/guoqingjie/">国庆节</a></li><li><a class="meiwen" href="/huati/ganenjie/">感恩节</a></li><li><a class="meiwen" href="/huati/labajie/">腊八节</a></li><li><a class="meiwen" href="/huati/">更多话题</a></li></ul></div><div class="cl"></div></div><div class="article-right"><div class="meiwen-right fr mb"><dt class="title hd"><h3>栏目导航</h3><i class="lt"></i><i class="rt"></i></dt><ul class="list-nav"><a class="meiwen" href="/c/hqtttttx.html">摄影</a><a class="meiwen" href="/c/vqtttttx.html">故事</a><a class="meiwen" href="/c/uttttttx.html">互联网</a><a class="meiwen" href="/c/cttttttx.html">读书</a><a class="meiwen" href="/c/yttttttx.html">旅行</a></ul></div></div><div class="meiwen-right fr mb"><div class="title hd"><h3>热点阅读</h3><i class="lt"></i><i class="rt"></i></div><ul class="right-list"><li><a class="meiwen" href="/subject/ejourxtx.html">体验课感悟</a></li><li><a class="meiwen" href="/subject/ljourxtx.html">IAC陆恬讲解五级曲目《肖邦波兰圆舞曲G小调》</a></li><li><a class="meiwen" href="/subject/wdourxtx.html">Gallerix 在线美术作品博物馆</a></li><li><a class="meiwen" href="/subject/edourxtx.html">智能马桶常见问题及处理方法</a></li><li><a class="meiwen" href="/subject/jdourxtx.html">可爱萌物画</a></li><li><a class="meiwen" href="/subject/ddourxtx.html">007 figheting 1st week.</a></li><li><a class="meiwen" href="/subject/hdourxtx.html">承诺，这样说最动人</a></li><li><a class="meiwen" href="/subject/xdourxtx.html">HTTP协议简介</a></li><li><a class="meiwen" href="/subject/arourxtx.html">巨婴国（读书笔记）1</a></li><li><a class="meiwen" href="/subject/vrourxtx.html">一袭红装，渐欲谁眼</a></li></ul></div></div></div></div><div class="footer"><p class="p_1"><a href="/about/aboutus.html">关于我们</a>|<a href="/about/service.html">服务条款</a>|<a href="/about/contact.html">联系我们</a>|<a href="/subject/geourxtx.html">文本框input和textarea的区别</a>|<a href="/about/tougao.html">投稿指南</a>|<a href="/sitemap.html">网站地图</a>|<a href="/rssmap.html">RSS订阅</a>|<a href="/about/paiban.html">排版工具</a>|<a href="javascript:vod(0);" onclick="Mobileurl()">手机版</a></p><p class="p_2">提供<a href="/meiwen/zhaichao/">经典美文摘抄</a>,<a href="/sanwen/">优美散文欣赏</a>,<a href="/shige/xiandai/">现代诗歌精选</a>,<a href="/xiaoshuo/">短篇小说</a>,<a href="/diary/suibi/">心情随笔</a>,<a href="/qingshu/">表白情书</a><a href="/fanwen/">范文</a>,<a href="/gushi/">故事会在线阅读</a>欣赏</p><p class="p_2">Copyright © 2014-2023 <a href="/">Haomeiwen.com</a> All Rights Reserved. <a href="/">好美文阅读网</a> 版权所有</p><p class="p_2">备案信息：<i></i>桂公网安备 45052102000051号 · 桂ICP备13007215号-3</p><div class="footer_service"><p class="p_2">本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯</p><p class="p_2">所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！</p></div></div><script src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript" src="https://apps.bdimg.com/libs/jquery-lazyload/1.9.5/jquery.lazyload.min.js"></script><script type="text/javascript">$("img.lazy").lazyload({effect : "fadeIn"});</script><script type="text/javascript" src="/img/jquery.meiwen.min.js"></script></body></html>