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

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入门之基础day1

    一.引子 1. 什么是编程语言? 编程语言就是人与计算机沟通的介质 2.什么是编程? 编程就是人把自己想命令计算机干的事情通过编程语言翻译出来并写到文件里去 为什么要编程? 编程的目的就是为了让计算机 ...

  2. 59-python基础-python3-集合-集合常用方法-判断一个集合是否是另一个集合的子集-issubset()-issuperset()

    判断一个集合是否是另一个集合的子集-issubset()-issuperset() 1-issubset() s1.issubset(s) 判断s1是否是s的子集 2-issuperset() 与is ...

  3. python学习第二十六天非固定参数几种情况

    python函数参数传递,位置参数,默认参数,关键词参数,最后介绍一个非固定参数,就可以向函数传递一个列表,元组,字典,具体看看用法 1,有一个* 号的参数情况 def goos_stu(id,*us ...

  4. Xshell实现Windows和使用跳板机跳转的远程Linux互传文件

    适用于Linux CentOS版本,本地电脑是Win10版本 查询Linux版本: $lsb_release -a $cat /etc/issue 1.使用Xshell 连接上服务器 2.安装文件传输 ...

  5. SELECT COUNT语句

    数据库查询相信很多人都不陌生,所有经常有人调侃程序员就是CRUD专员,这所谓的CRUD指的就是数据库的增删改查. 在数据库的增删改查操作中,使用最频繁的就是查询操作.而在所有查询操作中,统计数量操作更 ...

  6. 缓存模块redis

    1.安装 安装 下载 :wget http://download.redis.io/releases/redis-3.2.8.tar.gz 解压:tar xzf redis-3.2.8.tar.gz ...

  7. springcloud费话之配置中心客户端(SVN)

    目录: springcloud费话之Eureka基础 springcloud费话之Eureka集群 springcloud费话之Eureka服务访问(restTemplate) springcloud ...

  8. 20180119-01-RACSignal的基础

    一.获取一个信号的方式 1.单元信号 RACSignal *signal1 = [RACSignal return:@"Some Value"]; RACSignal *signa ...

  9. 265-Keystone II JESD204B 66AK2L06 评估模块 (现行) XEVMK2LX

    Keystone II JESD204B 66AK2L06 评估模块 (现行) XEVMK2LX 一. 板卡概述The XEVMK 2LX is a full-featured evaluation ...

  10. Sass-@for

    在制作网格系统的时候,大家应该对 .col1~.col12 这样的印象较深.在 CSS 中你需要一个一个去书写,但在 Sass 中,可以使用 @for 循环来完成.在 Sass 的 @for 循环中有 ...