<input type="text">和<textarea>的区别

和

的区别" type="hidden"/>
	<div class="container" style="padding-top:20px;">
		<div class="row-fluid m_b_20">
		    
			<div class="span2 visible-desktop" id="logo">
				<center>
					<a href="/index.html"><img src="/img/logo.png?version=" class="h_30"/></a>
				</center>
			</div>
			<div class="span6">
				<form class="form-search" action="/so" name="search-form">
					<div class="input-append span10">
						<center>
							<input type="text" class="span12 search-query" name="q" placeholder=" 请输入关键词搜索..." baiduSug="1">
							<button type="submit" class="btn btn-warning">搜索</button>
						</center>
					</div>
				</form>
			</div>
			<div class="span4 visible-desktop">
			    <a class="btn" href="/recommend/6b718f1/input-type-text-和-textarea-的区别"><i class="icon-random"></i>相关内容</a>
			      <a class="btn" href="https://www.codeprj.com/blog/6b718f1.html"><i class="icon-refresh"></i>简体</a>
			      <a class="btn" href="https://www.codeprj.com/zh/blog/6b718f1.html"><i class="icon-refresh"></i>繁体</a>
				
			</div>
		</div>
		<div class="row-fluid">
		    
			<div class="span8">
			    <div class="content_div">
			      <center>
			      <h3><a href="/blog/6b718f1.html" style="color:black"><input type="text">和<textarea>的区别</a></h3>
			      </center>
			      <div class="postinfo">
			              本文转载自
			      
			      <i class="icon-globe"></i> <a href="/go/aHR0cHM6Ly93d3cuY25ibG9ncy5jb20veW9uZ2xpbi9wLzcwNDE0MjMuaHRtbA==" target="_blank">查看原文</a>
			      <i class="icon-time"></i> <span>2017-06-17 21:35</span>
			      <i class="icon-eye-open"></i> <span>53660 </span>
                  
                  <i class="icon-star" title="46.9286"></i>
                  <i class="icon-star" title="46.9286"></i>
                  <i class="icon-star" title="46.9286"></i>
                  <i class="icon-star" title="46.9286"></i>
                  <i class="icon-star" title="46.9286"></i>                  
			      </div>
			      <hr/>
                 <div class="media-body" id="content_div">
                    <div class="title_down_ad ad">
					</div>
					<div class="post_content" id="postContent">
					  <p>　在我们开发时经常需要用到输入框，通常解决办法就是<input type="text">和<textarea>,那么这两个标签有什么区别呢？</p> 
<p><strong> 一：<input type="text">标签</strong></p> 
<p><strong>　　</strong>text标签是单行文本框，不会换行。</p> 
<p>　　通过size属性指定显示字符的长度，注意：当使用css限定了宽高，那么size属性就不再起作用。</p> 
<p>　　value属性指定初始值，Maxlength属性指定文本框可以输入的最长长度。</p> 
<p>      可以通过width和height设置宽高，但是也不会增加行数，下面是一个例子：</p> 
<div class="cnblogs_code"> 
 <pre><span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="width: 200px; height: 100px" value="我是设置过宽高的text"</span><span style="color: #0000ff;">>  </span></pre> 
</div> 
<p>　　结果：文本依然只有一行，并且居中显示。</p> 
<p>　　<img src="/image/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvMTA5MTU5Ny8yMDE3MDYvMTA5MTU5Ny0yMDE3MDYxNzIxMTMwMDE2NS0zMTcxOTExMTIucG5n.png" alt="" referrerpolicy="no-referrer"></p> 
<p><strong>二：<textarea>标签</strong></p> 
<p>　　<textarea>是多行文本输入框，文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier），可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。下面是一个例子：</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> 
<div class="cnblogs_code"> 
 <pre><span style="color: #0000ff;"><</span><span style="color: #800000;">textarea </span><span style="color: #ff0000;">rows</span><span style="color: #0000ff;">="5"</span><span style="color: #ff0000;"> cols</span><span style="color: #0000ff;">="5"</span><span style="color: #0000ff;">>我是通过cols和rows定的大小，我的cols是20，rows是10</</span><span style="color: #800000;">textarea</span><span style="color: #0000ff;">></span></pre> 
</div> 
<p>　　结果：</p> 
<p>　　<img src="/image/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvMTA5MTU5Ny8yMDE3MDYvMTA5MTU5Ny0yMDE3MDYxNzIxMjEzODgyMS0zNDQ4MDIyMC5wbmc=.png" alt="" referrerpolicy="no-referrer"></p> 
<div class="cnblogs_code"> 
 <pre><span style="color: #0000ff;"><</span><span style="color: #800000;">textarea </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="width: 200px; height: 100px"</span><span style="color: #0000ff;">>我是通过width和height定的大小，我的width是200px，heigh是100px</</span><span style="color: #800000;">textarea</span><span style="color: #0000ff;">></span></pre> 
</div> 
<p>　　结果：</p> 
<p>　　<img src="/image/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvMTA5MTU5Ny8yMDE3MDYvMTA5MTU5Ny0yMDE3MDYxNzIxMjMwOTQ0Ni0yMTA2MDU2NTkyLnBuZw==.png" alt="" referrerpolicy="no-referrer"></p> 
<p> </p> 
<p>简而言之，他们最大的区别就是text是单行文本框，textarea是多行文本框。</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/cae6d11.html" title="el-input type="textarea" 高度">
			           <i class="icon-fire"></i>
			           
			           el-input type="textarea" 高度
			           </a>
			       			       
			   
			       
			       
			           
			           <a class='list-group-item' href="/blog/b280c21.html" title="微信小程序 input 的 type属性 text、number、idcard、digit 区别">
			           
			           <i class="icon-file"></i>
			           微信小程序 input 的 type属性 text、number、idcard、digit 区别
			           </a>
			       			       
			   
			       
			       
			           
			           <a class='list-group-item' href="/blog/5ad3921.html" title="<input>和<textarea>">
			           
			           <i class="icon-file"></i>
			           <input>和<textarea>
			           </a>
			       			       
			   
			       
			       
			           
			           <a class='list-group-item' href="/blog/b07e631.html" title="<input type="text" >发送请求参数，中文乱码问题">
			           
			           <i class="icon-file"></i>
			           <input type="text" >发送请求参数，中文乱码问题
			           </a>
			       			       
			   
			       
			       
			           
			           <a class='list-group-item' href="/blog/55e32d1.html" title="关于input type=“text”文本框的 默认宽度">
			           <i class="icon-fire"></i>
			           
			           关于input type=“text”文本框的 默认宽度
			           </a>
			       			       
			   
			       
			       
			           
			           <a class='list-group-item' href="/blog/5508a41.html" title="CSS：给 input 中 type="text" 设置CSS样式">
			           
			           <i class="icon-file"></i>
			           CSS：给 input 中 type="text" 设置CSS样式
			           </a>
			       			       
			   
			       
			       
			           
			           <a class='list-group-item' href="/blog/9e183d1.html" title="input type="submit" 和"button"有什么区别">
			           <i class="icon-fire"></i>
			           
			           input type="submit" 和"button"有什么区别
			           </a>
			       			       
			   
			       
			       
			           
			           <a class='list-group-item' href="/blog/9c0a691.html" title="label 和input/textarea居中对齐">
			           
			           <i class="icon-file"></i>
			           label 和input/textarea居中对齐
			           </a>
			       			       
			   
			       
			       
			           
			           <a class='list-group-item' href="/blog/81e0031.html" title="<input>参数及<textarea>参数总结">
			           
			           <i class="icon-file"></i>
			           <input>参数及<textarea>参数总结
			           </a>
			       			       
			   
			       
			       
			           
			           <a class='list-group-item' href="/blog/ce8ce21.html" title="去除input和textarea的默认样式">
			           
			           <i class="icon-file"></i>
			           去除input和textarea的默认样式
			           </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=20250510"></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>

</body>
</html>