Last Updated on 2021-06-04 by Clay
在 HTML 區塊當中，如果想要讓使用者輸入文字，通常會使用 input 的文本輸入框。但如果今天我們要讓使用者可以輸入較長的字串，比如說一整段的文字，那麼，也許我們也可以考慮使用 textarea。
textarea 區塊幾乎所有主流瀏覽器都有支援，可以放心地使用。
那麼，以下就開始簡單地筆記吧！
input 輸入框
正如上段所述，這種簡單的輸入框是相當常見的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ClayAtlas-Code2Html</title> </head> <body> Input: <input type="text" name="fname" /> </body> </html>
Output:
不過若是說到讓使用者可以輸入有『換行』的文本，那麼只單純使用輸入框恐怕不太適合。下面我們就開始提及 textarea 這種元件。
textarea
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ClayAtlas-Code2Html</title> </head> <body> <p>TEST</p> <textarea rows="10" cols="30">Input the content...</textarea> </body> </html>
Output:
TEST
可以看到，這次我們輸入的文本可以換行了。
後記
除了這樣簡單的 textarea 之外，我們也可以使用 CSS 語法添加各式各樣的效果，感覺相當地好用。
以下是我參考的網站：