adbpix生活部落格

HTML textarea 是用來輸入文字用的，與 text 不太一樣的是，text 為單行輸入，而 textarea 為多行輸入，舉例來說 pixnet 的部落格後台發文系統，中間大大的給你打文章內容的那一塊就是 HTML textarea 的文字輸入欄位。  

只是單純的用 HTML 設計，雖然說可以設定寬度或高度，但要達到完美或說美觀的 textarea 並不是這麼容易。

所以我們採用 CSS 的 border 技巧來做這件事情，CSS border 可以設計邊框的粗細、樣式（style）以及顏色（color），整體搭配起來比較能夠做出好看的 textarea 效果，以下就做個簡單的範例一起研究。

<textarea name="TestArea" style="width:300px;height:100px;border:2px green dotted;"></textarea>

呈現的結果如下方這樣

範例語法中 style 開始就是 CSS 的語法，包含了 width 寬度、height 高度、border 邊框這三個部分，想更進一步學習 HTML textarea 與 CSS border 的設計技巧，可以參考以下這兩篇教學文章。

CSS border 屬性介紹：http://www.wibibi.com/info.php?tid=86

HTML textarea：http://www.wibibi.com/info.php?tid=191