AdSense

網頁

2019/8/5

HTML <input> size屬性

HTML <input>元素的size屬性作用如下。

<input>元素的size屬性用來決定輸入欄位的顯示寬度。


可使用size屬性的<input>類型(type)包括以下：

  • text：一般文字輸入欄位
  • search：搜尋欄位
  • tel：電話輸入欄位
  • url：URL輸入欄位
  • email：Email輸入欄位
  • password：密碼輸入欄位

總之就是那些可用來輸入文字的欄位類型。


例如下面分別為size值為10，20，30的<input type="text">欄位。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div>
        size="10"
        <input type="text" size="10">
    </div>
    <div>
        size="20"
        <input type="text" size="20"> <!-- size="20" is default -->
    </div>
    <div>
        size="30"
        <input type="text" size="30">
    </div>

</body>
</html>

顯示如下，可以看到size的數值越高欄位越寬。

size="10"
size="20"
size="30"

<input>若沒設定size屬性的話，size的預設值為20。

例如下面這個欄位即為不設定size的<input type="text">，預設長度為20。



注意size只決定輸入欄位的在畫面的顯示寬度，但並不影響輸入的文字數量；也就是說例如size="20"時的欄位顯示寬度表面上可容納12~25個字（依字的寬度而定），但可在欄位中輸入任意長度的字（其實依瀏覽器而定，Chrome的上限為524288個字）。

當輸入的字數超過欄位寬度時，多出的字只是隱藏在欄位的後面而已，仍可以使用鍵盤的左右方向鍵來瀏覽全部的輸入字。

例如下面是<input type="text" size="10">，但仍可以輸入很多個字。



而決定可輸入字數上限的屬性為maxlength，不要和size搞混。

下面是<input type="text" size="30" maxlength="3">。因為設定了限制字數的maxlength="3"，就算欄位很長也是只能輸入3個字。



標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)

AdSense