如何在 HTML 中以字元為單位設定的寬度？

本文將介紹如何在 HTML 中以字元為單位設定輸入框的寬度。

<input> 元素的 `size` 屬性用於指定 <input> 元素以字元為單位的可視寬度。輸入欄位接受文字、搜尋、電話號碼、URL、電子郵件和密碼。雖然比較間接，但這可能會影響其顯示大小。`size` 引數實際上並不真正限制預期輸入的長度，儘管如此 -

語法

以下是 <input size> 的語法：

<object> ... </object>

讓我們來看下面的例子，瞭解更多關於如何在 HTML 中以字元為單位設定輸入框寬度的資訊。

示例 1

在下面的例子中，我們為輸入欄位使用 size=35。

<!DOCTYPE html>
<html>
<body>
   FirstName:<input type="text"
   value="Tutorials"><br>
   Lastname<input type="text"
   size="35"
   value= "Point">
</body>
</html>

當指令碼執行時，它將生成一個輸出，在網頁上顯示帶有預設大小的 firstname 輸入欄位和 size=35 的 lastname 輸入欄位。

示例 2

考慮下面的例子，我們使用 size=24 的佔位符。

<!DOCTYPE html>
<html>
<body>
   <form>
      <div>
         <label for="Name">Enter FullName:</label>
         <input type="text" id="Name" name="Name" placeholder="All Capital Letters" size="24" />
      </div>
      <div>
         <button>Submit</button>
      </div>
   </form>
</body>
</html>

執行上述指令碼後，它將生成一個輸出，其中包含一個帶有“全部大寫字母”佔位符的輸入欄位，大小為 24，以及網頁上的提交按鈕。

示例 3

讓我們考慮另一個例子，我們在這裡使用最小和最大長度。

<!DOCTYPE html>
<html>
<body>
   <form>
      <div>
         <label for="Name">Name: </label>
         <input type="text" id="Name" name="Name" required size="10" minlength="4" maxlength="8" />
         <span class="validity"></span>
      </div>
      <div>
         <button>Submit</button>
      </div>
   </form>
</body>
</html>

執行上述指令碼後，將彈出輸出視窗，顯示帶有 size=10、min 和 max 屬性的名稱輸入欄位以及網頁上的提交按鈕。

更新於：2022年12月15日

255 次瀏覽

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告