Skip to content

[HTML] 使用 HTML 中的 textarea 當作輸入框

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:

ClayAtlas-Code2Html Input:

不過若是說到讓使用者可以輸入有『換行』的文本，那麼只單純使用輸入框恐怕不太適合。下面我們就開始提及 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:

ClayAtlas-Code2Html

TEST

可以看到，這次我們輸入的文本可以換行了。

後記

除了這樣簡單的 textarea 之外，我們也可以使用 CSS 語法添加各式各樣的效果，感覺相當地好用。

以下是我參考的網站：

Tags:

Leave a Reply