首頁 > 文章 > web前端 > 我們如何在HTML中設定文字區域的可見行數？

我們如何在HTML中設定文字區域的可見行數？

WBOY轉載: 2023-09-16 22:41:03884瀏覽

本文將教您如何在 HTML 中設定文字區域中的可見行數。 HTML 元素對於多行編輯控制非常有用，並允許使用者輸入大量的自由格式文字。

文法

以下是設定文字區域中可見行數的語法 -

<textarea rows = "value">

使用 HTML textarea rows 屬性指定控制項的顯示行數或可見文字行數。此外，它還指定文字區域的可見高度。

以下是設定 HTML 文字區域中可見行數的範例。

範例 1

在下面的範例中，我們使用行和列中提到的行屬性。

<!DOCTYPE html>
<html>
<body>
   <textarea rows="7" cols="25">
      Doorno:11/2
      kavuri hills phase2
      madhapur,hyderabad
      telangana
   </textarea>
   <input type = "submit" value = "submit" />
</body>
</html>

執行上述腳本時，它將產生由文字區域欄位中的文字組成的輸出，使透過使用文字區域行屬性獲得的行可見。

範例 2：使用 Javascript

在下面的範例中，我們執行一個腳本以使線條在文字區域中可見。

<!DOCTYPE html>
<html>
<body>
   <textarea id="mytutorial" rows="6" cols="50">
      Mahendra Singh Dhoni is an Indian former professional cricketer
      who was captain of the Indian national cricket team in limited-overs
      formats from 2007 to 2017 and in Test cricket from 2008 to 2014.
   </textarea>
   <p>Click To Change Number Of Visible Rows</p>
   <button type="button" onclick="mytutorial1()">Click</button>
   <script>
      function mytutorial1() {
         document.getElementById("mytutorial").rows = "10";
      }
   </script>
</body>
</html>

在執行上述腳本時，它將產生一個輸出，其中包含一個填充文字的文字區域欄位以及網頁上的提示和點擊按鈕。

當使用者點擊按鈕時，會觸發該事件並增加文字區域中可見行的數量。

範例 3

在下面的範例中，我們使用 row 屬性來設定可見行數。

<!DOCTYPE html>
<html>
<head>
   <title>HTML rows attribute</title>
</head>
<body>
   <form action = "/cgi-bin/hello_get.cgi" method = "get">Enter subject<br />
      <textarea rows = "5" cols = "50" name = "description"></textarea><br>
      <input type = "submit" value = "submit" />
   </form>
</body>
</html>

執行腳本時，它將產生一個輸出，其中包含一個文字區域字段，供使用者輸入提到的文本，以及一個允許網頁上可見線條的行屬性。

以上是我們如何在HTML中設定文字區域的可見行數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript html 事件

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：當元素在HTML中被拖曳時，執行一個腳本嗎？下一篇：當元素在HTML中被拖曳時，執行一個腳本嗎？

看更多