快捷导航
蚂蚁部落 网站首页 前端教程 HTML教程 查看内容

栏目导航

≡基础知识≡

≡基本元素≡

≡常见元素与文本≡

≡超链接≡

≡表单≡

≡语义化元素≡

≡列表≡

≡表格≡

≡多媒体≡

≡全局属性≡

HTML textarea多行文本框

2018-2-13 16:26| 发布者: admin| 查看: 1574| 评论: 0|来自: 蚂蚁部落

单行文本框只能够输入一行内容,textarea多行文本框可以输入多行文本。

多行文本框用textarea标签创建,而不是input标签。

它通常用于需要输入较多内容的需求。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  留言:<br>
  <textarea rows="5" cols="20" name="message"></textarea>
</form>
</body>
</html>

上面代码演示了简单多行文本框的应用。

特别说明:name属性是必须的,否则后台无法接收提交的表单数据。

单行文本框还有其他属性,下面分别做一下介绍:

(1).rows:规定多行文本框的行数。

(2).cols:规定多行文本框的列数。

(3).disabled:规定多行文本域是否可用。

(3).form(HTML5):规定多行文本域所属的一个或多个表单。

(4).maxlength:规定文本域可以输入的最大字符数。

(5).placeholder(HTML5):提供一种提示,描述所期待的值。

(6).readonly:设置文本域为只读。

(7).required(HTML5):规定文本域内容是必填的。

(8).wrap:(HTML5):规定当在表单中提交时,文本区域中的文本如何换行。

特别说明:此文本框不能够使用value属性规定它的初始值。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  留言:<br>
  <textarea rows="5" cols="20"  maxlength="10" name="message"></textarea>
</form>
</body>
</html>

设置文本域输入字符最大个数为10。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  留言:<br>
  <textarea placeholder="请输入留言内容" name="message"></textarea>
</form>
</body>
</html>

使用placeholder属性设置文本域输入内容提示功能。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  留言:<br>
  <textarea required placeholder="请输入留言内容" name="message"></textarea>
    <br/>
    <input type="submit" value="提交">
</form>
</body>
</html>

required属性可以设置为本域为必填,否则会报错。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  留言:<br>
  <textarea rows="5" cols="20"  autofocus name="message"></textarea>
  <input type="submit" value="提交表单">
</form>
</body>
</html>

autofocus只有一个属性值"autofocus"(可以省略),它规定文本域在页面加载后自动获取焦点。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" id="ant" method="post" action="do.php">
  <input type="submit" value="提交表单">
</form>
留言:<br>
<textarea rows="5" cols="20"  form="ant" name="message"></textarea>
</body>
</html>

form属性引用所属表单的id,于是,虽然文本域在<form>之外,但依然是该表单的一部分。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  留言:<br>
  <textarea  wrap="hard" name="message">只有努力奋斗才会有美好的未来,蚂蚁部落</textarea>
  <br/>
    <input type="submit" value="提交">
</form>
</body>
</html>

当提交表单时,wrap="hard" 的文本区域中的文本会包含换行符(如果有换行符)。

wrap属性的默认值是soft,也就是不包含换行符。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2018-2-19 15:52 , Processed in 0.099868 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部