前端 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>

 

 

posted @ 2019-04-02 18:29  minger_lcm  阅读(5814)  评论(0)  编辑  收藏  举报