如何限制在HTML表單中的文字區域中輸入的字元數量？-html教學-PHP中文網

首頁

web前端

html教學

如何限制在HTML表單中的文字區域中輸入的字元數量？

王林

Aug 30, 2023 am 11:17 AM

如何限制在HTML表單中的文字區域中輸入的字元數量？

在 HTML 中，我們可以藉助各種元素建立表單來接受和儲存使用者輸入的資訊。這些元素也稱為表單元素，例如：文字欄位（文字方塊）、單選按鈕、核取方塊、下拉方塊或組合方塊、重設和提交按鈕。

TextArea 是可以在表單中建立的元素之一。文字區域用作多行控件，使用者可以在其中在多行和多列中輸入資料。

TextArea 控制項用於輸入備註、建議、地址資訊、電子郵件正文、評論等，其中文字大小比普通文字欄位大，因為文字欄位是單行輸入控制項，需要一行資料。

範例

讓我們了解建立預設寬度和高度的文字區域的基本 HTML 程式碼。

<html>
<head><title>Feedback Form..</title>
   <style>
      h1{font-family:Algerian;font-size:20;color:blue;text-align:center}
   </style>
</head>
<body>
   <h1 id="Feedback-Form">Feedback Form..</h1>
   <form id="feedback_form">
      <label for="label1">Enter your feedback here:</label>
      <textarea id="t1"> </textarea>
   </form>
</body>
</html>

範例

要設定您自己選擇的文字區域的寬度和高度，您可以指定所需的行數和列數。為此，我們可以利用標記的 rows 和 cols 屬性。以下是下面顯示的程式碼以及輸出。

<html>
<head><title>Feedback Form..</title>
   <style>
      h1{font-family:Algerian;font-size:20;color:blue;text-align:center}
   </style>
</head>
<body>
   <h1 id="Feedback-Form">Feedback Form..</h1>
   <form id="feedback_form">
      <table>
         <tr>
            <td>
               <label for="label1">Enter your feedback:</label>
            </td>
            <td>
               <textarea id="t1" rows="10" cols="24">Type your valueable feedback here: </textarea>
            </td>
         </tr>
     </table>
   </form>
</body>
</html>

當文字區域中輸入的資訊超過其高度時，垂直滾動條將自動啟動。

注意 - 預設情況下，我們可以在文字區域中輸入最多 5,24,288 個字元的資料。

在某些情況下，需要對可以在文字區域中鍵入的字元大小進行限制。因此，在這種情況下，我們可以使用 maxlength 屬性來控製文字區域中輸入的字元數。

範例

假設，在一個人輸入他或她的經驗、文章或演講的網站中，字元數必須有一定的限制。因此，網頁設計者可以使用 maxlength 屬性來限制在文字區域中鍵入的字元的限制。讓我們透過一個例子來理解 -

<html>
<body>
   <form id="feedback_form">
      <label for="label1">Enter your feedback (150 words):</label>
      <textarea id="t1" maxlength="150"> </textarea>
   </form>
</body>
</html>

在此程式中，字元數限制僅設定為 150 個字符，這表示它將停止輸入，因為我們不允許輸入超過「150」個字元。

我們上面已經討論了cols 屬性可以指定文字區域的寬度，這意味著我們可以輸入最大列數，但是如果我們使用cols 和maxlength 屬性一起放在標籤中，那麼cols 屬性將僅設定文字區域的寬度，並且無法對字元數進行任何限制，而maxlength 屬性將被施加並設定限制。 <h2 id="範例">範例</h2> <p>您可以嘗試此程式碼 -</p> <pre class='brush:php;toolbar:false;'><html> <body> <form id="feedback_form"> <label for="label1">Enter your feedback (150 words):</label> <textarea id="t1" cols="20" rows="10" maxlength="5"> </textarea> </form> </body> </html> </pre> <p>此屬性對於在文字區域中限制資料大小非常有用，並且所有瀏覽器都支援。 </p>

以上是如何限制在HTML表單中的文字區域中輸入的字元數量？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web開發人員的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。

HTML，CSS和JavaScript的角色：核心職責Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

HTML容易為初學者學習嗎？Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML中起始標籤的示例是什麼？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。