tag 是眾多 HTML 標(biāo)籤之一。 標(biāo)籤格式分為三個(gè)主要部分:開(kāi)始標(biāo)籤()。使用者可以透過(guò)使用表單中的 HTML 標(biāo)記來(lái)建立文字區(qū)域來(lái)輸入多行文字。 標(biāo)籤建立一個(gè)可以容納很多字元的文字區(qū)域。
如何
textarea 元素建立使用 cols、rows 或兩者等屬性指定的區(qū)域或空間。 CSS 樣式以及高度和寬度屬性可以格式化外觀和感覺(jué)。
文法:
<textarea rows="3" cols="20">
Enter your text here...
</textarea>
屬性
標(biāo)籤與所有其他 HTML 標(biāo)籤一樣,接受許多其他屬性,這些屬性在 中也很常見(jiàn)。表單元素。它們?nèi)缦拢?/p>
-
autofocus:autofocus 屬性確保頁(yè)面載入時(shí)文字區(qū)域自動(dòng)獲得焦點(diǎn)。
-
cols:‘cols’屬性指定文字區(qū)域的寬度。該值應(yīng)該是一個(gè)正整數(shù)。如果不指定,‘cols’的預(yù)設(shè)值為 20。
-
disabled:此功能停用文字區(qū)域,將其凍結(jié),並且不接受使用者輸入變更。停用文字區(qū)域?qū)?dǎo)致 Tab 鍵跳過(guò)它。
-
form:‘form’屬性指定文字區(qū)域所屬的表單id。
-
name:它為文字控制項(xiàng)指派一個(gè)名稱(chēng)。
-
佔(zhàn)位符:此屬性透過(guò)提供提示或範(fàn)例文字來(lái)指導(dǎo)應(yīng)在文字方塊中寫(xiě)入的內(nèi)容來(lái)幫助使用者。
-
readonly:此屬性將文字區(qū)域設(shè)為唯讀模式;也就是說(shuō),它不受使用者輸入的影響或無(wú)法變更其內(nèi)容。
-
wrap:此功能指定文字區(qū)域如何換行文字。如果未指定,則預(yù)設(shè)值為“soft”。
HTML 中的 TextArea 標(biāo)籤範(fàn)例
要了解更多關(guān)於文字區(qū)域元素的工作,請(qǐng)查看以下包含
範(fàn)例#1
代碼:
<form>
<p>Leave your Comment:</p>
<br />
<textarea id="ta" cols="60" rows="5"> Write Here...</textarea></form>
輸出:

上面的範(fàn)例很簡(jiǎn)單,示範(fàn)了
行和列允許程式設(shè)計(jì)師設(shè)定文字區(qū)域大小的邊界值,即文字區(qū)域?qū)⑷〉玫拇_切空間。使用這些屬性有助於跨瀏覽器支援和格式一致性,因?yàn)闉g覽器預(yù)設(shè)值可能不同。
範(fàn)例#2
代碼:
<!DOCTYPE html>
<html>
<head>
<title> Textarea HTML Tag Demo </title>
</head>
<body>
<form>
<p>Fill the Detail:</p>
<br />
<textarea rows="5" cols="40" name="demo" maxlength="60" minlength="10" required="required">Enter your name</textarea>
<br />
<input type="submit" name="Submit" value="Submit" />
</form>
</body>
</html>
輸出:

上面的範(fàn)例顯示了與
HTML5中新增了最大長(zhǎng)度屬性; HTML 不支援此屬性。文字區(qū)域至少需要 10 個(gè)字符,由「minlength」屬性設(shè)定。 「required」屬性表示使用者不得將文字區(qū)域留空才能被視為有效並提交。這是標(biāo)籤的簡(jiǎn)單驗(yàn)證。
範(fàn)例#3
代碼:
<form id="Form1">
<label>Textarea Box 1</label>
<br />
<textarea rows="5" cols="40" name="demo" maxlength="60" minlength="10" disabled="disabled"> This is Disabled</textarea>
<br />
<label>Textarea Box 2</label>
<br />
<textarea rows="5" cols="40" required="required"></textarea>
<br />
<label>Textarea Box 3</label>
<br />
<textarea rows="5" cols="40" placeholder="This is readonly textarea" readonly="readonly"></textarea>
<br />
<input type="submit" name="Submit" value="Submit" />
</form>
輸出:
觀察到「Textarea Box 2」文字區(qū)域是必要的文字區(qū)域,而「Textarea Box 1」被禁用。


範(fàn)例#4
代碼:
<form id="label2" action="textareaDemo.html">
<fieldset>
<legend><b>Form 2</b></legend>
<input type="text" name="FN" value="Name" />
<br />
<input type="submit" name="Submit" value="Submit" />
<br />
</fieldset>
</form>
<textarea rows="5" cols="40" form="label2" required="required"></textarea>
<br />
<p>Above Text Area belongs to 'Form 2'</p>
輸出:
注意下面的輸出。下面的文字區(qū)域框是「必填」字段,如上面程式碼中所述,該字段與表單「Form 2」相關(guān)聯(lián)。因此,當(dāng)我們嘗試提交帶有空白文字區(qū)域的表單時(shí),它會(huì)顯示一條警報(bào)。

結(jié)論
元素可以是
以上是HTML 中的文字區(qū)域標(biāo)記的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章!