HTML textarea 文字欄位

HTML textarea 標籤是用來建立一個多行的文字輸入欄位，相較於 <input type="text"> 的單行輸入欄位，textarea 可以允許網友輸入多行的文字，且具有 scrollbar 功能，在 HTML 中，可以透過 rows 與 cols 來規定 textarea 欄位的高度與寬度。標準的 HTML textarea 文字輸入欄位是由 <textarea> 開始至 </textarea> 結束，要有互動作用則必須搭配 HTML Form 表單功能。

HTML textarea 文字輸入欄位範例

<textarea cols="50" rows="5">
　輸入你想要寫的內容...
</textarea>

範例呈現結果

輸入你想要寫的內容...

可以看到範例中用 <textarea></textarea> 將想要寫的文字包起來，並增加了寬度 cols=50 與高度 rows=5 這樣的尺寸規定，不過這樣的寫法並不是很理想，建議還是使用 CSS 的 width 與 height 來設定寬度與高度，比較精準一點，請參考以下範例介紹。

CSS 控制 textarea 長寬範例

<textarea style="width:300px;height:100px;">
　輸入你想要寫的內容...
</textarea>

以上範例輸出結果

輸入你想要寫的內容...

CSS 除了可以控制文字輸入欄位的寬度與高度之外，也可以控制許多其他項目，例如邊框粗細、邊框顏色、邊框樣式、背景顏色、背景圖片、scrollbar 是否顯示與樣式 ... 等，我們會在其他的篇幅做介紹。幾乎所有主流的瀏覽器都支援 HTML <textarea> 標籤。

延伸閱讀