html中创建文本框,HTML创建文本框的3种方式

我的第一个随笔，记录主要用来整理学习的知识点

1.input 创建单行文本框

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

value:设置文本框的初始值

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

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

2.创建多行文本框

text2

是多行文本框，需要指定文本框的大小。

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

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

input 和不同之处

1.多行显示字符串。input只能单行显示

2.的初始值必须要放在和之间

3.input是单标签 ，是闭合标签

4.的值是纯文本；的值根据类型不同而不同；

3.div 模拟textarea

HTML创建文本框的3种方式

.test3{

border:1px solid #a0b3d6;/*设置边框1px，实线，边框线色为#a0b3d6 */

width: 500px;

min-height: 200px;

font-size: 14px;

padding: 4px;

color: #333;

outline:0; /* 当元素获得焦点的时候，焦点框为0.去掉虚线框(或高亮框)*/

}

/* 当输入框为空时，显示默认文字 */

.test3:empty::before{

content:attr(placeholder); /*获取属性的值 attr(value),可以获得属性值 */

color: #999;

}

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

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

div 和 textare文本框的不同之处

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