知识点---、,<textarea>的区别</a> </h1> <div class="p_info"> <span class="info_author info_ico"><i class="fa fa-user"></i> <a href="https://www.liuyixiang.com/author-2.html" title="小翔博客">佚名</a></span> <span class="info_date info_ico"><i class="fa fa-clock-o fa-fw"></i>8年前 (2019-04-19)</span> <span class="info_category info_ico"> <i class="fa fa-folder-open"></i> <a href="https://www.liuyixiang.com/category-33.html" title="随笔" rel="category tag">随笔</a> </span> <span class="info_views info_ico"><i class="fa fa-eye fa-fw"></i> 1687人围观</span> <span class="info_comment info_ico"><i class="fa fa-comment-o fa-fw"></i> <a href="javascript:;" title="点击评论">抢沙发</a></span> <span class="info_baiduurl info_ico"><a target="_blank" title="百度已收录，转载请注明来源，谢谢~~" rel="external nofollow" href="http://www.baidu.com/s?wd=https://www.liuyixiang.com/post/52169.html"><i class="fa fa-smile-o"></i> 百度已收录</a></span> <span style="font-size:12px;position:relative;top:-1px"></span> </div> <div class="main-content" rel="lightbox"> <p><strong><span style="font-size: 14px;">一、在pc端的input是一个大的知识点</span></strong></p> <p> </p><a href="https://www.sresz.cn" target="_blank"> SRE实战 </a> 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！<a href="https://www.aliyun.com/minisite/goods?userCode=7bwit8bj" target="_blank">一键直达领取阿里云限量特价优惠。</a> <p>【1】文本框 </p> <p> </p> <p><input type="text"></p> <p> </p> <p>【2】密码框 </p> <p> </p> <p><input type="password"></p> <p> </p> <p>【3】提交按钮</p> <p> </p> <p><input type="submit" > </p> <p> </p> <p>【4】重置按钮 </p> <p> </p> <p><input type="reset" ></p> <p> </p> <p>【5】单选框 </p> <p> </p> <p><input type="radio" ></p> <p> </p> <p>【6】复选框 </p> <p> </p> <p><input type="checkbox" ></p> <p> </p> <p>【7】普通按钮 </p> <p> </p> <p><input type="button" ></p> <p> </p> <p>【8】文件选择控件 </p> <p> </p> <p><input type="file" ></p> <p> </p> <p>【9】隐藏框 </p> <p> </p> <p><input type="hidden" ></p> <p> </p> <p>【10】图片按钮<br><input type="image" ></p> <p> </p> <p>补充：</p> <p> </p> <p>placeholder 属性提供可描述输入字段预期值的提示信息（hint）。</p> <p> </p> <p>该提示会在输入字段为空时显示，并会在字段获得焦点时消失。</p> <p> </p> <p>placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。<br><strong><span style="font-size: 14px;">二、<strong><input type="text">标签与</strong><a href="https://www.cnblogs.com/yonglin/p/7041423.html" target="_blank"><span style="color: #000000;"><textarea>的区别</span></a></span></strong></p> <p><span style="color: #000000;"><strong><span style="font-size: 15px;"><span style="color: #000000;">在我们开发时经常需要用到输入框，通常解决办法就是<input type="text">和<textarea>,那么这两个标签有什么区别呢？</span></span></strong></span></p> <p> </p> <p><strong>1：<input type="text">标签</strong></p> <p><strong>　　</strong>text标签是单行文本框，不会换行。</p> <p>　　通过size属性指定显示字符的长度，注意：当使用css限定了宽高，那么size属性就不再起作用。</p> <p>　　value属性指定初始值，Maxlength属性指定文本框可以输入的最长长度。</p> <p> 可以通过width和height设置宽高，但是也不会增加行数，下面是一个例子：</p> <pre><input type="text" style="width: 200px; height: 100px" value="我是设置过宽高的text"> </pre> <p>　　结果：文本依然只有一行，并且居中显示。</p> <p><a href="https://img.liuyixiang.com/image/2019/4/FZr2mi.png"><a data-src="https://img.liuyixiang.com/image/2019/4/FZr2mi.png" class="lightgallery_item" href="https://img.liuyixiang.com/image/2019/4/FZr2mi.png"><img alt="知识点---<input>、<textarea>,<textarea>的区别随笔第1张" title=" 知识点---<input>、<textarea>,<textarea>的区别随笔第1张" src="https://www.liuyixiang.com/zb_users/theme/Lucky/style/image/grey.gif" data-original="https://img.liuyixiang.com/image/2019/4/FZr2mi.png" class="aligncenter myImgClass"></a></a></p> <p><strong>2：<textarea>标签</strong></p> <p>　　<textarea>是多行文本输入框，文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier），可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。下面是一个例子：</p> <pre><textarea rows="5" cols="5">我是通过cols和rows定的大小，我的cols是20，rows是10</textarea></pre> <p>　　结果：</p> <p>　　<a href="https://img.liuyixiang.com/image/2019/4/veuMzi.png"><a data-src="https://img.liuyixiang.com/image/2019/4/veuMzi.png" class="lightgallery_item" href="https://img.liuyixiang.com/image/2019/4/veuMzi.png"><img alt="知识点---<input>、<textarea>,<textarea>的区别随笔第2张" title=" 知识点---<input>、<textarea>,<textarea>的区别随笔第2张" src="https://www.liuyixiang.com/zb_users/theme/Lucky/style/image/grey.gif" data-original="https://img.liuyixiang.com/image/2019/4/veuMzi.png" class="aligncenter myImgClass"></a></a></p> <pre><textarea style="width: 200px; height: 100px">我是通过width和height定的大小，我的width是200px，heigh是100px</textarea></pre> <p>　　结果：</p> <p>　　<a href="https://img.liuyixiang.com/image/2019/4/mIRve2.png"><a data-src="https://img.liuyixiang.com/image/2019/4/mIRve2.png" class="lightgallery_item" href="https://img.liuyixiang.com/image/2019/4/mIRve2.png"><img alt="知识点---<input>、<textarea>,<textarea>的区别随笔第3张" title=" 知识点---<input>、<textarea>,<textarea>的区别随笔第3张" src="https://www.liuyixiang.com/zb_users/theme/Lucky/style/image/grey.gif" data-original="https://img.liuyixiang.com/image/2019/4/mIRve2.png" class="aligncenter myImgClass"></a></a></p> <p> </p><section class="_135editor" data-tools="135" data-id="97462"> <section style="margin:10px auto;text-align: center;"> <section style="background:url(https://image2.135editor.com/cache/remote/aHR0cHM6Ly9tbWJpei5xbG9nby5jbi9tbWJpel9wbmcvN1FSVHZrSzJxQzRsSGFFc3dFUHRRUTZpYXV3OWZ6NTRHUFBVWUdsSXR6Vm5UVFROZVJhWmljY3VsanJIdU1hbThnMEFhQ3U4Y3AyMGlheGs0ZmNjMW9IT1EvMD93eF9mbXQ9cG5n);background-repeat:no-repeat;background-size:100%;background-position:bottom;"> <section style="background:url(https://image2.135editor.com/cache/remote/aHR0cHM6Ly9tbWJpei5xbG9nby5jbi9tbWJpel9wbmcvN1FSVHZrSzJxQzRsSGFFc3dFUHRRUTZpYXV3OWZ6NTRHRkFzZGV5QmJhQ2hrRnkxcWpQOUpIYXlWbzZTUTVCOUsxSHRUVVJmTVhVaWJOMkRWclpLS05DUS8wP3d4X2ZtdD1wbmc=);background-repeat:no-repeat;background-size:35px;background-position:top right;padding-bottom:20px;"> <section style="display: flex;justify-content:center;align-items: center;"> <section style="width:120px;border:2px solid #daf0e0;box-sizing: border-box;"> <a href="https://img.liuyixiang.com/image/opsnews/ewm.jpg"><a data-src="https://img.liuyixiang.com/image/opsnews/ewm.jpg" class="lightgallery_item" href="https://img.liuyixiang.com/image/opsnews/ewm.jpg"><img style="display: block; margin: 0px; width: 100% !important;" src="https://www.liuyixiang.com/zb_users/theme/Lucky/style/image/grey.gif" data-original="https://img.liuyixiang.com/image/opsnews/ewm.jpg" data-ratio="1" data-width="100%" data-op="change" width="100%" height="" border="0" mapurl="" title="" alt="" data-w="344"/></a></a> </section> <section style="text-align: center;letter-spacing:1.5px;font-size:14px;color:#579e77;margin-left:12px;"> <section class="135brush" data-brushtype="text" style="font-weight: bold;font-size:18px;"> 扫码关注我们 </section> <section class="135brush" data-brushtype="text"> 微信号：SRE实战 </section> <section class="135brush" data-brushtype="text"> 拒绝背锅运筹帷幄 </section> </section> </section> </section> </section> </section> </section></p> <div id="xf_zsf"> <div class="xf_zsf-main"> <span class="likes"> <a href="javascript:;" title="文章很赞，我赞，我赞，我赞赞赞..." class="sf-praise-sdk" sfa="click" data-postid="52169" data-value="1" data-ok="zan" ><i class="fa fa-thumbs-up"></i> 赞 <span class="sf-praise-sdk" sfa="num" data-value="1" data-postid="52169">0</span> </a> </span> <span class="da_shang"> <a href="javascript:;" onclick="PaymentUtils.show();" >赏</a> </span> <span class="shares"> <a href="javascript:;" onclick="Post_Share.show();" title="文章不错，好内容要一起分享。"><i class="fa fa-share-alt"></i> 分享 </a> </span> <div class="clear"></div> </div> </div> <div class="ds-dialog" id='pay' style="display: none;"> <div class="ds-dialog-bg" onclick="PaymentUtils.hide();"></div> <div class="ds-dialog-content ds-dialog-pc "> <i class="ds-close-dialog">×</i> <h5>选择打赏方式：</h5> <div class="ds-payment-way"> <label for="wechat"><input type="radio" id="wechat" class="reward-radio" value="0" name="reward-way" checked="checked" />微信</label> <label for="qqqb"><input type="radio" id="qqqb" class="reward-radio" value="1" name="reward-way" />QQ钱包</label> <label for="alipay"><input type="radio" id="alipay" class="reward-radio" value="2" name="reward-way"/>支付宝</label> </div> <div class="ds-payment-img"> <div class="qrcode-img qrCode_0" id="qrCode_0"> <div class="qrcode-border box-size" style="border: 9.02px solid rgb(60, 175, 54"> <img class="qrcode-img qrCode_0" id="qrCode_0" src="https://img.liuyixiang.com/upload/2019/04/201904071554603208415849.png" /> </div> <p class="qrcode-tip">打赏</p> </div> <div class="qrcode-img qrCode_1" id="qrCode_1"> <div class="qrcode-border box-size" style="border: 9.02px solid rgb(102, 153, 204"> <img class="qrcode-img qrCode_1" id="qrCode_1" src="https://img.liuyixiang.com/upload/2019/04/201904071554603200422625.png" /> </div> <p class="qrcode-tip">打赏</p> </div> <div class="qrcode-img qrCode_2" id="qrCode_2"> <div class="qrcode-border box-size" style="border: 9.02px solid rgb(235, 95, 1"> <img class="qrcode-img qrCode_2" id="qrCode_2" src="https://img.liuyixiang.com/upload/2019/04/201904071554603194701489.png" /> </div> <p class="qrcode-tip">打赏</p> </div> </div> <div class="ds-payment-text"> <p><i class="fa fa-quote-left"></i><i class="fa fa-quote-right"></i>多少都是心意！谢谢大家！！！</p> </div> </div> </div> <div class="ds-dialog" id='post_share' style="display: none;"> <div class="ds-dialog-bg" onclick="Post_Share.hide();"></div> <div class="ds-dialog-content ds-dialog-pc "> <i class="ds-close-dialog">×</i> <h5>选择分享方式：</h5> <div class="share-img ds-payment-img"> <div class="qrcode-img"> <div class="four-share"> <a href="http://service.weibo.com/share/share.php?title=知识点---<input>、<textarea>,<textarea>的区别-随笔-小翔博客&url=https://www.liuyixiang.com/post/52169.html&source=小翔博客&pic=https://www.liuyixiang.com/zb_users/cache/thumbs/feb2beca938cab10ff6bbf47af6a926d-200-130-1.gif" title="分享到新浪微博" class="weibo" target="_blank" title=""><span></span></a> <a href="http://connect.qq.com/widget/shareqq/index.html?url=https://www.liuyixiang.com/post/52169.html&showcount=0&desc=给你分享一篇好文章，快来看看吧！&summary=一、在pc端的input是一个大的知识点 SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领...&title=知识点---<input>、<textarea>,<textarea>的区别-随笔-小翔博客&source=小翔博客&pics=https://www.liuyixiang.com/zb_users/cache/thumbs/feb2beca938cab10ff6bbf47af6a926d-200-130-1.gif" title="分享给QQ好友" class="qqqq" target="_blank" title=""><span></span></a> <a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https://www.liuyixiang.com/post/52169.html&desc=给大家分享一篇好文章，快来看看吧！&title=知识点---<input>、<textarea>,<textarea>的区别-随笔-小翔博客&source=小翔博客&pics=https://www.liuyixiang.com/zb_users/cache/thumbs/feb2beca938cab10ff6bbf47af6a926d-200-130-1.gif&summary=一、在pc端的input是一个大的知识点 SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领..." title="分享到QQ空间" class="qzone" target="_blank" title=""><span></span></a> <a href="http://shuo.douban.com/!service/share?href=https://www.liuyixiang.com/post/52169.html&name=知识点---<input>、<textarea>,<textarea>的区别-随笔-小翔博客&text=一、在pc端的input是一个大的知识点 SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领...&image=https://www.liuyixiang.com/zb_users/cache/thumbs/feb2beca938cab10ff6bbf47af6a926d-200-130-1.gif" title="分享到豆瓣" class="douban" target="_blank" title=""><span></span></a> </div> <div id="output" class="qrcode-border box-size"></div> <div class="wechat-icon"></div> <div class="qrcode-text"> <p class="qrcode-tip">微信扫一扫，分享朋友圈</p> <p class="qrcode-tip">Or</p> <p class="qrcode-tip">手机扫一扫，精彩随身带</p> </div> </div> </div> </div> </div> <script type="text/javascript">if(!+[1,]){Render = "table";} else {Render = "canvas";};content = utf16to8('https://www.liuyixiang.com/post/52169.html');$('#output').qrcode({width: 185,height: 185,render: Render,correctLevel: 0,text: content});</script> </div> <div class="p_msg"> <div class="p_tags"> <div class="tagcloud"> <span> <i class="fa fa-tags"></i> 标签：本文暂时没有添加标签 </span> </div> </div> </div> <div class="p-authorinfo"> <div class="p-copyright"> <p> 转载请注明 : 文章转载自 <i class="fa fa-angle-double-right"></i> <a href="https://www.liuyixiang.com/" rel="bookmark" title="作者：佚名"> 小翔博客 </a> <i class="fa fa-angle-double-right"></i> <a href="https://www.liuyixiang.com/post/52169.html" rel="bookmark" title="本文固定链接：https://www.liuyixiang.com/post/52169.html"> 知识点---<input>、<textarea>,<textarea>的区别 </a> </p> <p> 本文标题：知识点---<input>、<textarea>,<textarea>的区别 </p> <p> 本文链接：https://www.liuyixiang.com/post/52169.html </p> </div> <div class="clear"> </div> </div> <div class="p-recommend"> <div class="p-recommend-title">更多精彩</div> <div class="p-recommend-all"> <div class="recommend-left"> <li class="recommend-1" ><span>[07-26]</span><a href="https://www.liuyixiang.com/post/116019.html" title="项目微管理34 - 共识" rel="bookmark">项目微管理34 - 共识</a></li> <li class="recommend-2" ><span>[07-26]</span><a href="https://www.liuyixiang.com/post/116003.html" title="产品经理的首要技能" rel="bookmark">产品经理的首要技能</a></li> <li class="recommend-3" ><span>[07-14]</span><a href="https://www.liuyixiang.com/post/115527.html" title="一个故事带你了解版本控制" rel="bookmark">一个故事带你了解版本控制</a></li> <li class="recommend-4" ><span>[07-07]</span><a href="https://www.liuyixiang.com/post/115293.html" title="手把手教你玩转Git" rel="bookmark">手把手教你玩转Git</a></li> </div> <div class="recommend-right"> <li class="recommend-1" ><span>[06-22]</span><a href="https://www.liuyixiang.com/post/114796.html" title="如何激发团队潜能？" rel="bookmark">如何激发团队潜能？</a></li> <li class="recommend-2" ><span>[06-20]</span><a href="https://www.liuyixiang.com/post/114747.html" title="项目管理过程流程图" rel="bookmark">项目管理过程流程图</a></li> <li class="recommend-3" ><span>[06-18]</span><a href="https://www.liuyixiang.com/post/114669.html" title="Git 远程分支常用操作" rel="bookmark">Git 远程分支常用操作</a></li> <li class="recommend-4" ><span>[06-13]</span><a href="https://www.liuyixiang.com/post/114470.html" title="理顺软件开发各个环节-21（测试管理-测试规程和测试用例）" rel="bookmark">理顺软件开发各个环节-21（测试管理-测试规程和测试用例）</a></li> </div> <div class="clear"></div> </div> </div> <div class="r-pn-post"> <div class="shang"> <a title="使用CruiseControl.Net全面实现持续集成" href="https://www.liuyixiang.com/post/52168.html" rel="bookmark" class="prev_p"> <span>上一篇 :</span> 使用CruiseControl.Net全面实现持续集成 </a> </div> <div class="xia"> <a title="HITCON Training lab14——magic heap" href="https://www.liuyixiang.com/post/52172.html" rel="bookmark" class="next_p"> <span>下一篇 :</span> HITCON Training lab14——magic heap</a> </div> <div class="clear"></div> </div> </div> <input type="hidden" id="post_id" value="52169"> <div class="post-comment-list" id="post-comment-list"> <div class="comment-tab"> <span class="come-comt"><i class="fa fa-comments"></i> 评论列表 <span id="comment_count">暂无评论</span> </span> </div>  <div class="comment-list" id="comment_list"> <ul id="thecomments"> <label id="AjaxCommentBegin"></label> <div id="comments_paginate"> <ul> </ul> </div> <label id="AjaxCommentEnd"></label> </ul> </div>  <div class="commentpost" id="comment"> <div class="user_conment"><i class="fa fa-pencil"></i> 发表评论 <a rel="nofollow" id="cancel-reply" href="javascript:;" style="display:none;"><small>取消回复</small></a></div> <form id="frmSumbit" target="_self" method="post" action="https://www.liuyixiang.com/zb_system/cmd.php?act=cmt&postid=52169&key=b3473d206c87cf9a6bf586f179a24425" > <input type="hidden" name="inpId" id="inpId" value="52169" /> <input type="hidden" name="inpRevID" id="inpRevID" value="0" /> <div class="inpName"><input type="text" name="inpName" id="inpName" placeholder="昵称/QQ号码：" class="text" value="" size="28" tabindex="1" /></div> <div class="inpEmail"><input type="text" name="inpEmail" id="inpEmail" placeholder="邮箱：" class="replytext text" value="" size="28" tabindex="2" /></div> <div class="inpHomePage"><input type="text" name="inpHomePage" id="inpHomePage" placeholder="网址：" class="replytext text" value="" size="28" tabindex="3" /></div> <div id="geetest" class="geetest"></div> <div class="txaArticle"> <div id="shortcut-reply"> <span id="faces"><i class="fa fa-smile-o"></i></span> <a href="javascript:;" title="签到" id="sign" ><i class="fa fa-pencil"></i></a> <a href="javascript:;" title="赞一个" id="praise"><i class="fa fa-thumbs-o-up"></i></a> <a href="javascript:;" title="踩一个" id="down"><i class="fa fa-thumbs-o-down"></i></a> <a href="javascript:;" title="加油" id="peace"><i class="fa fa-hand-peace-o"></i></a> <div id="UbbFrame" style="display: none;" ></div> </div> <textarea name="txaArticle" id="txaArticle" class="textarea text" placeholder="文明用语，禁止广告 ... 如需得到博主回复，提交评论前请正确填写邮箱地址 ..." style="height: 142px;" cols="50" rows="4" tabindex="5" required >

User Login