如何在 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 屬性的名稱輸入欄位以及網頁上的提交按鈕。
廣告
資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP