HTML 文字區域 textarea:多行輸入欄位的用法
<textarea> 可以建立一個多行文字的輸入框,適合留言、意見與地址這類較長的內容。它的預設值要寫在標籤之間而不是 value,顯示的大小也建議交給 CSS,而不是 rows 與 cols 這兩個屬性。
屬性
rows
設定高度為幾行字。預設為 2。
cols
設定寬度為幾個字(包含捲軸)。預設為 20。
maxlength
設定輸入文字的上限。
minlength
設定輸入文字的下限。
placeholder
顯示輸入的提示訊息。
disabled
指定功能為不啟用的狀態。
readonly
唯讀狀態。
預設值寫在標籤之間
html
<label for="message">留言內容</label>
<textarea id="message" name="message" rows="5" placeholder="請輸入您的意見">預設文字</textarea>它沒有 value 屬性,預設值直接寫在開始與結束標籤之間。也因此縮排要小心,標籤之間的空白與換行都會原封不動變成欄位內容。
小提醒
rows、cols 會被 CSS 設定的寬高蓋過。實務上保留 rows 當備援、尺寸交給 CSS 控制即可;resize 則能決定使用者可不可以拖曳調整大小。
常見問題
textarea 的預設值怎麼設定?
寫在開始標籤與結束標籤之間,而不是用 value。也因此要小心縮排,標籤之間的空白與換行都會原封不動變成欄位的內容。
rows、cols 和 CSS 的寬高怎麼搭配?
CSS 設定的寬高會蓋過 rows 與 cols。實務上會保留 rows 當作沒有樣式時的備援,實際尺寸則交給 CSS 控制。
可以禁止使用者拖曳改變大小嗎?
可以用 CSS 的 resize: none,但這會拿掉使用者調整空間的自由。建議至少保留垂直方向可調整。
textarea 和單行的 input 差在哪?
<textarea> 支援多行與換行字元,適合留言與說明;<input> 只有單行,按下 Enter 會直接送出表單。