知识点---<input>、<textarea> - 码上快乐

相关内容简体繁体

知识点---、</a></h3> </center> <div class="postinfo"> 本文转载自 <i class="icon-globe"></i> <a href="/go/aHR0cHM6Ly93d3cuY25ibG9ncy5jb20vbGlhb2hvbmd3ZWkvcC8xMDczNTU2MC5odG1s" target="_blank">查看原文</a> <i class="icon-time"></i> <span>2019-04-19 13:59</span> <i class="icon-eye-open"></i> <span>4084 </span> <i class="icon-star" title="8.5945"></i> <i class="icon-star" title="8.5945"></i> <i class="icon-star" title="8.5945"></i> <i class="icon-star" title="8.5945"></i> <i class="icon-star" title="8.5945"></i> </div> <hr/> <div class="media-body" id="content_div"> <div class="title_down_ad ad"> </div> <div class="post_content" id="postContent"> <p><strong><span style="font-size: 18px;">一、在pc端的input是一个大的知识点</span></strong></p> <p> </p> <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> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-4353345653789615" data-ad-slot="4890554435"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({});</script> <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> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-4353345653789615" data-ad-slot="4890554435"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({});</script> <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: 18px;">二、<strong><input type="text">标签与</strong><a id="cb_post_title_url" class="postTitle2" href="/link/aHR0cHM6Ly93d3cuY25ibG9ncy5jb20veW9uZ2xpbi9wLzcwNDE0MjMuaHRtbA==" rel="nofollow noopener" 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> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-4353345653789615" data-ad-slot="4890554435"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({});</script> <p> 可以通过width和height设置宽高，但是也不会增加行数，下面是一个例子：</p> <div class="cnblogs_code"> <pre><input type="text" style="width: 200px; height: 100px" value="我是设置过宽高的text"> </pre> </div> <p>　　结果：文本依然只有一行，并且居中显示。</p> <p><img src="/image/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvMTA5MTU5Ny8yMDE3MDYvMTA5MTU5Ny0yMDE3MDYxNzIxMTMwMDE2NS0zMTcxOTExMTIucG5n.png" alt="" referrerpolicy="no-referrer"></p> <p><strong>2：<textarea>标签</strong></p> <p>　　<textarea>是多行文本输入框，文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier），可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。下面是一个例子：</p> <div class="cnblogs_code"> <pre><textarea rows="5" cols="5">我是通过cols和rows定的大小，我的cols是20，rows是10</textarea></pre> </div> <p>　　结果：</p> <p>　　<img src="/image/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvMTA5MTU5Ny8yMDE3MDYvMTA5MTU5Ny0yMDE3MDYxNzIxMjEzODgyMS0zNDQ4MDIyMC5wbmc=.png" alt="" referrerpolicy="no-referrer"></p> <div class="cnblogs_code"> <pre><textarea style="width: 200px; height: 100px">我是通过width和height定的大小，我的width是200px，heigh是100px</textarea></pre> </div> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-4353345653789615" data-ad-slot="4890554435"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({});</script> <p>　　结果：</p> <p>　　<img src="/image/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvMTA5MTU5Ny8yMDE3MDYvMTA5MTU5Ny0yMDE3MDYxNzIxMjMwOTQ0Ni0yMTA2MDU2NTkyLnBuZw==.png" alt="" referrerpolicy="no-referrer"></p> <p> </p> </div> <div class="read-more" id="read-more" style="display:none"></div> <div class="alert alert-info" style="margin-top:20px;"> <p id="tips_top1"> </p> </div> <script type="text/javascript"> $("#tips_top1").append("<strong><i class=\"icon-fire\"></i>温馨提示：</strong>如果本文未解决您的问题，可以免费向大模型提问：<strong><a href='javascript:void(0)' class='gptbtn'>向AI大模型提问</a></strong>。"); </script> <div class="iframe-container"> </div> </div> <div class="ad_content_down ad"> </div> </div> <div class="disclaimer visible-desktop"> <br/> <div class="alert alert-block"> <button type="button" class="close" data-dismiss="alert">×</button> <h4>免责声明！</h4> <p>本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。</p> </div> <br/><br/> </div> </div>  <div class="span4 left_content"> <div id="left_list_div" class="left_content"> <span class="list-group-item" href="javascript:void(0)"><i class="icon-filter"></i><strong>猜您在找</strong></span> <a class='list-group-item' href="/blog/a7c9811.html" title="知识点---input只能输入数字"> <i class="icon-fire"></i> 知识点---input只能输入数字 </a> <a class='list-group-item' href="/blog/af227f1.html" title="input函数的运用和注意小知识点"> <i class="icon-fire"></i> input函数的运用和注意小知识点 </a> <a class='list-group-item' href="/blog/a3ec801.html" title="Flink知识点"> <i class="icon-file"></i> Flink知识点 </a> <a class='list-group-item' href="/blog/6ce67c1.html" title="ElementUI 知识点"> <i class="icon-file"></i> ElementUI 知识点 </a> <a class='list-group-item' href="/blog/f1bcda1.html" title="clickhouse知识点"> <i class="icon-file"></i> clickhouse知识点 </a> <a class='list-group-item' href="/blog/846bd91.html" title="Linux知识点"> <i class="icon-file"></i> Linux知识点 </a> <a class='list-group-item' href="/blog/b9cdb91.html" title="logstash知识点"> <i class="icon-file"></i> logstash知识点 </a> <a class='list-group-item' href="/blog/9955161.html" title="pyspark 知识点"> <i class="icon-fire"></i> pyspark 知识点 </a> <a class='list-group-item' href="/blog/74acdd1.html" title="spark知识点"> <i class="icon-file"></i> spark知识点 </a> <a class='list-group-item' href="/blog/acf54a1.html" title="TypeScript知识点"> <i class="icon-file"></i> TypeScript知识点 </a> <div id="right_float_ad" class="ad"> </div> </div> </div> </div> </div> <div class="clear"> </div> <div class="fbar" style="z-index:100"> <div class="span7" style="color:grey;font-size:12px;"> </div> <div class="pull-right"> <span><a href="http://beian.miit.gov.cn" rel="nofollow" target="_blank">粤ICP备18138465号</a> </span><span>© 2018-2025 CODEPRJ.COM </span> </div> </div> <script src="/js/code.js?version=20250511"></script> <script> function buffer(a, b, c) { var d; return function() { if (d) return; d = setTimeout(function() { a.call(this), d = undefined }, b) } } (function() { function e() { var d = document.body.scrollTop || document.documentElement.scrollTop; d > b ? (a.className = "div1 div2", c && (a.style.top = d - b + "px")) : a.className = "div1" } var a = document.getElementById("float"); if (a == undefined) return ! 1; var b = 0, c, d = a; while (d) b += d.offsetTop, d = d.offsetParent; c = window.ActiveXObject && !window.XMLHttpRequest; if (!c || !0) window.onscroll = buffer(e, 50, this) })(); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?85c5e8e7b6167edfc87cb0607142e870"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>