表單文字輸入欄位 textarea

表單文字輸入欄位 textarea 與 input type= text 都是文字輸入欄位,但呈現樣貌並不相同,最大的差別在於 textarea 是多行的文字輸入欄位,也就是 textare 的內容可以分段落、換行,當內容的量超過 textarea 的範圍時,會自動出現 slide bar,當然這個 slide bar 是可以透過 css 隱藏的,常見的應用如讓網友填寫內容,Email 的內文或是部落格文章管理的內文欄位,幾乎都是用 textarea 來製做。

表單文字輸入欄位 textarea 標籤語法
<textarea name="欄位名稱" style="欄位樣式">這裡是內容</textarea>
標準的 textarea 是由 <textarea> 標籤開始,到 </textarea> 標籤結束,兩個標籤之間就是內容區,他不像 input type=text 或是其他表單元素有一個 value 來儲存網友所填寫的內容,所有的內容就放在兩個標籤之間即可。開頭 <textarea> 有個 name 是欄位名稱。

表單文字輸入欄位 textarea 範例
<textarea name="Content">有看到內容了嗎?</texrarea>
呈現結果
當網友填寫完資料並送出表單後,後端的程式,如 PHP 就可以根據 textarea 欄位的 name 來判斷網友所填寫的資料內容,另外,我們可以透過 css 來設計 textarea 的寬度與高度,這個小技巧經常使用,所以這裡也稍微分享一下給各位參考。

透過 css 設計 textarea 的寬度與高度
<textarea name="Content" style="width:400px;height:120px;">有看到內容了嗎?這裡是調整過寬度與高度的 textarea</texrarea>
呈現結果
由於採用了 css 的寬度(width)與高度(height)兩個項目來控制 textarea 的尺寸,單位都是 px,我們就可以輕易的調整 textarea 的大小,在設計表單的時候,比較容易搭配出想要的整體風格,而且幾乎所有主流的瀏覽器都支援。

延伸閱讀
© Copyright webtech.tw Since 2010