前端 HTML form表单标签 textarea标签多行文本

<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标签 多行文本

前端 HTML form表单标签 textarea标签多行文本