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

上面的例子很簡(jiǎn)單,演示了
行和列允許程序員設(shè)置文本區(qū)域大小的邊界值,即文本區(qū)域?qū)@取的確切空間。使用這些屬性有助于跨瀏覽器支持和格式一致性,因?yàn)闉g覽器默認(rè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>
輸出:

上面的示例顯示了與
HTML5中添加了最大長度屬性; HTML 不支持此屬性。文本區(qū)域至少需要 10 個(gè)字符,由“minlength”屬性設(shè)置。 “required”屬性表示用戶不得將文本區(qū)域留空才能被視為有效并提交。這是對(duì)標(biāo)簽的簡(jiǎn)單驗(yà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”被禁用。


示例#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)文章!