input 要素のサイズ指定

HTML&CSS

input要素でsize属性を使用した場合は、size属性の値は半角文字の文字数になります。
しかし、フォントの設定やブラウザの種類で表示文字数は思い通りになりません。
次のサンプルはsize属性とstyle属性、そしてmaxlength属性を使用した例です。
サンプル

<dl>
<dt>size="6"の指定</dt>
<dl><input type="text" name="name" size="6"></dl>
<dt>style="width:6em"の指定</dt>
<dl><input type="text" name="name" size="6" style="width:6em"></dl>
<dt>maxlength="6"の指定</dt>
<dl><input type="text" name="name" maxlength="6"></dl>
</dl>

input属性の幅はsize属性を使用するのではなく、CSSの設定で行った方が確実です。
input属性は置換要素ですからwidth設定ができます。
ユーザーの期待に反して勝手に入力内容がカットされるため、maxlengthのユーザビリティはあまりよいものではありません。
入力制限はJavaScriptなどを使用した方がベターかもしれません。

タイトルとURLをコピーしました