「input type=“text“」和「textarea」的区别

在我们开发时经常需要用到输入框,通常解决办法就是<input type="text"><textarea>,那么这两个标签有什么区别呢?

一:<input type="text"> 标签

text标签是单行文本框,不会换行。

通过size属性指定显示字符的长度,注意:当使用css限定了宽高,那么size属性就不再起作用。

value属性指定初始值,Maxlength属性指定文本框可以输入的最长长度。
  
可以通过width和height设置宽高,但是也不会增加行数,下面是一个例子:

 <input type="text" style="width: 200px; height: 100px" value="我是设置过宽高的text">  

在这里插入图片描述
  结果:文本依然只有一行,并且居中显示。

二:<textarea> 标签

<textarea>是多行文本输入框,文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier),可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。下面是一个例子:

<textarea rows="5" cols="5">我是通过cols和rows定的大小,我的cols是20,rows是10</textarea>

结果:
  在这里插入图片描述

<textarea style="width: 200px; height: 100px">我是通过width和height定的大小,我的width是200px,heigh是100px</textarea>

结果:
  在这里插入图片描述
简而言之,他们最大的区别就是text是单行文本框,textarea是多行文本框。

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值