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

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. [Python] 迭代器是什么？你每天在用的for循环都依赖它！

    从循环说起 顺序,分支,循环是编程语言的三大逻辑结构,在Python中都得到了支持,而Python更是为循环结构提供了非常便利的语法:for ... in ... 刚从C语言转入Python的同学可能 ...

  2. LTP安装方法

    git clone https://github.com/linux-test-project/ltp.git apt-get install automake make autotools ./co ...

  3. Yii2 错误 'Headers already sent.'

    错误日志如下: __source__: __topic__: web category: yii\web\HeadersAlreadySentException ip: level: message: ...

  4. 攻防世界--getit

    测试文件:https://adworld.xctf.org.cn/media/task/attachments/8ef2f7ef55c240418f84b3c514a7a28a 准备 得知 64位文件 ...

  5. Checklist: 2019 05.01 ~ 06.30

    Golang Lessons learned porting 50k loc from Java to Go Five things that make Go fast Simple techniqu ...

  6. centos GIT安装

    [注](yum 源仓库里的 Git 版本更新不及时,最新版本的 Git 是 1.8.3.1,但是官方最新版本已经到了 2.9.2.想要安装最新版本的的 Git,只能下载源码进行安装.) 安装git服务 ...

  7. python断言语句assert

    断言语句的格式 assert test, [msg] test是一个表达式,表达式求值为Fals时引发AssertionError异常,msg是可选的异常消息. def test_assert(a): ...

  8. python指定cpu使用率，与内存占用率

    python指定cpu使用率,与内存占用率 """ runing.py -c 2 -t 0.01 -m 1000 -c cpu核数,不加-c参数为最大核数 -t cpu运 ...

  9. pip命令一般使用

    pip类似RedHat里面的yum,安装Python包非常方便.本节详细介绍pip的安装.以及使用方法. 1.pip下载安装 1.1 pip下载   1 # wget "https://py ...

  10. Linux防火墙--iptables--白名单配置

    1.服务器22端口和1521端口开通给指定IP [root@node2 sysconfig]# iptables -t filter -nL INPUT Chain INPUT (policy ACC ...