資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在HTML5中建立多行輸入控制元件文字區域
概述
文字區域是一個HTML標籤，用於編寫多行文字。因此，可以透過一些預定義的HTML屬性來控制文字區域內的多行文字。這些HTML屬性包括 **maxlength、minlength、rows、column** 和 **readonly**。透過使用這些屬性，我們可以控制文字區域內的文字。
語法
在HTML中建立文字區域的語法如下：
<textarea name="" id="" cols="" rows=""></textarea>
演算法
**步驟1** - 在文字編輯器中建立一個HTML基本結構。
**步驟2** - 將文字區域標籤新增到HTML程式碼的主體部分。
<textarea></textarea>
**步驟3** - 現在，要限制最大長度，請使用maxlength屬性併為其賦值任何數值。
<textarea maxlength="100"></textarea>
**步驟4** - 文字區域已成功建立，文字區域將顯示在您的瀏覽器中。
示例
在這個例子中，我們建立了一個文字區域，其文字使用 **maxlength** 屬性進行控制。此屬性幫助我們完全控制在文字區域內編寫的文字。透過在文字區域標籤中使用此屬性，它限制了可以在框內寫入的字元數。在這個例子中，字元的最大長度為“100”，因此我們不能寫入超過給定限制的字元。
<html> <head> <title>Text Multiline Control</title> </head> <body> <h2>Text Box With Maxlength Control</h2> <textarea name="textcontrol" id="" cols="30" rows="10" maxlength="100"></textarea> </body> </html>
演算法
**步驟1** - 在文字編輯器中建立一個HTML基本結構。
**步驟2** - 使用HTML文字區域標籤在body標籤內新增文字框。
**步驟3** - 現在，將readonly屬性新增到文字區域，併為文字框新增行數和列數。
**步驟4** - 為文字區域新增佔位符屬性，然後在其中新增一些文字。
**步驟5** - 帶有隻讀控制的文字區域已準備就緒，可以在瀏覽器上檢視。
示例
在這個例子中，我們建立了一個多行受控的文字區域框，它具有隻讀屬性，這意味著文字區域內的文字不可編輯，只能讀取；在這個例子中，我們還使用 **rows** 和 **cols** 屬性固定了文字區域的大小。在這些屬性中，行數和列數被指定為數值。文字預先寫在佔位符屬性中。
<html> <head> <title>Text Multiline Control</title> </head> <body> <h2>Text Box With Read Only, Rows and Cols Control</h2> <textarea name="textcontrol" id="" cols="30" rows="5" readonly placeholder="This is a text box which limits the number of character written inside it. This text box is readonly"></textarea> </body> </html>
結論
控制多行文字在網站的使用者介面方面有時變得很重要，因為HTML中的文字區域具有隨著文字框內字元數量的增加而擴充套件的屬性，這會使網站的介面看起來很醜。很多時候，這些文字框用於應用程式的反饋部分，因此透過限制文字框內的字元數，可以避免冗長的垃圾郵件。
467 次檢視
