<textarea></textarea>
作用:允许用户录入多行数据到表单控件中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<div>
<form action="http://www.baidu.com" method="get">
<div>
自我介绍:
<textarea></textarea>
</div>
</form>
</div>
</body>
</html>

 在文本输入内容

属性说明:

  • name:提交给服务端
  • rows:设置文本区域的列数,变相设置当前元素宽度
  • cols:设置文本区域的行数,变相设置当前元素高度
  • disabled:禁用

设置文本域rows高度,cols宽度

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<div>
<form action="http://www.baidu.com" method="get">
<div>
自我介绍:
<textarea cols="20" rows="5"></textarea>
</div>
</form>
</div>
</body>
</html>

加上name 可以向服务端提交数据 设置默认值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<div>
<form action="http://www.baidu.com" method="get">
<div>
自我介绍:
<textarea cols="20" rows="5" name="text">mike</textarea>
</div>
</form>
</div>
</body>
</html>

加上placehodler属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<div>
<form action="http://www.baidu.com" method="get">
<div>
自我介绍:
<textarea cols="20" rows="5" name="text" placeholder="自我介绍"></textarea>
</div>
</form>
</div>
</body>
</html>

前端 HTML form表单标签 textarea标签 多行文本的更多相关文章

  1. Form表单,textarea标签输入框 字数限制,和已输入字数的统计显示

    <script type="text/javascript"> $(document).ready(function() { <%-- 页面进来时就调用 --%& ...

  2. form表单的属性标签

    form表单的常用标签 表单: <form id="" name="" method="post/get" action=" ...

  3. 前端 HTML form表单标签 input标签 type属性 file 上传文件

     加上上传文件功能 input type='file' - 依赖form表单里一个属性 enctype="multipart/form-data" 加上这个属性表示把你上次文件一点 ...

  4. form表单的属性标签和练习

    form表单的标签 做一个如下图的form表单: 我们的代码如下: <body leftmargin="400px" topmargin="200px"& ...

  5. 前端之form表单与css(1)

    目录 一.form表单 1.1表单的属性 1.2input 1.2.1form表单提交数据的两种方式 1.3select标签 1.4label标签 1.5textarea多行文本标签 二.CSS 2. ...

  6. HTML学习笔记 域元素(form表单、textarea文本域、fieldset域集合、input使用) 案例 第四节 (原创)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 前端通过form表单构造带参数url

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. form表单里如果只存在一个文本框,enter键提交

    在这里说一说浏览器里form表单的默认行为 我们都知道浏览器是存在很多默认行为的,可能是出于常用行为考虑又或者是历史原因.但有时候我们不需要这些默认行为.以下: 1).当form表单里只存在一个inp ...

  9. 关于html 中form表单的内标签和使用

    表单标记 1.普通文本框: <input type=”text” name=”名称” value=”值”;不写value默认为空/> 2.密码框:<input type=”passw ...

随机推荐

  1. 基于Java的数据采集(一)

    之前写过2篇关于PHP数据采集入库的文章: 基于PHP数据采集入库(一):http://www.cnblogs.com/lichenwei/p/3872307.html 基于PHP数据采集入库(二): ...

  2. js操作DOM在父元素中的结尾添加子节点注意

    impressionHtml=`<img src=${value} alt=""/>`; document.getElementById("wrapper&q ...

  3. 一种消息和任务队列——beanstalkd

    beanstalkd 是一个轻量级消息中间件,其主要特性: 基于管道  (tube) 和任务 (job) 的工作队列 (work-queue):d 管道(tube),tube类似于消息主题(topic ...

  4. flume 1.8 安装部署

    环境 centos:7.2 JDK:1.8 Flume:1.8 一.Flume 安装 1)        下载 wget http://mirrors.tuna.tsinghua.edu.cn/apa ...

  5. [Tensorflow] RNN - 04. Work with CNN for Text Classification

    Ref: Combining CNN and RNN for spoken language identification Ref: Convolutional Methods for Text [1 ...

  6. 网络编程 -- RPC实现原理 -- NIO多线程 -- 迭代版本V1

    网络编程 -- RPC实现原理 -- 目录 啦啦啦 V1——设置标识变量selectionKey.attach(true);只处理一次(会一直循环遍历selectionKeys,占用CPU资源). ( ...

  7. 7.11js常用对象

    <!DOCTYPE html> <html> <head> <title>js常用对象</title> <script type=&q ...

  8. day_4_27 py

    ''' 2018-4-27 19:57:29 其实这些都是讲的类和对象的 self(在定义方法的时候默认的参数)就相当于java里面的this关键字, this.name=name class 类名: ...

  9. 三剑客之awk

    简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再 ...

  10. Android最全开发资源(申明:来源于网络)

    Android最全开发资源(申明:来源于网络) 地址:http://www.jianshu.com/p/0c36302e0ed0?ref=myread