首頁 > web前端 > html教學 > HTML 中的文字區域標記

HTML 中的文字區域標記

WBOY
發布: 2024-09-04 16:29:25
原創
909 人瀏覽過

tag 是眾多 HTML 標籤之一。 標籤格式分為三個主要部分:開始標籤()。使用者可以透過使用表單中的 HTML 標記來建立文字區域來輸入多行文字。 標籤建立一個可以容納很多字元的文字區域。

如何

textarea 元素建立使用 cols、rows 或兩者等屬性指定的區域或空間。 CSS 樣式以及高度和寬度屬性可以格式化外觀和感覺。

文法:

<textarea rows="3" cols="20">
Enter your text here...
</textarea>
登入後複製

屬性

標籤與所有其他 HTML 標籤一樣,接受許多其他屬性,這些屬性在 中也很常見。表單元素。它們如下:

  • autofocus:autofocus 屬性確保頁面載入時文字區域自動獲得焦點。
  • cols:‘cols’屬性指定文字區域的寬度。該值應該是一個正整數。如果不指定,‘cols’的預設值為 20。
  • disabled:此功能停用文字區域,將其凍結,並且不接受使用者輸入變更。停用文字區域將導致 Tab 鍵跳過它。
  • form:‘form’屬性指定文字區域所屬的表單id。
  • name:它為文字控制項指派一個名稱。
  • 佔位符:此屬性透過提供提示或範例文字來指導應在文字方塊中寫入的內容來幫助使用者。
  • readonly:此屬性將文字區域設為唯讀模式;也就是說,它不受使用者輸入的影響或無法變更其內容。
  • wrap:此功能指定文字區域如何換行文字。如果未指定,則預設值為“soft”。

HTML 中的 TextArea 標籤範例

要了解更多關於文字區域元素的工作,請查看以下包含

範例#1

代碼:

<form>
<p>Leave your Comment:</p>
<br />
<textarea id="ta" cols="60" rows="5"> Write Here...</textarea></form>
登入後複製

輸出:

HTML 中的文字區域標記

上面的範例很簡單,示範了

行和列允許程式設計師設定文字區域大小的邊界值,即文字區域將取得的確切空間。使用這些屬性有助於跨瀏覽器支援和格式一致性,因為瀏覽器預設值可能不同。

範例#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>
登入後複製

輸出:

HTML 中的文字區域標記

上面的範例顯示了與

HTML5中新增了最大長度屬性; HTML 不支援此屬性。文字區域至少需要 10 個字符,由「minlength」屬性設定。 「required」屬性表示使用者不得將文字區域留空才能被視為有效並提交。這是標籤的簡單驗證。

範例#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」文字區域是必要的文字區域,而「Textarea Box 1」被禁用。

HTML 中的文字區域標記

HTML 中的文字區域標記

範例#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>
登入後複製

輸出:

注意下面的輸出。下面的文字區域框是「必填」字段,如上面程式碼中所述,該字段與表單「Form 2」相關聯。因此,當我們嘗試提交帶有空白文字區域的表單時,它會顯示一條警報。

HTML 中的文字區域標記

結論

元素可以是

中的巢狀元素。標籤或可以存在於表單標籤之外,但使用「form」屬性將其本身與表單關聯。一個重要的注意事項是該元素沒有“value”屬性,因此如果您的文本區域需要默認文本,請在開始和結束

以上是HTML 中的文字區域標記的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板