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

在使用HTML 撰寫網頁的時候，若是有想要使用者輸入文字的時候，通常我們會使用input 輸入框。

但有些時候，我們希望使用者輸入的資訊可能包含了清楚的 ... [HTML]使用HTML中的textarea當作輸入框 Clay2020-02-122021-06-04HTML 在HTML區塊當中，如果想要讓使用者輸入文字，通常會使用input的文本輸入框。

但如果今天我們要讓使用者可以輸入較長的字串，比如說一整段的文字，那麼，也許我們也可以考慮使用textarea。

textarea區塊幾乎所有主流瀏覽器都有支援，可以放心地使用。

那麼，以下就開始簡單地筆記吧！ input輸入框 正如上段所述，這種簡單的輸入框是相當常見的。

Input:

ClayAtlas-Code2Html Input: COPY Output: ClayAtlas-Code2Html Input: 不過若是說到讓使用者可以輸入有『換行』的文本，那麼只單純使用輸入框恐怕不太適合。

下面我們就開始提及textarea這種元件。

textarea

TEST

ClayAtlas-Code2Html TEST Inputthecontent… COPY Output: ClayAtlas-Code2Html TEST Inputthecontent… 可以看到，這次我們輸入的文本可以換行了。

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

以下是我參考的網站： https://www.runoob.com/tags/tag-textarea.htmlhttps://css-tricks.com/textarea-tricks/https://www.w3school.com.cn/tags/tag_input.asp 分享此文：分享到Twitter(在新視窗中開啟)按一下以分享至Facebook(在新視窗中開啟)分享到LinkedIn(在新視窗中開啟)分享到Reddit(在新視窗中開啟) 相關 Tags:HTML LeaveaReply 取消回覆 Language 中文(台灣) English Search Searchfor... CategoriesCategories 選取分類 AndroidStudio  (6) Apple  (39)    AppleScript  (6)    iPad  (3)    MacOS  (36) C/C++  (124)    C  (10)    C++  (115) C#  (1) Computer  (4) CSS  (3) Dart  (3) Database  (9)    MySQL  (6)    SQLite  (2) Excel  (1) Flutter  (44)    IntellijIDEA  (2) Game  (21)    NS  (6)    PS4  (13)    PS5  (2) Git  (10)    Github  (9) GoogleSheets  (3) HTML  (10) Java  (2) JavaScript  (9) Kotlin  (3) LeetCdoe  (98) Linux  (137) MachineLearning  (88)    Keras  (7)    PyTorch  (55)    Scikit-Learn  (7)    Tensorflow  (3) Movie  (1) News  (4) NLP  (29) Novel  (9) Others  (6) PHP  (14) Python  (371)    Flask  (4)    Others  (4)    Packages  (55)    PyCharm  (11)    Pygame  (5)    PyQt5  (35)    PySide6  (4)    PythonTutorial  (17) Ruby  (1) Tools  (16) Unity  (26) VisualStudio  (2) VisualStudioCode  (2) Windows  (12) Word  (5) WordPress  (59) 圍棋  (3) 未分類  (6) 漫畫  (2) 資料結構  (4) 隨筆  (2) Archives Archives 選取月份 2022年6月 (4) 2022年5月 (7) 2022年4月 (18) 2022年3月 (29) 2022年2月 (17) 2022年1月 (28) 2021年12月 (21) 2021年11月 (14) 2021年10月 (20) 2021年9月 (11) 2021年8月 (20) 2021年7月 (24) 2021年6月 (24) 2021年5月 (32) 2021年4月 (26) 2021年3月 (31) 2021年2月 (14) 2021年1月 (18) 2020年12月 (17) 2020年11月 (25) 2020年10月 (24) 2020年9月 (21) 2020年8月 (17) 2020年7月 (21) 2020年6月 (19) 2020年5月 (28) 2020年4月 (31) 2020年3月 (24) 2020年2月 (25) 2020年1月 (32) 2019年12月 (39) 2019年11月 (53) 2019年10月 (34) 2019年9月 (15) 2019年8月 (18) 2019年7月 (15) 系列文章 隨筆散記 機器學習筆記 Python筆記 TAGSAndroidStudio(6) Apple(29) AppleScript(6) C++(115) C語言(10) Database(9) Flask(4) Flutter(43) Game(18) Git(6) Github(9) HTML(10) iPad(3) JavaScript(10) Keras(7) LeetCode(98) Linux(136) MachineLearning(84) MacOS(36) Microsoft(6) MySQL(6) News(4) NLP(30) Novel(9) NS(6) Others(8) PHP(14) PS4(13) PyCharm(11) PyQt5(34) Python(360) PythonPackages(53) PythonTutorial(14) PyTorch(55) Scikit-Learn(7) Tools(16) Unity(25) VIM(7) Windows(9) Word(5) WordPress(58) 圍棋(3) 資料結構(4) 軌跡(4) 電腦(4) RecentPosts LeetCode:1658-MinimumOperationstoReduceXtoZero解題記錄 [已解決]IndexError:booleanindexdidnotmatchindexedarrayalongdimension0;dimensionis485butcorrespondingbooleandimensionis488 [已解決]simpletransformers在訓練開始時卡住，不會繼續進行訓練 [Python]字串全形半形轉換方式 [Python]如何取代PandasDataFrame中特定column內的值 Calender 2020年2月 一 二 三 四 五 六 日  12 3456789 10111213141516 17181920212223 242526272829   «1月   3月» SubscriptionName*Email* SocialMedia Follow@clayatlas2022 ClicktoCopy