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

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

HTML创建文本框的3种方式的更多相关文章

  1. [HTML]HTML隐藏文本框的四种方式

    .<input type="hidden" value=""></input>对所有的文本框都起作用(隐藏域,多用于存数据) .< ...

  2. 原生js动态创建文本内容的几种方式

    1.通过CreateTextNode文本节点 首先创建该元素(元素节点),然后向一个已存在的元素追加该文本节点 <!DOCTYPE html> <html> <body& ...

  3. JavaWeb后台从input表单获取文本值的两种方式

    JavaWeb后台从input表单获取文本值的两种方式 #### index.html <!DOCTYPE html> <html lang="en"> & ...

  4. java核心知识点学习----创建线程的第三种方式Callable和Future CompletionService

    前面已经指出通过实现Runnable时,Thread类的作用就是将run()方法包装成线程执行体,那么是否可以直接把任意方法都包装成线程执行体呢?Java目前不行,但其模仿者C#中是可以的. Call ...

  5. Java反射机制（创建Class对象的三种方式）

    1:了解什么是反射机制? 在通常情况下,如果有一个类,可以通过类创建对象:但是反射就是要求通过一个对象找到一个类的名称:   2:在反射操作中,握住一个核心概念: 一切操作都将使用Object完成,类 ...

  6. JDBC 创建连接对象的三种方式 、 properties文件的建立、编辑和信息获取

    创建连接对象的三种方式 //第一种方式 Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/ ...

  7. word中创建文本框

    word中创建文本框         在插入中点击"文本框"选项卡,例如以下图所看到的:        手工加入自己想要的文本框格式,然后选择所创建的文本框,在工具栏处会发现多了一 ...

  8. Java反射机制(创建Class对象的三种方式)

    1:SUN提供的反射机制的类: java.lang.Class<T> java.lang.reflect.Constructor<T> java.lang.reflect.Fi ...

  9. 使用Htmlhelper,创建文本框TextBox

    下面通过HtmlHelper帮助类,创建文本框. 首先新建一个实体类,做为下面的例子: using System; using System.Collections.Generic; using Sy ...

随机推荐

  1. 10、numpy——位运算

    NumPy 位运算 NumPy "bitwise_" 开头的函数是位运算函数. NumPy 位运算包括以下几个函数: 函数 描述 bitwise_and 对数组元素执行位与操作 b ...

  2. HDU Stealing Harry Potter's Precious（状压BFS）

    状压BFS 注意在用二维字符数组时,要把空格.换行处理好. #include<stdio.h> #include<algorithm> #include<string.h ...

  3. grep命令用关系或查询多个字符串

    bcmsh ps | grep -E 'port|ge2 ' bcmsh ps | grep 'port\|ge2 ' 我的目的是筛选出含有 ‘port’ 或者含有 ‘ge2 ’ 的行,上面的第一行参 ...

  4. JVM（15）之 类加载器

    开发十年,就只剩下这套架构体系了! >>>   今天我们将类加载机制5个阶段中的第一个阶段,加载,又叫做装载.为了便于阅读,以下都叫做装载.    装载的第一步就是要获得二进制的字节 ...

  5. 获取class的儿子，报错undefined

       var tds = document.getElementsByClassName("dv1")[0].children     console.log(tds) 因为cla ...

  6. [react-native]react-native填坑笔记

    填坑笔记 开始入坑RN,从最开始的学起难免有不少乱七八糟的问题,记录在这里. 1. 8081端口占用问题 按照官网教程搭建开发环境并按照下面代码运行时候有报错,显示8081端口的问题 react-na ...

  7. C# RSA加密

    /// <summary> /// 类名:RSACrypt /// 功能:RSA加密.解密.签名.验签 /// </summary> public sealed class R ...

  8. CONNECT_BY_ROOT

    1.select * from  EMP t  where t.deptno = 10;   EMPNO     ENAME     JOB     MGR     HIREDATE     SAL  ...

  9. JSP和selevt 生命周期详解（JSP的生命周期和select很像，jsp底层就是一个selevt）

    JSP: JSP的生命周期指从创建到销毁的整个过程.分为以下几个阶段: 1:编译阶段:servlet引擎编译servlet源文件,生成servlet类.当浏览器请求JSP页面时,JSP引擎会首先去检查 ...

  10. js 中HTML的 onkeycode 和onkeydown属性事件

    <!DOCTYPE html><html><head><script>function displayResult(){var x=document.g ...