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>标签。但是标签高度不会随文本高度自动撑开，而是出现滚动条

今天的文章HTML创建文本框的三种方式分享到此就结束了，感谢您的阅读。