<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. 关于Solaris 的磁盘的分区

    也许是深受LINUX  Windows  fdisk 影响,每次看完Solaris的format命令,总是云里雾里.我今天总结一下,各位给点指点 一. Linux.Windows  传统的磁盘区层级, ...

  2. eclipse安装emmet插件

    http://www.cnblogs.com/matchless/archive/2013/04/10/3011973.html

  3. 理解Generic.xaml和Themes

    "Generic.xaml"这个名称并非偶然 通过上面的叙述,你可能会有冲动将Generic.xaml中的Style代码剪切出来,粘贴到任何一个我们的控件可以找到的地方,然后把Ge ...

  4. 【代码审计】XIAOCMS_后台database.php页面存在任意文件删除漏洞

      0x00 环境准备 XIAOCMS官网: http://www.xiaocms.com/ 网站源码版本:XiaoCms (发布时间:2014-12-29) 程序源码下载:http://www.xi ...

  5. AndroidのInputFillter之按字符过滤长度，一个中文当两个字符

    /** * 以Byte数的方式来实现的LengthFilter * @author bvin */ public class OneByteInputFilter implements InputFi ...

  6. EGit系列第三篇——远程提交代码

    接着上篇,把本地项目提交一次才能Pull,为什么要Pull而不直接Remote Push呢,因为本地和远程仓库内容不一样(通常在远程仓库第一次新建项目会带一个README.md), 要先把远程仓库的东 ...

  7. VI/VIM 无法使用系统剪贴板（clipboard）？（Ubuntu&Mac OS X已解决）

    在 Ubuntu/Mac OS X 中使用VI/VIM时,发现无法使用系统的剪贴板. Ubuntu 上网一查,原来是少装了几个东西. 使用如下命令,安装相关的包.安装成功后,就可以使用系统剪贴板了. ...

  8. Kotlin入门第一课：从对比Java开始

    1. 介绍 今年初,甲骨文再次对谷歌所谓的安卓侵权使用Java提起诉讼,要求后者赔偿高达90亿美元.随后便传出谷歌因此计划将主力语言切换到苹果主导的Swift,不过这事后来没了跟进. 但谷歌在这两天的 ...

  9. TOP100summit2017：网易测试总监钱蓓蕾——新时代测试正走向精英化、自动化、智能化

    壹佰案例:钱蓓蕾老师您好,很荣幸邀请到您成为第六届壹佰案例峰会测试专场的联席主席.您从事测试工作11年了,您觉得最近几年测试工作有什么趋势上的变化么? 钱蓓蕾:测试行业近几年变化挺大的,正逐渐向精英化 ...

  10. ML.NET速览

    什么是ML.NET? ML.NET是由微软创建,为.NET开发者准备的开源机器学习框架.它是跨平台的,可以在macOS,Linux及Windows上运行. 机器学习管道 ML.NET通过管道(pipe ...