搜尋

多行文字輸入 <textarea>

<textarea> 是 HTML 表單裡的可以讓使用者輸入多行文字的元素,這個元素常出現在許多的留言板或文字編輯器裡,這篇文章將會介紹 <textarea> 多行文字輸入元素的用法。

HTML 教學 - 多行文字輸入 <textarea>

認識 <textarea>

<textarea> 是 HTML 表單裡的多行文字輸入元素,可以讓使用者輸入許多文字。

  • <textarea> 屬於「容器元素」,需要有「起始標籤」以及「結束標籤」,所有放在標籤內的內容都會變成多行輸入的文字。
  • <textarea> 的顯示類型為「inline-block 行內區塊元素」,預設不會強制換行。
  • <textarea> 不可以是 <a><button> 的子元素

例如下方的 HTML 開啟後,在網頁中會放入一個 <textarea>

<form action="/test.aspx" method="post">
  <textarea name="" id="" cols="30" rows="10">
  hello world!!
  </textarea>
</form>

HTML 教學 - 多行文字輸入 <textarea> - 認識 <textarea>

<textarea> 支援屬性

<textarea> 除了支援「全域屬性」以及「可見元素的事件屬性」( 參考「HTML 元素屬性」),也會使用下方的專門屬性:

屬性 說明
name 名稱。
rows 垂直縱列的行數,預設 2 行。
cols 水平欄位的字元數,預設 20 個字元。
minlength 內容文字的最少數量。
maxlength 內容文字的最多數量。
placeholder 沒有內容時的提示訊息。
readonly 唯獨。
disabled 禁用。
required 必填。

例如下方的 HTML 開啟後,可以透過屬性設定讓兩個 <textarea> 呈現不同的樣貌。

<form action="test.aspx" method="get">
  <textarea name="" id="" cols="20" rows="15">
  hello world!
  </textarea>
  <textarea name="" id="" cols="10" rows="10">
  hello world!
  </textarea>
</form>

HTML 教學 - 多行文字輸入 <textarea> - 支援屬性

禁止 <textarea> 縮放尺寸

<textarea> 預設可以使用滑鼠,透過拖拉的方式進行「尺寸」的縮放調整 ( 右下角會出現滑鼠可以拖拉的小圖案 ),如果要禁止滑鼠縮放尺寸,可以修改將 CSS style 裡的 resize 設為 none,就能禁止滑鼠縮放調整尺寸。

<form action="test.aspx" method="get">
  <textarea name="" id="" cols="15" rows="10">
  不能調整尺寸
  </textarea>
  <textarea name="" id="" cols="15" rows="10" style="resize:none;">
  可以調整尺寸
  </textarea>
</form>

HTML 教學 - 多行文字輸入 <textarea> - 支援屬性

修改 <textarea> 樣式

由於 <textarea> 的樣式主要根據瀏覽器而定,W3C 並沒有規範其預設樣式,因此可以透過 CSS 設定 <textarea> 樣式,需要注意的是,如果設定了邊框或背景色,就會覆寫 <textarea> 預設樣式 ( 包含邊框、點擊、滑鼠移入...等 ),下方的 HTML 開啟後,會將兩個 <textarea> 的背景設定為不同顏色。

<form action="test.aspx" method="get">
  <textarea name="" id="" cols="15" rows="10" style="background:#f99;">
  hello world
  </textarea>
  <textarea name="" id="" cols="15" rows="10" style="background:#99f;">
  hello world
  </textarea>
</form>

HTML 教學 - 多行文字輸入 <textarea> - 支援屬性

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

HTML 教學

基本介紹

認識 HTML 使用 HTML 編輯器

基礎知識

HTML 標籤與架構 HTML 格式規範 HTML 縮排與註解 HTML 元素顯示類型 HTML 元素屬性 HTML 特殊字元 HTML 色彩表示法 HTML 尺寸單位 HTML 網址與路徑 HTML 套用 CSS 樣式 HTML 套用 JavaScript 如何觀察 HTML 原始碼

網頁資訊元素

網頁標題 <title> 網頁資訊 <meta> 載入外部資源 <link> 重設根目錄 <base>

常用元素

標題 <h1>~<h6> 段落 <p> 行內容器 <span> 區塊容器 <div> 超連結 <a> 圖片 <img> 換行 <br> 水平分隔線 <hr> 內嵌頁框 <iframe>

文字樣式元素

粗體字 <strong><b> 斜體字 <em><i> 刪除線文字 <del> 插入 ( 底線 ) 文字 <ins> 小型文字 <small> 上標下標 <sup><sub> 凸顯文字 <mark> 引用 <blockquote><q> 預先格式化 <pre> 程式碼內容 <code> 收折文字內容 <details> 標示注音 <ruby><rt> 標示聯絡方式 <address> 標示鍵盤按鍵 <kbd> 標示時間日期 <time> 標示縮寫 <abbr> 標示可換行位置 <wbr>

表格&清單元素

無序清單 <ul><li> 有序清單 <ol><li> 自訂清單 <dl><dt><dd> 表格 <table><tr><td> 表格 <th><caption> 表格 <thead><tbody> 表格 <colgroup><col>

表單元素

表單 <form> 輸入 <input> 按鈕 <button> 多行文字輸入 <textarea> 下拉選單 <select> 進度條 <progress> 欄位標題 <label> 欄位資料清單 <datalist> 表單元素分組 <fieldset>

語意結構元素

頁首區塊 <header> 主要區塊 <main> 章節區塊 <section> 文章區塊 <article> 側邊欄區塊 <aside> 引用區塊 <figure> 導航連結區塊 <nav> 頁尾區塊 <footer>

影音&圖形元素

播放影片 <video> 播放聲音 <audio> 響應式圖片 <picture> 點陣畫布 <canvas> 向量圖形 <svg>

網頁嵌入應用

嵌入 YouTube 影片 嵌入 Google 地圖 嵌入 Google 日曆 嵌入 Google 表單 嵌入 Google 簡報 嵌入 Google 文件 嵌入 Google 試算表 嵌入 Google 試算表圖表 嵌入 Twitter 推文 嵌入 Facebook 粉絲團 嵌入 Facebook 影片