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

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. php提交表单时如何保留多个空格及换行的文本样式

    需求是:用户提交表单时屏蔽敏感词的功能.其中敏感词来自服务器端同一路径下的ciku.txt,敏感词通过"|"连接,例如"g|c|a",提交表单时替换敏感词,更重 ...

  2. P4843 清理雪道（上下界网络流）

    P4843 清理雪道 上下界最小流 我们先搞一遍上下界可行流(转) 回忆上下界最大流的写法:在可行流的残量网络$s\ -\ t$上跑最大流,答案为可行流$+$残量网络的最大流 那么上下界最小流的写法呢 ...

  3. 【学习总结】java数据结构和算法-第一章-内容介绍和授课方式

    总目录链接 [学习总结]尚硅谷2019java数据结构和算法 github:javaDSA 目录 几个经典算法面试题 算法和数据结构的重要性 几个经典算法面试题 字符串匹配 暴力法:慢 kmp算法:更 ...

  4. css样式表的引入方式

    一般来说,css 有两种样式表的引入方式,在这里我记录一下,比较这两种引入方式的区别: <link rel="stylesheet" type="text/css& ...

  5. tensorflow实现一个神经网络简单CNN网络

    本例子用到了minst数据库,通过训练CNN网络,实现手写数字的预测. 首先先把数据集读取到程序中(MNIST数据集大约12MB,如果没在文件夹中找到就会自动下载): mnist = input_da ...

  6. 关于行内元素，内联元素before和after的大小设置问题

    :before /:after伪元素默认是一个行内元素,所以这个元素设置width/height是无效的

  7. MongoDB 导入导出以及数据库备份

    -------------------MongoDB数据导入与导出------------------- 1.导出工具:mongoexport    1.1.概念:         mongoDB中的 ...

  8. Java集合框架Map接口

    集合框架Map接口 Map接口: 键值对存储一组对象 key不能重复(唯一),value可以重复 常用具体实现类:HashMap.LinkedHashMap.TreeMap.Hashtable Has ...

  9. springboot+mybatis搭建web项目

    使用idea+springboot+Mybatis搭建一个简单的web项目. 首先新建一个项目: 在这里选择Maven项目也可以,但是IDEA为我们提供了一种更方便快捷的创建方法,即Spring In ...

  10. 一款易用、高可定制的vue翻页组件

    一款易用.高可定制的vue翻页组件 在线体验:pages.cixi518.com 使用 npm i vo-pages --save vo-pages组件父元素必须设置固定高度并填写属性overflow ...