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

时间:2022-11-28 08:03:08
<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>

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

 在文本输入内容
前端 HTML form表单标签 textarea标签 多行文本

属性说明:

  • 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>

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

加上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>

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

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