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> 標籤。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012
PHP Smarty MySQL JQuery Apache W3C