HTML创建文本框的三种方式

1.input 创建单行文本框

<input type="text" size="10" maxlength="30" value="text1">

size :指定文本框中能够显示的字符数。

value:设置文本框的初始值

maxlength :指定文本框可以接收的最大字符数

type="text":是定义单行的输入字段,用户可在其中输入文本。默认宽度为20个字符


2.<textarea>创建多行文本框

<textarea cols="25" rows="5">text2</textarea>

<textarea>是多行文本框,需要指定文本框的大小。

rows:指定的是文本框的字符行数。

cols:指定的是文本框的字符列数。

input 和<textarea>不同之处
1.<textarea>多行显示字符串。input只能单行显示
2.<textarea>的初始值必须要放在<textarea>和</textarea>之间
3.input是单标签 ,<textarea>是闭合标签
4.<textarea>的值是纯文本;<input>的值根据类型不同而不同;


3.div 模拟textarea

<div class="test3" contenteditable="true"></div>
.test3{

  width: 400px;

  min-height: 60px;设置元素的最小高度

  line-height: 30px; 设置行高

  max-height: 300px;设置元素最大高度

  _height: 60px;/* IE6浏览器对min/max家族不屑一顾,结合其内部元素溢出会撑开父标签高宽的特性,所以针对IE6 直接定高 */

  margin: 0 auto;外边距

  padding: 10px; 内边距

  outline: 0; / 去掉虚框 * 浏览器如Firefox在可编辑模式下的div获取焦点的时候会有虚框,而实际上textarea是 没有虚框显示的 */

  border: 1px solid #a0b3d6;#设置边框1px厚,实线,蓝色的边框线

  border-radius: 4px;为元素添加圆角边框!

  font-size: 12px;

  word-wrap: break-word; 允许长的内容长单词或 URL 地址内部可以自动换行。

  overflow-x: hidden;左/右边缘进行裁剪,裁剪内容 - 隐藏滚动条

  overflow-y: auto;上/下边缘的裁剪,裁剪内容 - 不隐藏滚动条

  _overflow-y: visible;

 -webkit-user-modify: read-write-plaintext-only;

}

contentEditable='true': true设置为可编辑文本内容, false为不可编辑

contenteditable="true"复制粘贴的时候不能过滤html标签;

read-write-plaintext-only:内容可读写,但粘贴内容中的富文本格式(如文本的颜色、大小,图片等)会丢失。内容类似于以纯文本显示

user-modify需加浏览器前缀,需要写成 -webkit-user-modify

此处代码来着其他博主

div 和 textare文本框的不同之处

div可以使标签高度随着文本内容高度自动撑开。使用<textarea>标签。但是标签高度不会随文本高度自动撑开,而是出现滚动条

  • 10
    点赞
  • 58
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Famiglistimott

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值