HTML创建文本框的3种方式


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

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

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML创建文本框的3种方式</title>

<style>
 .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;
  }
</style>

</head>

<body>

<div class="test3" contenteditable="true" placeholder="请输入内容..."></div>

</body>

</html>

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

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

div 和 textare文本框的不同之处

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

 

 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM