我们如何在HTML中设置文本区域的可见行数？-html教程-PHP中文网

我们如何在HTML中设置文本区域的可见行数？

WBOY

发布： 2023-09-16 22:41:03

转载

776 人浏览过

我们如何在HTML中设置文本区域的可见行数？

本文将教您如何在 HTML 中设置文本区域中的可见行数。 HTML 元素对于多行编辑控制非常有用，并允许用户输入大量的自由格式文本。

语法

以下是设置文本区域中可见行数的语法 -

</pre><div class="contentsignin">登录后复制</div></div>
<p>使用 HTML textarea rows 属性指定控件的显示行数或可见文本行数。此外，它还指定文本区域的可见高度。</p>
<p>以下是设置 HTML 文本区域中可见行数的示例。</p>
<h2>示例 1</h2>
<p>在下面的示例中，我们使用行和列中提到的 <textarea> 行属性。</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><!DOCTYPE html>
<html>
<body>
   <textarea rows="7" cols="25">
      Doorno:11/2
      kavuri hills phase2
      madhapur,hyderabad
      telangana

登录后复制

执行上述脚本时，它将生成由文本区域字段中的文本组成的输出，使通过使用文本区域行属性获得的行可见。

示例 2：使用 Javascript

在下面的示例中，我们运行一个脚本以使线条在文本区域中可见。

Click To Change Number Of Visible Rows

登录后复制

运行上述脚本时，它将生成一个输出，其中包含一个填充文本的文本区域字段以及网页上的提示和单击按钮。

当用户单击按钮时，会触发该事件并增加文本区域中可见行的数量。

示例 3

在下面的示例中，我们使用 row 属性来设置可见行数。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><!DOCTYPE html> <html> <head> <title>HTML rows attribute</title> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <form action = "/cgi-bin/hello_get.cgi" method = "get">Enter subject<br /> <textarea rows = "5" cols = "50" name = "description">

登录后复制

执行脚本时，它将生成一个输出，其中包含一个文本区域字段，供用户输入提到的文本，以及一个允许网页上可见线条的行属性。

以上是我们如何在HTML中设置文本区域的可见行数？的详细内容。更多信息请关注PHP中文网其他相关文章！