我們如何在HTML中為<code><input></code>標籤新增字元寬度？-html教學-PHP中文網

我們如何在HTML中為標籤新增字元寬度？

WBOY

發布： 2023-08-26 12:41:02

轉載

1397 人瀏覽過

我們如何在HTML中為<code><input></code>標籤新增字元寬度？

在本文中，我們將示範如何在HTML中為輸入框新增以字元為單位的寬度。

<input>的size屬性用於指定<input>元素的可見寬度，以字元為單位。輸入欄位接受文字、搜尋、電話、URL、電子郵件和密碼。儘管有些間接，但其顯示大小可能會受到影響。儘管如此，預期輸入的長度並不真正受到size參數的限制

Syntax

以下是的文法

<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為預設大小，lastname為大小=35，正如我們在網頁上的腳本中所提到的。

Example 2

考慮以下範例，我們使用了大小為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屬性的名稱輸入字段，以及提交按鈕。

以上是我們如何在HTML中為標籤新增字元寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！