Skip to content

HTML 文字區域 textarea:多行輸入欄位的用法

HTML 文字區域 textarea:多行文字輸入欄位

<textarea> 可以建立一個多行文字的輸入框,適合留言、意見與地址這類較長的內容。它的預設值要寫在標籤之間而不是 value,顯示的大小也建議交給 CSS,而不是 rowscols 這兩個屬性。

屬性

rows

設定高度為幾行字。預設為 2。

cols

設定寬度為幾個字(包含捲軸)。預設為 20。

maxlength

設定輸入文字的上限。

minlength

設定輸入文字的下限。

placeholder

顯示輸入的提示訊息。

disabled

指定功能為不啟用的狀態。

readonly

唯讀狀態。

預設值寫在標籤之間

html
<label for="message">留言內容</label>
<textarea id="message" name="message" rows="5" placeholder="請輸入您的意見">預設文字</textarea>

它沒有 value 屬性,預設值直接寫在開始與結束標籤之間。也因此縮排要小心,標籤之間的空白與換行都會原封不動變成欄位內容。

小提醒

rowscols 會被 CSS 設定的寬高蓋過。實務上保留 rows 當備援、尺寸交給 CSS 控制即可;resize 則能決定使用者可不可以拖曳調整大小。

常見問題

textarea 的預設值怎麼設定?

寫在開始標籤與結束標籤之間,而不是用 value。也因此要小心縮排,標籤之間的空白與換行都會原封不動變成欄位的內容。

rows、cols 和 CSS 的寬高怎麼搭配?

CSS 設定的寬高會蓋過 rowscols。實務上會保留 rows 當作沒有樣式時的備援,實際尺寸則交給 CSS 控制。

可以禁止使用者拖曳改變大小嗎?

可以用 CSS 的 resize: none,但這會拿掉使用者調整空間的自由。建議至少保留垂直方向可調整。

textarea 和單行的 input 差在哪?

<textarea> 支援多行與換行字元,適合留言與說明;<input> 只有單行,按下 Enter 會直接送出表單。

延伸閱讀