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

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. Android应用程序开发之图片操作（二）——工程图片资源的加载及OOM的处理

    (一)工程图片资源的加载方法 在Android应用程序开发之图片操作(一)中,详细说明了如何操作各种资源图片,只是有的没有附上示例代码,在此,我将针对项目工程中的图片资源的显示加载进行说明.官方说明, ...

  2. 云中沙箱学习笔记1-快速部署并使用MySQL数据库

    1.1 背景知识 业务背景 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于Oracle旗下产品.MySQL 是最流行的关系型数据库管理系统,在 WEB 应用方面MyS ...

  3. rtp/rtcp

    rtp/rtcp stack custom rtp ORTP UCL Common RTP library Bell Labs RTP Library jrtplib 1.custom rtp sen ...

  4. 微信小程序（5）--阅读器

    最近用微信小程序写了一个图书阅读器,可以实现左右滑动翻页,按钮翻页,上下滚动,切换背景,控制字体大小.以及记住设置好的状态,如页面再次进来保留上次的背景色和字体大小. 由于暂时没有真实的数据接口,所以 ...

  5. vue,一路走来（6）--微信支付

    微信支付 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6 分享一下vue实现微信支付.在微信浏览器里面 ...

  6. C# 事务的创建，提交和回滚

    在C#中开启事务的步骤 01.调用SqlConnection对象的BeginTransaction()方法,创建一个SqlTransaction对象,标志事务开始. 02.将创建的SqlTransac ...

  7. ORA-01555 快照过旧

    用户user1对表进行了更新操作,用户user2在user1还没有进行提交前读表中数据,而且是大批量的读取(打个比方:耗时3分钟)而在这3分钟内user1进行了提交操作,那又会产生什么影响呢?这个时候 ...

  8. Swift--Unmanaged使用

    Unmanaged使用 作者 Nate Cook 翻译者 Croath Liu 2015年4月13日        API 对于开发者来说不只是把功能点接口暴露出来而已,同时也传达给我们一些其他的信息 ...

  9. Django--Auth模块使用

    1.Auth模块介绍 1.1 Auth模块是Django自带的用户认证模块,用于处理用户账户.群组.许可和基于cookie的用户回话 Django的认证系统主要包括下面几个部分 1.用户 2.许可 3 ...

  10. 嵌入式系统的性能测试(1) – lmbench篇

    要评价一个系统的性能,通常有不同的指标,相应的会有不同的测试方法和测试工具.既有比较成熟的商业测试软件,也有许多优秀的开源工具来完成这个任务.本文简要介绍如何使用lmbench来完成系统综合性能测试. ...